背景：之前偶然看到優(yōu)酷有類似的頁面切換動(dòng)畫效果。于是自己也打算來實(shí)現(xiàn)下這樣的效果。

動(dòng)效說明：點(diǎn)擊界面中的任意位置，界面以點(diǎn)擊位置作為中心點(diǎn)，開始以漩渦狀態(tài)，扭曲，收縮。直到消失。

直接上我實(shí)現(xiàn)的效果：

一，方法原理說明：

將頁面生成bitmap。

使用自定義View來繪制扭曲的圖像。 圖像繪制的時(shí)候使用的關(guān)鍵的api 是： canvas.drawBitmapMesh();

二，實(shí)現(xiàn)細(xì)節(jié)說明：

1.? 生成頁面Bitmap:優(yōu)先使用drawingCache ， 如果沒有再創(chuàng)建bitmap 對(duì)象。

public static Bitmap createBitmapFromView(View view) {

if (view instanceof ImageView) {

Drawable drawable = ((ImageView) view).getDrawable();

if (drawable != null && drawable instanceof BitmapDrawable) {

return ((BitmapDrawable) drawable).getBitmap();

}

}

view.clearFocus();

Bitmap bitmap = view.getDrawingCache();

if(bitmap != null) {

return bitmap;

}

bitmap = createBitmapSafely(view.getWidth(),

view.getHeight(), Bitmap.Config.ARGB_8888, 1);

if (bitmap != null) {

synchronized (sCanvas) {

Canvas canvas = sCanvas;

canvas.setBitmap(bitmap);

view.draw(canvas);

canvas.setBitmap(null);

}

}

return bitmap;

}

public static Bitmap createBitmapSafely(int width, int height, Bitmap.Config config, int retryCount) {

...

}

2. 關(guān)于自定義控件 VortexView 。 主要是再onDraw(Canvas ) 方法中使用rootView 生成的Bitmap 通過canvas.drawBitmapMesh 方法來繪制扭曲的圖像。(最開始我的方案是支持在native 中，對(duì)圖片進(jìn)行像素級(jí)別的修改。 雖然成功了，但是效率卻很慢。)

關(guān)于API drawBitmapMesh 可以參考一下這篇博文：使用drawBitmapMesh方法產(chǎn)生水波

期原理猜測(cè)應(yīng)該是使用了opengl 中紋理，坐標(biāo)變換映射的技術(shù)。(只是猜測(cè))

drawBitmapMesh使用方法：將原始圖片分割成為M行，N列。 并計(jì)算得出原始的每個(gè)交點(diǎn)再二維空間內(nèi)的坐標(biāo)。 坐上角為(0，0)點(diǎn)。 水平向右為X正方向。 垂直向下為Y正方向。? 使用漩渦算法，計(jì)算每一幀下，原始頂點(diǎn)(線的交點(diǎn))在當(dāng)前時(shí)刻下的坐標(biāo)位置。即生成的局部變量ve［］； 這樣界面就能顯示出圖像被扭曲的動(dòng)畫。

當(dāng)然：分割的行列越多，效果就會(huì)越好。

public class VortextView extends View {

...

@Override

public void onDraw(Canvas canvas) {

if (destBitmap != null) {

int mswd = mesh.getMeshWidth();

int msht = mesh.getMeshHeight();

float[] ve = mesh.getVertices();

if (rect != null) {

int count = canvas.save();

canvas.translate(rect.left, rect.top);

canvas.drawBitmapMesh(destBitmap, mswd, msht, ve, 0, null, 0, null);

canvas.restoreToCount(count);

} else {

canvas.drawBitmapMesh(destBitmap, mswd, msht, ve, 0, null, 0, null);

}

// mesh.drawLines(canvas,paint);

}

}

...

}

3. 關(guān)于算法：不管是漩渦扭曲動(dòng)效，還是仿造mac os 最小化效果。 原理都是一致的。唯一不同的地方在于算法。我們需要分別設(shè)計(jì)算法來擬合出在目標(biāo)時(shí)刻下新的頂點(diǎn)位置。

漩渦動(dòng)效算法：這里需要用到極坐標(biāo)公式。夾角隨著時(shí)間增大而增大。半徑隨著時(shí)間增大而見小。然后在求出對(duì)應(yīng)的x和y；

mac os 最小化：這里我使用了2階貝塞爾曲線。

總結(jié)

以上是生活随笔為你收集整理的java动效_Android 界面漩涡扭曲动效实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。