Lollipop動畫
Lollipop為我們帶來不少動畫,簡單而有效,靈活運用提升APP逼格
過渡動畫
Activity過渡動畫包含兩部分 :
- Activity的進入和退出
- 過渡過程中的共享元素
進入和退出
explode (分解) :從屏幕中間進進或出,移動視圖
slide (滑動) : 從屏幕邊緣進或出,移動視圖
fade (淡入淡出) : 通過改變視圖的透明度來添加或者移除視圖
使用 :
初始Activity:startActivity(mIntent,ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
目標跳轉(zhuǎn)Activity :
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);getWindow().setExitTransition()- 當A 跳轉(zhuǎn)到 B時,使A中的View退出場景的transitiongetWindow().setEnterTransition(): 當A 跳轉(zhuǎn)到 B時,使B中的View進入場景的transitiongetWindow().setReturnTransition(): 當B 返回到 A時,使B中的View退出場景的transitiongetWindow().setReenterTransition(): 當B 返回到 A時,使A中的View進入場景的transition
上述設置需要在setContentView() 之前設置
一共就是上述三種模式: Explode、Slide 、 Fade、
效果如圖:

共享元素
-
changeBounds: 捕獲共享元素的layout bound,然后播放layout bound變化動畫。ChangeBounds 是共享元素變換中用的最多的,因為前后兩個activity中共享元素的大小和位置一般都是不同的。 -
changeClipBounds: 裁剪目標視圖邊界,捕獲共享元素clip bounds,然后播放clip bounds變化動畫。 -
changeTransform: 捕獲共享元素的縮放(scale)與旋轉(zhuǎn)(rotation)屬性 ,然后播放縮放(scale)與旋轉(zhuǎn)(rotation)屬性變化動畫。 -
changeImageTransform:捕獲共享元素(ImageView)的transform matrices 屬性,然后播放ImageViewtransform matrices 屬性變化動畫。與ChangeBounds相結(jié)合,這個變換可以讓ImageView在動畫中高效實現(xiàn)大小,形狀或者ImageView.ScaleType 屬性平滑過度。
效果圖:

- 使用
- 需要共享的View 在兩邊的布局 加上
android:transitionName="one"里面的值是自己定的一個標識,但是必須保持兩邊一致 - 在啟動Activity中 找到 需要共享的控件并且設置好Tag就可以了(需要注意的傳入的只能是View)
- 在跳轉(zhuǎn)的目標Activity中設置方法:
-
getWindow().setSharedElementEnterTransition();: A->B,B進入動畫 -
getWindow().setSharedElementExitTransition();: A->B,A退出動畫 -
getWindow().setSharedElementReenterTransition();: B->A,A進入動畫 -
getWindow().setSharedElementReturnTransition();: B->A,B退出動畫
startActivity(mIntent,
ActivityOptions.makeSceneTransitionAnimation(this,
Pair.create(ivImageI, "one"), // 設置共享的控件和他的Tag 就可以了
Pair.create(ivImageIi, "two"))
.toBundle());
動畫效果
Ripple (波紋效果)
十分簡單在Xml中控件添加
- 有邊框波紋:
android:background="?android:attr/selectableItemBackground" - 無邊框波紋:
android:background="?android:attr/selectableItemBackgroundBorderless"
這個是系統(tǒng)默認的
自定義Ripple同樣簡單,立即上手
- drawable文件夾新建一個Ripple資源文件
- 代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#cb2eff" android:radius="500dp">
<item android:drawable="@color/blue_i"/>
</ripple>
android:background="@drawable/ripple_red"- 這就是一個藍色底,紅色波紋的點擊效果了
Circular Reveal
其實就是一個圓形路徑繪制。
和Animator的使用基本一致
API解析:
ViewAnimationUtils.createCircularReveal(view, centerX, centerY, startRadius, endRadius);-
view: 動畫的作用目標 -
centerX: 動畫開始的中心點X坐標 -
centerY: 動畫開始的中心點Y坐標 -
startRadius: 動畫開始時的圓半徑 -
endRadius: 動畫結(jié)束時的圓的半徑
兩種應用:
- 控件點擊的動畫效果
- 頁面過渡的動畫 : 就是給頂布局 設置 Circular 動畫
//設置頂布局過渡動畫
llRoot.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
//當布局已經(jīng)完全展示出來再開始動畫
@Override
public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
v.removeOnLayoutChangeListener(this);
Animator circularReveal = ViewAnimationUtils.createCircularReveal(
llRoot,
llRoot.getWidth() / 2,
llRoot.getHeight() / 2,
50,
1000);
circularReveal.setInterpolator(new AccelerateDecelerateInterpolator());
circularReveal.setDuration(1000);
circularReveal.start();
}
});
// 控件設置點擊動畫效果
ivImageI.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//實現(xiàn)從左上角開始的扇形展開動畫
Animator circularReveal = ViewAnimationUtils.createCircularReveal(
ivImageI,
0,
0,
0,
ivImageI.getWidth()+159);
circularReveal.setInterpolator(new AccelerateDecelerateInterpolator());
circularReveal.setDuration(1000);
circularReveal.start();
}
});
效果圖:

最后
Lollipop 中添加的動畫效果還是十分不錯的,而且使用也是十分簡單高效
將有需求的動畫效果封裝在自己的基類文件中使用起來就更加順暢了
如果覺有有用,可以點贊鼓勵一下哈O(∩_∩)O~~
附上:代碼Github