Lollipop动画
Lollipop为我们带来不少动画，简单而有效，灵活运用提升APP逼格
过渡动画
Activity过渡动画包含两部分 ：
- Activity的进入和退出
- 过渡过程中的共享元素
进入和退出
-
explode (分解) ：从屏幕中间进进或出，移动视图
-
slide (滑动) : 从屏幕边缘进或出，移动视图
-
fade (淡入淡出) ： 通过改变视图的透明度来添加或者移除视图
-
使用 ：
初始Activity： -
startActivity(mIntent,ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
目标跳转Activity :
-
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); -
getWindow().setExitTransition()- 当A 跳转到 B时，使A中的View退出场景的transition -
getWindow().setEnterTransition(): 当A 跳转到 B时，使B中的View进入场景的transition -
getWindow().setReturnTransition(): 当B 返回到 A时，使B中的View退出场景的transition -
getWindow().setReenterTransition(): 当B 返回到 A时，使A中的View进入场景的transition
上述设置需要在setContentView() 之前设置
一共就是上述三种模式： Explode、Slide 、 Fade、
效果如图：
过渡动画演示.mp4_1492677049.gif
共享元素
-
changeBounds: 捕获共享元素的layout bound，然后播放layout bound变化动画。ChangeBounds 是共享元素变换中用的最多的，因为前后两个activity中共享元素的大小和位置一般都是不同的。 -
changeClipBounds: 裁剪目标视图边界,捕获共享元素clip bounds，然后播放clip bounds变化动画。 -
changeTransform: 捕获共享元素的缩放（scale）与旋转（rotation）属性 ，然后播放缩放（scale）与旋转（rotation）属性变化动画。 -
changeImageTransform:捕获共享元素（ImageView）的transform matrices 属性，然后播放ImageViewtransform matrices 属性变化动画。与ChangeBounds相结合，这个变换可以让ImageView在动画中高效实现大小，形状或者ImageView.ScaleType 属性平滑过度。
效果图：
共享元素.mp4_1492769148.gif
- 使用
- 需要共享的View 在两边的布局 加上
android:transitionName="one"里面的值是自己定的一个标识，但是必须保持两边一致 - 在启动Activity中 找到 需要共享的控件并且设置好Tag就可以了（需要注意的传入的只能是View）
- 在跳转的目标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"
这个是系统默认的
自定义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: 动画结束时的圆的半径
两种应用：
- 控件点击的动画效果
- 页面过渡的动画 ： 就是给顶布局 设置 Circular 动画
//设置顶布局过渡动画
llRoot.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
//当布局已经完全展示出来再开始动画
@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) {
//实现从左上角开始的扇形展开动画
Animator circularReveal = ViewAnimationUtils.createCircularReveal(
ivImageI,
0,
0,
0,
ivImageI.getWidth()+159);
circularReveal.setInterpolator(new AccelerateDecelerateInterpolator());
circularReveal.setDuration(1000);
circularReveal.start();
}
});
效果图：
circularAnim.mp4_1492705069.gif
最后
Lollipop 中添加的动画效果还是十分不错的，而且使用也是十分简单高效
将有需求的动画效果封装在自己的基类文件中使用起来就更加顺畅了
如果觉有有用，可以点赞鼓励一下哈O(∩_∩)O~~
附上：代码Github
网友评论