![030e9e8d43dbb0a11a2c239e97deb472.png](https://i-blog.csdnimg.cn/blog_migrate/3c6553318389fba0fb12a1421303cd37.jpeg)
这篇文章总结一下属性动画先相关知识,属性动画相较帧动画和补间动画更强大,帧动画和补间动画只能应用于 View 及其子类,而属性动画可以修改任何对象的属性值,属性值可在指定的一段时间内自动改变,根据对象属性值的变化进而实现更复杂的动画。
属性动画的常用设置
ValueAnimator
ObjectAnimator
关键帧
插值器和估值器
Gif 有点儿卡顿,谁有好 Gif 录制工具安利一个。
属性动画的常用设置
下面是属性动画的常用设置,具体如下:
1//设置属性动画持续时间 2animator.setDuration(2000); 3//设置属性插值器 4animator.setInterpolator(new AccelerateInterpolator()); 5//设置属性动画重复播放模式 6animator.setRepeatMode(ValueAnimator.REVERSE); 7//设置属性动画重复播放次数 8animator.setRepeatCount(0); 9//设置属性动画延时播放的时间10animator.setStartDelay(0);11//设置属性动画估值器,用于控制最终属性值(API22)12animator.setCurrentFraction(0.5f);13//设置当前播放时间,其值在Duration范围之内14animator.setCurrentPlayTime(1000);15//设置属性动画估值器,用于控制最终属性值16animator.setEvaluator(new IntEvaluator());17//设置属性动画监听18animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {19 @Override20 public void onAnimationUpdate(ValueAnimator animation) {21 Log.i(TAG, animation.getAnimatedValue() + "");22 //23 }24});25//...
ValueAnimator
ValueAnimator 提供了一个简单的计时引擎,用于执行动画时根据设置的时长以及其他属相完成动画值的计算,然后就可以将动画值设置到合适的目标对象上,使用的插值器默认时 AccelerateDecelerateInterpolator,表示动画开始和结束时较慢,中间加速完成动画,下面是源码中默认的插值器,具体如下:
1// The time interpolator to be used if none is set on the animation2private static final TimeInterpolator sDefaultInterpolator =3 new AccelerateDecelerateInterpolator();
在 ValueAnimator 中已经内部处理了一些估值器 IntEvaluator 和 FloatEvaluator,也就是说如果使用的时 ofInt 和 ofFloat 方法作为动画的属性值,那么 ValueAnimator 会自动处理 int 和 float 值的变化,在源码中找了一下,这部分内容在 PropertyValuesHolder 这个类中,具体如下:
1void init() { 2 if (mEvaluator == null) { 3 // We already handle int and float automatically, but not their Object 4 // equivalents 5 mEvaluator = (mValueType == Integer.class) ? sIntEvaluator : 6 (mValueType == Float.class) ? sFloatEvaluator : 7 null; 8 } 9 if (mEvaluator != null) {10 // KeyframeSet knows how to evaluate the common types - only give it a custom11 // evaluator if one has been set on this class12 mKeyframes.setEvaluator(mEvaluator);13 }14}
ValueAnimator 可以使用代码创建,也可以使用 xml 创建,下面以平移动画为例说明 ValueAnimator 的使用方式,其他如缩放、旋转等使用方式类似。
使用代码创建
1private void translation(){ 2 ValueAnimator valueAnimator = ValueAnimator.ofInt(0, 100); 3 valueAnimator.setDuration(2000); 4 valueAnimator.setInterpolator(new AccelerateInterpolator()); 5 valueAnimator.setRepeatMode(ValueAnimator.REVERSE); 6 valueAnimator.setRepeatCount(0); 7 valueAnimator.setStartDelay(0); 8// valueAnimator.setCurrentFraction(0.5f); 9// valueAnimator.setCurrentPlayTime(1000);10 valueAnimator.setEvaluator(new IntEvaluator());1112 valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {13 @Override14 public void onAnimationUpdate(ValueAnimator animation) {15 Log.i(TAG, animation.getAnimatedValue() + "");16 int x = (int) animation.getAnimatedValue();17 ivImage.setTranslationX(x);18 ivImage.setTranslationY(x);19 }20 });2122 valueAnimator.start();23}
使用xml创建
在 res/animator 文件夹下创建 test_animator.xml 文件,文件内容如下:
1<?xml version="1.0" encoding="utf-8"?> 2<animator xmlns:android="http://schemas.android.com/apk/res/android" 3 android:valueFrom="0" 4 android:valueTo="100" 5 android:valueType="intType" 6 7 android:duration="2000" 8 android:startOffset ="0" 9 android:repeatMode = "reverse"10 android:repeatCount = "0"11 android:interpolator = "@android:anim/accelerate_interpolator">12animator>
然后在 Activity 中获取 ValueAnimator,设置目标对象,启动动画即可,具体如下:
1private void translation(){ 2 ValueAnimator animator = (ValueAnimator) AnimatorInflater.loadAnimator(this,R.animator.test_animator); 3 animator.setTarget(ivImage); 4 animator.start(); 5 animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 6 @Override 7 public void onAnimationUpdate(ValueAnimator animation) { 8 Log.i(TAG, animation.getAnimatedValue() + ""); 9 int x = (int) animation.getAnimatedValue();10 ivImage.setTranslationX(x);11 ivImage.setTranslationY(x);12 }13 });14}
测试效果
这里使用 ValueAnimator 来实现平移动画,测试效果如下:
![61bc48362756ba1cf52f457aac39138c.gif](https://i-blog.csdnimg.cn/blog_migrate/bd5a81a6b2f302352471eccf3b2a1f1b.gif)
ValueAnimator
ObjectAnimator
ObjectAnimator 是 ValueAnimator 的子类,可在目标对象上支持动画属性的设置,在其构造方法中通过参数指定目标对象以及所对应动画属性的名称,然后会相应的执行对应的动画属性的 setter 方法来最终完成动画的执行,也就是说属性动画 ObjectAnimator 最终调用目标对象的 setter 方法完成目标对象属性值的变化,然后相应的改变目标对象的属性,从而实现目标对象的动画效果,下面以透明度变化来介绍 ObjectAnimator 的基本使用,代码参考如下:
1private void alpha(){2 ObjectAnimator animator = ObjectAnimator.ofFloat(ivImage,"alpha",1f,0,1f);3 animator.setDuration(3000);4 //其他属性动画设置5 //...6 animator.start();7}
下面是测试效果,如下图所示:
![29b7ae5b4beb084f162ae9ae9d63ceb1.gif](https://i-blog.csdnimg.cn/blog_migrate/41e2c25c471f51072dec2d0b8eed9e86.gif)
属性动画-透明度
至于平移、旋转、缩放动画实现方式基本如上,这里不再赘述,其对应的 setter 方法对应关系如下:
ObjectAnimator 提供了很多的 ofXxx() 方法来方面设置属性动画,如下图所示:
属性动画-ofXxx()
可根据不同的动画需求使用 ObjectValueAnimator 不同 ofXxx() 方法来实现相应的动画。
关键帧
这里简单说一下关键帧的使用,顾名思义关键帧就是在某个固定时刻上定义具体的属性值,为定义的将按照估值器返回的值返回属性值,属性动画中的关键帧使用方式如下:
1/** 2 * 关键帧的使用 3 */ 4private void keyFrame(){ 5 Keyframe keyframe1 = Keyframe.ofFloat(0,0); 6 Keyframe keyframe2 = Keyframe.ofFloat(0.25f,300); 7 //每个KeyFrame可设置自己的插值器 8 keyframe2.setInterpolator(new AccelerateInterpolator()); 9 Keyframe keyframe3 = Keyframe.ofFloat(0.75f,100);10 Keyframe keyframe4 = Keyframe.ofFloat(1,400);11 PropertyValuesHolder holder = PropertyValuesHolder.ofKeyframe("translationX",keyframe1,keyframe2,keyframe3,keyframe4);12 ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(ivImage,holder);13 animator.setDuration(3000);14 animator.start();15}
看一下添加关键帧之后对普通平移动画的改变,实现测试效果如下:
![609f655b603d541908c8e91c1c87e972.gif](https://i-blog.csdnimg.cn/blog_migrate/5270202449232cc15ab36ee1bb8b9cf2.gif)
keyFragme.gif
插值器和估值器
插值器(TimeInterpolator) 表示的是整个动画期间动画的变化规律,如加速、减速等。
Android 内置许多插值器,这些插值器基本涵盖了实际开发中的大部分情况,具体如下:
![9c2c1910f0f1ae940b74ee816e1fa5e1.png](https://i-blog.csdnimg.cn/blog_migrate/eccc9c1e9446b68bc55b4ec349089051.jpeg)
插值器
如果内置的插值器不满足需求,也可以自定义插值器。
估值器(TypeEvaluator)表示的是在整个动画期间各时刻属性值的具体变化。
这里自定义一个估值器来实现一个 View 沿正弦曲线运动,自定义估值器如下:
1/** 2 * 自定义估值器 3 * Point封装了坐标x和y 4 */ 5public class SineTypeValue implements TypeEvaluator<Point> { 6 @Override 7 public Point evaluate(float fraction, Point startValue, Point endValue) { 8 //y = sinA 9 float distance = fraction * (endValue.getX() - startValue.getX());10 float x = startValue.getX() + distance;11 float y = startValue.getY() + (float) Math.sin(distance / 100 * Math.PI) * 100;12 Point point = new Point();13 point.setX(x);14 point.setY(y);15 return point;16 }17}
然后给动画设置该估值器,监听动画属性设置 View 的位置即可实现一个 View 沿正弦曲线运动,使用方式如下:
1/** 2 * 自定义估值器的使用 3 * 正弦运动的估值器 4 */ 5private void sina(){ 6 Point startPoint = new Point(ivImage.getX(),ivImage.getY()); 7 Point endPoint = new Point(ivImage.getX()+500,ivImage.getY()); 8 ValueAnimator valueAnimator = ValueAnimator.ofObject(new SineTypeValue(), startPoint, endPoint); 9 valueAnimator.setDuration(5000);10 valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {11 @Override12 public void onAnimationUpdate(ValueAnimator animation) {13 Log.i(TAG, animation.getAnimatedValue() + "");14 Point point = (Point) animation.getAnimatedValue();15 ivImage.setX(point.getX());16 ivImage.setY(point.getY());17 }18 });19 valueAnimator.start();20}
测试效果如下:
自定义估值器
---END---
创作不易,点个“
在看
”
![845371364ed44ad23c38ffdd33973110.gif](https://i-blog.csdnimg.cn/blog_migrate/7df763492a556337d251a743ecc66163.gif)