Android動畫了解—一些項目案例分析

寫在前面

由於我前面寫了N多篇文章，但是還是感覺缺少一些相關的生動的例子，所以分析一些，手寫一些。

帶路徑運動的過渡動畫

最近MIUI 12 更新，我發現它又一個界面啓動的轉場過渡效果還不錯，是帶有拋物線的效果，所以在這裏也寫一個帶拋物線的轉場過渡效果.

大家可以發現，從Activity 跳轉 Activity 的時候，有一個弧度的，這就是在共享過渡動畫的基礎添加的效果。

涉及知識點

• 過渡/轉場動畫： Android動畫了解—轉場/過渡(Transition) 動畫

實現代碼(超級簡單)

// XiaomiDemoActivity 的代碼
ViewCompat.setTransitionName(view, "ShardTest");
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(XiaomiDemoActivity.this,
                view, "ShardTest");
// 啓動
Intent intent = new Intent(this, XiaoMiHomeActivity.class);
intent.putExtra("res", res);
startActivity(intent, options.toBundle());

// XiaoMiHomeActivity 的代碼
// XML需要設置共享元素一樣的名稱
<ImageView
        android:id="@+id/share_iv"
        android:transitionName="ShardTest" />
// 設置運動軌跡的效果     
ArcMotion arcMotion = new ArcMotion();
rcMotion.setMinimumVerticalAngle(90f);
getWindow().setSharedElementEnterTransition(changeBounds);
getWindow().setSharedElementExitTransition(changeBounds);
// 設置 XiaoMiHomeActivity 傳過來的圖片資源.
Intent intent = getIntent();
int res = intent.getIntExtra("res", R.drawable.mitv_icn_game);
shareIv.setImageResource(res);

XimoMiHomeActivity源碼

XiaoMiDemoActivity源碼

---

整體縮放的效果

我們看到 MIUI 12 鎖屏解鎖後，桌面會整體縮放回來，這裏的縮放涉及到每個圖標，我們就來分析下吧.

涉及的知識點：

• 過渡/轉場動畫： Android動畫了解—轉場/過渡(Transition) 動畫 當然屬性動畫也能做，不過用這種方式就更簡單一些

代碼實現方式：

Transition explode = new Explode();
explode.setDuration(888);
TransitionManager.beginDelayedTransition(mLauncherRv, explode);
mLauncherRv.setAdapter(new LauncherAdapter());

當然要完成小米那種更流暢的方式，肯定沒有那麼簡單，很多細節還需要慢慢調整，這裏只是寫一個小DEMO，給大家講解下思路.

DEMO源碼

---

整體寬高改變的過渡效果

這裏再次蹭一下 MIUI 12 的動畫熱點，還是拿出MIUI 的動效來看看，這裏如何去實現呢？來看例子

涉及的知識點：

相關代碼：

先去打球，晚上回來補齊

---

兩個界面佈局的過渡效果

*涉及的知識點：

沒有任何動效的切換過渡效果

加入過渡動畫效果的切換效果

---

帶水波紋佈局的效果

涉及的知識點：

• View繪製流程(draw, onDraw)： 不熟悉自定義View，可以複習下 自定義View 的繪製draw
• 繪製的相關知識點(Path，Region.Op)： Path 使用了 cubicTo(貝塞爾)，moveTo，lineTo

代碼實現

Path mPath = new Path();
Region.Op mRegionOp = Op.INTERSECT;
// draw 是繪製自身與子控件的地方.
public void draw(final Canvas canvas) {
 	try {
    	canvas.save();
		canvas.clipPath(mPath, mRegionOp);
		super.draw(canvas);
	} finally {
		canvas.restore();
	}
}
// 設置剪切掉的路徑
public void revealForPercentage(float percent) {
	path.reset();
	path.moveTo(percent, 0f);
	path.lineTo(0f, 0f);
	path.lineTo(0f, getHeight());
	path.lineTo(percent, getHeight());
	path.close();
	invalidate();
}
//

LiquidSwipe源碼

將cubicTo(貝塞爾)加上去後，最終的效果圖如下：

源碼查看

---

幾行代碼實現轉圈圈的效果

衆所衆知，進度變化的時候，是很刻板的，沒有過渡的效果，當然要實現也很簡單，使用 屬性動畫，也可以做，但是這裏我們介紹使用 過渡動畫來做，要更簡單一些。

涉及知識點：

• 過渡動畫： Android動畫了解—轉場/過渡(Transition) 動畫

代碼實現(超級簡單)

// 保存之前的狀態
TransitionManager.beginDelayedTransition(
(ViewGroup) findViewById(R.id.root_anim_layout), new ProgressTransition());
mProgressBarH.setProgress(value);

這樣的話，圓形的進度條也可以這樣做哦，看效果圖

具體源碼(setProgressTest)

---

界面翻轉的效果

涉及的知識點：

• 屬性動畫： ValueAnimator 或者 ObjectAnimatro 也可以.

相關代碼：

ViewCompat.setPivotX(mLauncherRv, -mLauncherRv.getHeight());
ValueAnimator valueAnimator = ValueAnimator.ofFloat(1.0f, 0.0f);
valueAnimator.setInterpolator(new BounceInterpolator());
valueAnimator.addUpdateListener(new AnimatorUpdateListener() {
	@Override
	public void onAnimationUpdate(final ValueAnimator animation) {
		float value = (float) animation.getAnimatedValue();
		mLauncherRv.setRotation(-90 * value);
	}
});
valueAnimator.setDuration(1888);
valueAnimator.start();

DEMO源碼

原Flourish源碼

---

Android動畫了解系列文章