这一次让你彻底了解 Android Property Animation

最新推荐文章于 2021-12-23 11:29:51 发布
最新推荐文章于 2021-12-23 11:29:51 发布
阅读量132 收藏
点赞数
分类专栏： Android 基础 文章标签： 属性动画 Property Animation 自定义View 自定义控件基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjh_1110120/article/details/88629115
版权

在正式开始讲解 Property Animation 之前，先放一张用 Property Animation 实现的效果图，有兴趣的小伙伴可以先自行尝试下：

1. 属性动画概述

1.1 概念

在一段时间内通过修改对象的属性而形成的动画叫属性动画。

Creates an animation by modifying an object’s property values over a set period of time with an Animator.

1.2 属性动画的作用是什么？

从上面的定义可知，属性动画的主要是修改对象的属性，如 View 的背景颜色、透明值、位置等。

1.3 为什么 Google 官方会在 Android 3.0 的时候添加 Property Animation？

不是已经有 Tween Animation 了吗，为什么还会有 Property Animation？换句话说，Property Animation 到底能干哪些 Tween Animation 不能干的活？想明白了这些问题，自然就明白了为什么 Google 官方会在 Android 3.0 添加 Property Animation。

Tween Animation 存在的问题：

序号内容
1Tween Animation 只能作用于 View 的属性，不能作用于普通 Object 的属性
2Tween Animation 只能改变 View 的一部分属性，如 View 的 BackgroundColor 它就不能改变
3Tween Animation 只能改变 View 的“表面”，不能改变 View 的实际属性

简单解释下上面表格中列举的内容：

  1. Tween Animation 只能作用于 View，不能作用于普通 Object 的属性

Tween Animation 只能作用于绘制在屏幕上的 View，而不能作用于普通的 Object，如下面的 Student 类，Tween Animation 就不能作用于它的属性:

public class Student {

    private String name;
    private int age;
    private int studentNumber;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public int getStudentNumber() {
        return studentNumber;
    }

    public void setStudentNumber(int studentNumber) {
        this.studentNumber = studentNumber;
    }
}
  1. Tween Animation 只能改变 View 的一部分属性，如 View 的 BackgroundColor 它就不能改变

Tween Animation 包括五类动画，分别是：

序号类名
1AlphaAnimation
2ScaleAnimation
3TranslateAnimation
4RotateAnimation
5AnimationSet

也就是说，Tween Animation 只支持修改 View 的这几个方面：Alpha、Scale、Translate、Rotate 和这些的组合，一旦想要改变的 View 的属性不在这个范围内，Tween Animation 就无能为力了，如 View 的 BackgroundColor。

  1. Tween Animation 只能改变 View 的“表面”，不能改变 View 的实际属性

通过 Tween Animation 修改 View 的位置，改变的只是 View 绘制的界面，而 View 实际的位置并未改变：

上图中，为 ImageView 和 ImageView 所在的父容器都添加了点击事件。当点击 ImageView 父容器的时候，执行 TranslateAnimation 移动 ImageView 的位置。当点击 ImageView 的时候，弹出 Toast 提示当前日期。由上面的执行结果可知：当执行完 TranslateAnimation 之后，点击 ImageView 执行完动画之后最终所在的位置并未提示弹出 Toast，反而点击 ImageView 执行 TranslateAnimation 动画之前所在的位置，弹出了 Toast。

Property Animation 的出现完美地解决了以上问题。

1.4. 属性动画继承结构

属性动画涉及的类主要有：

序号类名作用
1Animator所有 Animator 的父类，主要用于定义通用的接口
2AnimatorSet主要用于组合多个属性动画
3ValueAnimator属性动画的一种，主要用于根据起始值和终止值产生动画，只负责产生在起始值和终止值之间的值，
不负责更新界面，需要用户自己实现更新界面的逻辑
4ObjectAnimator属性动画的一种，主要用于根据起始值和终止值产生动画，并将动画产生的值设置在目标对象上
5TimeAnimator不常用，在此不做介绍，想了解的小伙伴，请自行查阅相关文档

继承结构如下：

2. 如何定义属性动画？

创建属性动画的方式有两种：

  1. XML
  2. CODE
2.1 通过 XML 创建属性动画
2.1.1 通过 XML 创建 ValueAnimator
2.1.1.1 语法
<animator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="int"
    android:interpolator="@[package:]anim/interpolator_resource"
    android:valueType=["intType" | "floatType"]
    android:valueFrom="float | int | color"
    android:valueTo="float | int | color"
    android:startOffset="int"
    android:repeatCount="int"
    android:repeatMode=["repeat" | "reverse"]
    />
2.1.1.2 属性详解
属性含义取值范围
xmlns:android声明 XML 布局文件属性命名空间http://schemas.android.com/apk/res/android
android:duration动画的执行时间必须大于等于 0，否则程序将报错
android:interpolator插值器，决定了动画的变化率Android，Custom
android:valueType动画值的类型整型，浮点型，当属性动画值的类型为颜色值时可以省略
android:valueFrom动画起始值浮点数，整型数或者颜色值。当为颜色值时，必须符合颜色的定义方式（# + 六位十六进制数），否则程序将报错
android:valueTo动画结束值浮点数，整型数或者颜色值。当为颜色值时，必须符合颜色的定义方式（# + 六位十六进制数），否则程序将报错
android:startOffset动画开始偏移时间整型数，默认为 0。当为负数时，效果和默认值一样
android:repeatCount动画重复的次数整型数字，默认为 0。当为负数时，表示无限循环
android:repeatMode当动画的执行次数大于 1 时，下一次动画执行的方式重新开始（默认），反着执行
2.1.1.3 示例

与 Tween Animation 不同，Property Animation 创建的 Animation 在 res/animator 文件夹下。

//1. 创建 value_animator.xml
<?xml version="1.0" encoding="utf-8"?>
<animator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1800"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:valueType="floatType"
    android:valueFrom="-100"
    android:valueTo="800"
    android:startOffset="0"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    />
    
//2. 在代码中使用 value_animator
ValueAnimator mValueAnimator = (ValueAnimator) AnimatorInflater.loadAnimator(this, R.animator.value_animator);
mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        mTarget.setY((Float) animation.getAnimatedValue());
    }
});
mValueAnimator.start();

最终效果如下：

2.1.2 通过 XML 创建 ObjectAnimator
2.1.2.1 语法
<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="int"
    android:interpolator="@[package:]anim/interpolator_resource"
    android:propertyName="string"
    android:valueType=["intType" | "floatType"]
    android:valueFrom="float | int | color"
    android:valueTo="float | int | color"
    android:startOffset="int"
    android:repeatCount="int"
    android:repeatMode=["repeat" | "reverse"]
    />
2.1.2.2 属性详解
属性含义取值范围
xmlns:android声明 XML 布局文件属性命名空间http://schemas.android.com/apk/res/android
android:duration动画的执行时间必须大于等于 0，否则程序将报错
android:interpolator插值器，决定了动画的变化率Android，Custom
android:propertyName动画目标对象要改变的属性字符串
android:valueType动画值的类型整型，浮点型，当属性动画值的类型为颜色值时可以省略
android:valueFrom动画起始值浮点数，整型数或者颜色值。当为颜色值时，必须符合颜色的定义方式（# + 六位十六进制数），否则程序将报错
android:valueTo动画结束值浮点数，整型数或者颜色值。当为颜色值时，必须符合颜色的定义方式（# + 六位十六进制数），否则程序将报错
android:startOffset动画开始偏移时间整型数，默认为 0。当为负数时，效果和默认值一样
android:repeatCount动画重复的次数整型数字，默认为 0。当为负数时，表示无限循环
android:repeatMode当动画的执行次数大于 1 时，下一次动画执行的方式重新开始（默认），反着执行
2.1.2.3 示例
//1. 创建 object_animator.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1800"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:propertyName="Y"
    android:valueType="floatType"
    android:valueFrom="0"
    android:valueTo="800"
    android:startOffset="0"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    />
    
//2. 在代码中使用 object_animator
ObjectAnimator mObjectAnimator = (ObjectAnimator) AnimatorInflater.loadAnimator(this, R.animator.object_animator);
mObjectAnimator.setTarget(mTarget);
mObjectAnimator.start();

最终效果如下：

2.1.3 通过 XML 创建 AnimatorSet
2.1.3.1 语法
<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering=["together" | "sequentially"]>

    <objectAnimator
        android:propertyName="string"
        android:duration="int"
        android:valueFrom="float | int | color"
        android:valueTo="float | int | color"
        android:startOffset="int"
        android:repeatCount="int"
        android:repeatMode=["repeat" | "reverse"]
        android:valueType=["intType" | "floatType"]/>

    <animator
        android:duration="int"
        android:valueFrom="float | int | color"
        android:valueTo="float | int | color"
        android:startOffset="int"
        android:repeatCount="int"
        android:repeatMode=["repeat" | "reverse"]
        android:valueType=["intType" | "floatType"]/>

    <set>
        ...
    </set>
</set>
2.1.3.2 属性详解
属性含义取值范围
xmlns:android声明 XML 布局文件属性命名空间http://schemas.android.com/apk/res/android
android:ordering多个动画的执行顺序together，多个动画同时执行；sequentially，多个动画按照声明的顺序执行
2.1.3.3 示例
//1. 创建 animator_set.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="together"
    >
    <objectAnimator
        android:duration="@integer/integer_one_thousand_and_eight_hundred"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:propertyName="Y"
        android:valueType="floatType"
        android:valueFrom="0"
        android:valueTo="800"
        android:startOffset="0"
        android:repeatCount="infinite"
        android:repeatMode="reverse"
        />
    <objectAnimator
        android:duration="@integer/integer_one_thousand_and_eight_hundred"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:propertyName="ScaleX"
        android:valueType="floatType"
        android:valueFrom="1"
        android:valueTo="2"
        android:startOffset="0"
        android:repeatCount="infinite"
        android:repeatMode="reverse"
        />
    <objectAnimator
        android:duration="@integer/integer_one_thousand_and_eight_hundred"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:propertyName="ScaleY"
        android:valueType="floatType"
        android:valueFrom="1"
        android:valueTo="2"
        android:startOffset="0"
        android:repeatCount="infinite"
        android:repeatMode="reverse"
        />
</set>

//2. 在代码中使用 animator_set
AnimatorSet mAnimatorSet = (AnimatorSet)AnimatorInflater.loadAnimator(this, R.animator.animator_set);
mAnimatorSet.setTarget(mTarget);
mAnimatorSet.start();

最终效果如下：

2.2 通过 CODE 创建属性动画

在 Android 中，大多数情况下，能通过 XML 实现的功能几乎也能通过代码实现，接下来，让我们看下如何通过代码实现上面的动画。

2.2.1 通过 CODE 创建 ValueAnimator
2.2.1.1 语法
ValueAnimator valueAnimator = ValueAnimator ofFloat(float... values);
valueAnimator.setDuration(long duration);
valueAnimator.setInterpolator(TimeInterpolator value);
valueAnimator.addUpdateListener(AnimatorUpdateListener listener);
…
valueAnimator.start();
2.2.1.2 示例
ValueAnimator mValueAnimator = ValueAnimator.ofFloat(0, 800);
mValueAnimator.setDuration(1800);
mValueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
mValueAnimator.setRepeatMode(ValueAnimator.REVERSE);
mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        mTarget.setY((Float) animation.getAnimatedValue());
    }
});
mValueAnimator.start();

最终效果如下：

2.2.2 通过 CODE 创建 ObjectAnimator
2.2.2.1 语法
ObjectAnimator objectAnimator = ObjectAnimator.ofObject(Object target, String propertyName, TypeEvaluator evaluator, Object... values);
objectAnimator.setDuration(long duration);
objectAnimator.setInterpolator(TimeInterpolator value);
…
objectAnimator.start();
2.2.2.2 示例
ObjectAnimator mObjectAnimator = ObjectAnimator.ofFloat(mTarget, "y", 0, 800);
mObjectAnimator.setDuration(1800);
mObjectAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
mObjectAnimator.setRepeatCount(ValueAnimator.INFINITE);
mObjectAnimator.setRepeatMode(ValueAnimator.REVERSE);
mObjectAnimator.start();

最终效果如下：

2.2.3 通过 CODE 创建 AnimatorSet
2.2.3.1 语法
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(Animator... items);
animatorSet.playSequentially(Animator... items);
//非必须
animatorSet.setTarget(mTarget);
…
animatorSet.start();
2.2.3.2 示例
ObjectAnimator translateYObjectAnimator = ObjectAnimator.ofFloat(mTarget, "y", 0, 800);
translateYObjectAnimator.setDuration(1800);
translateYObjectAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
translateYObjectAnimator.setRepeatCount(ValueAnimator.INFINITE);
translateYObjectAnimator.setRepeatMode(ValueAnimator.REVERSE);
ObjectAnimator scaleXObjectAnimator = ObjectAnimator.ofFloat(mTarget, "scaleX", 1, 2);
scaleXObjectAnimator.setDuration(1800);
scaleXObjectAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
scaleXObjectAnimator.setRepeatCount(ValueAnimator.INFINITE);
scaleXObjectAnimator.setRepeatMode(ValueAnimator.REVERSE);
ObjectAnimator scaleYObjectAnimator = ObjectAnimator.ofFloat(mTarget, "scaleY", 1, 2);
scaleYObjectAnimator.setDuration(1800);
scaleYObjectAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
scaleYObjectAnimator.setRepeatCount(ValueAnimator.INFINITE);
scaleYObjectAnimator.setRepeatMode(ValueAnimator.REVERSE);
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(translateYObjectAnimator, scaleXObjectAnimator, scaleYObjectAnimator);
mAnimatorSet.playSequentially();
//非必须
//        mAnimatorSet.setTarget(mTarget);
mAnimatorSet.start();

最终效果如下：

2.3 监听属性动画

Property Animation 中一共有三种监听事件：

  1. AnimatorListener；
  2. AnimatorPauseListener；
  3. AnimatorUpdateListener；
2.3.1 AnimatorListener

AnimatorListener 接口主要用于监听 Property Animation 的开始、结束、取消、重复状态，需要实现的方法分别是：

@Override
public void onAnimationStart(Animator animation) {}

@Override
public void onAnimationEnd(Animator animation) {}

@Override
public void onAnimationCancel(Animator animation) {}

@Override
public void onAnimationRepeat(Animator animation) {}
2.3.2 AnimatorPauseListener

AnimatorPauseListener 主要用于监听 Property Animation 的暂停、恢复状态，需要实现的方法分别是：

@Override
public void onAnimationPause(Animator animation) {}

@Override
public void onAnimationResume(Animator animation) {}
2.3.3 AnimatorUpdateListener

AnimatorUpdateListener 是 ValueAnimator 及其子类特有的接口，主要用于监听动画中值的变化，用于手动更新界面，需要实现的方法是：

@Override
public void onAnimationUpdate(ValueAnimator animation) {}

接下来用实例演示下这些方法分别是什么时候调用：

//1. xml 布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/property_animation_root_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".propertyanimation.PropertyAnimationListenerActivity">

    <ImageView
        android:id="@+id/property_animation_target"
        android:layout_width="@dimen/avatar_size_xxx"
        android:layout_height="@dimen/avatar_size_xxx"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="@dimen/item_height"
        android:src="@drawable/bird_dove" />

    <LinearLayout
        android:id="@+id/property_animation_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <Button
            android:id="@+id/property_animation_start"
            style="@style/TweenAnimationActivityButton"
            android:layout_marginLeft="@dimen/small_padding"
            android:text="@string/start" />

        <Button
            android:id="@+id/property_animation_pause"
            style="@style/TweenAnimationActivityButton"
            android:text="@string/pause" />

        <Button
            android:id="@+id/property_animation_cancel"
            style="@style/TweenAnimationActivityButton"
            android:text="@string/cancel" />

        <Button
            android:id="@+id/property_animation_stop"
            style="@style/TweenAnimationActivityButton"
            android:text="@string/stop" />
    </LinearLayout>
</RelativeLayout>

//2. 通过代码监听 AnimatorListener、AnimatorPauseListener 和 AnimatorUpdateListener
public class PropertyAnimationListenerActivity extends AppCompatActivity implements View.OnClickListener, ValueAnimator.AnimatorUpdateListener, Animator.AnimatorListener,Animator.AnimatorPauseListener {

    private ImageView mTarget;
    private Button mStart,mPause,mCancel,mStop;
    private ValueAnimator mValueAnimator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_property_animation_listener);
        initView();
        initData();
    }

    private void initView(){
        mTarget = findViewById(R.id.property_animation_target);
        mStart = findViewById(R.id.property_animation_start);
        mPause = findViewById(R.id.property_animation_pause);
        mCancel = findViewById(R.id.property_animation_cancel);
        mStop = findViewById(R.id.property_animation_stop);
        mStart.setOnClickListener(this);
        mPause.setOnClickListener(this);
        mCancel.setOnClickListener(this);
        mStop.setOnClickListener(this);
    }

    private void initData(){
        setTitle(R.string.property_animation_listener);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.property_animation_start:
                startAnimation();
                break;
            case R.id.property_animation_pause:
                pauseAnimation();
                break;
            case R.id.property_animation_cancel:
                cancelAnimation();
                break;
            case R.id.property_animation_stop:
                stopAnimation();
                break;
        }
    }

    private void startAnimation(){
        if(mValueAnimator == null){
            mValueAnimator = ValueAnimator.ofFloat(getResources().getInteger(R.integer.integer_zero), getResources().getInteger(R.integer.integer_eight_hundred));
            mValueAnimator.setDuration(getResources().getInteger(R.integer.integer_one_thousand_and_eight_hundred));
            mValueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
            mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
            mValueAnimator.setRepeatMode(ValueAnimator.REVERSE);
            mValueAnimator.addUpdateListener(this);
            mValueAnimator.addListener(this);
            mValueAnimator.addPauseListener(this);
            mValueAnimator.start();
        }else if(mValueAnimator.isPaused()){
            mValueAnimator.resume();
        }else if(!mValueAnimator.isStarted()){
            mValueAnimator.start();
        }

    }

    private void pauseAnimation(){
        if(mValueAnimator != null && !mValueAnimator.isPaused()){
            mValueAnimator.pause();
        }
    }

    private void cancelAnimation(){
        if(mValueAnimator != null){
            mValueAnimator.cancel();
        }
    }

    private void stopAnimation(){
        if(mValueAnimator != null){
            mValueAnimator.end();
        }
    }

    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationUpdate  ");
        }
        mTarget.setY((Float) animation.getAnimatedValue());
    }

    @Override
    public void onAnimationStart(Animator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationStart  ");
        }
    }

    @Override
    public void onAnimationEnd(Animator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationEnd  ");
        }
    }

    @Override
    public void onAnimationCancel(Animator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationCancel  ");
        }
    }

    @Override
    public void onAnimationRepeat(Animator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationRepeat  ");
        }
    }

    @Override
    public void onAnimationPause(Animator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationPause  ");
        }
    }

    @Override
    public void onAnimationResume(Animator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationResume  ");
        }
    }

}

最终效果如下：

操作步骤如下：

  1. start–>pause–>resume–>cancel；
  2. start–>stop；

Log 输出的信息为：

2019-03-17 18:16:04.493 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationStart  
2019-03-17 18:16:04.494 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationUpdate  
2019-03-17 18:16:05.134 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationUpdate  
2019-03-17 18:16:05.152 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationUpdate  
2019-03-17 18:16:05.861 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationUpdate  
2019-03-17 18:16:05.863 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationPause  
2019-03-17 18:16:07.045 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationResume  
2019-03-17 18:16:07.056 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationUpdate  
2019-03-17 18:16:07.140 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationUpdate  
2019-03-17 18:16:07.164 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationUpdate  
2019-03-17 18:16:07.472 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationUpdate  
2019-03-17 18:16:07.490 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationRepeat  
2019-03-17 18:16:07.491 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationUpdate  
2019-03-17 18:16:08.161 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationUpdate  
2019-03-17 18:16:08.177 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationUpdate  
2019-03-17 18:16:08.757 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationUpdate  
2019-03-17 18:16:08.759 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationCancel  
2019-03-17 18:16:08.759 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationEnd  
2019-03-17 18:16:10.495 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationStart  
2019-03-17 18:16:10.496 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationUpdate  
2019-03-17 18:16:11.159 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationUpdate  
2019-03-17 18:16:11.174 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationUpdate  
2019-03-17 18:16:11.932 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationUpdate  
2019-03-17 18:16:11.933 23612-23612/com.smart.animationanalyse E/TAG:   onAnimationEnd
2.4 属性动画工作原理

属性动画的工作原理，大致如下：

当 ValueAnimator 调用 start 方法之后，ValueAnimator 会根据 Property Animation 当前运行时间与总的动画持续时间计算出一个时间消耗百分数（The elapsed fraction）。紧接着，ValueAnimator 将这个时间消耗百分数交给当前 ValueAnimator 的插值器（Interpolator），不同的 Interpolator 会根据不同的算法将这个时间消耗百分数转换成插值百分数（The interpolated fraction）。紧接着，ValueAnimator 会将这个插值百分数交给当前 ValueAnimator 的估值器（TypeEvaluator），不同的 TypeEvaluator 会根据不同的算法将这个插值百分数转换最终的动画值（The final value）。

上面的文字可以用函数表示为：

The interpolated fraction = f(The elapsed fraction);

The final value = h(The interpolated fraction);

举个例子：

上面这个属性动画的 Duration 为 40ms，Intepolator 为 LinearInterpolator，Distance 为 40。

在 t = 10ms 时，The elapsed fraction 为 0.25 = 10/40，The interpolated fraction = 0.25，The final value 为 10 = (40 - 0) * 0.25。

有些人可能不懂为什么此处 The interpolated fraction 和 The elapsed fraction 相等，其实只要看下 LinearInterpolator 源码就懂啦：

public class LinearInterpolator extends BaseInterpolator implements NativeInterpolatorFactory {

    public LinearInterpolator() {
    }

    public LinearInterpolator(Context context, AttributeSet attrs) {
    }

    //此处的 input 即为 The elapsed fraction，LinearInterpolator 并未对其进行任何特殊处理，而是直接将其返回，
    //而这个返回值就是 The interpolated fraction，所以此处 The interpolated fraction 和 The elapsed fraction 相等。
    public float getInterpolation(float input) {
        return input;
    }

    /** @hide */
    @Override
    public long createNativeInterpolator() {
        return NativeInterpolatorFactoryHelper.createLinearInterpolator();
    }
}

上面这个属性动画的 Duration 为 40ms，Intepolator 为 AccelerateDecelerateInterpolator，Distance 为 40。

在 t = 10ms 时，The elapsed fraction 为 0.25 = 10/40，The interpolated fraction = 0.14644662，The final value 为 5.8578648 = (40 - 0) * 0.14644662。

有些人可能不知道为什么 The interpolated fraction 的值为 0.14644662，其实只要看下 LinearInterpolator 源码就懂啦：

public class AccelerateDecelerateInterpolator extends BaseInterpolator
        implements NativeInterpolatorFactory {
    public AccelerateDecelerateInterpolator() {
    }

    @SuppressWarnings({"UnusedDeclaration"})
    public AccelerateDecelerateInterpolator(Context context, AttributeSet attrs) {
    }

    public float getInterpolation(float input) {
        return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
    }

    /** @hide */
    @Override
    public long createNativeInterpolator() {
        return NativeInterpolatorFactoryHelper.createAccelerateDecelerateInterpolator();
    }
}

The interpolated fraction = (float)(Math.cos((0.25 + 1) * Math.PI) / 2.0f) + 0.5f = 0.14644662

2.5 自定义插值器

Property Animation 中用的插值器与 Tween Animation 中的一样，因此在此不赘述，想要了解如何自定义插值器，请查阅《这一次让你彻底了解 Android Tween Animation》。

此处，仅结合《这一次让你彻底了解 Android Tween Animation》一文中定义的 DecelerateAccelerateInterpolator 和 ValueAnimator 做个简单的示例：

//1. 自定义减速加速插值器
public class DecelerateAccelerateInterpolator implements Interpolator {

    @Override
    public float getInterpolation(float input) {
        return (float) ((Math.tan(Math.PI/2 * input - Math.PI/4) + 1)/2);
    }

}

//2. 应用自定义插值器
public class PropertyAnimationListenerActivity extends AppCompatActivity implements View.OnClickListener, ValueAnimator.AnimatorUpdateListener, Animator.AnimatorListener,Animator.AnimatorPauseListener {

    private ImageView mTarget;
    private Button mStart,mPause,mCancel,mStop;
    private ValueAnimator mValueAnimator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_property_animation_listener);
        initView();
        initData();
    }

    private void initView(){
        mTarget = findViewById(R.id.property_animation_target);
        mStart = findViewById(R.id.property_animation_start);
        mPause = findViewById(R.id.property_animation_pause);
        mCancel = findViewById(R.id.property_animation_cancel);
        mStop = findViewById(R.id.property_animation_stop);
        mStart.setOnClickListener(this);
        mPause.setOnClickListener(this);
        mCancel.setOnClickListener(this);
        mStop.setOnClickListener(this);
    }

    private void initData(){
        setTitle(R.string.property_animation_custom_interpolator_value_animator);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.property_animation_start:
                startAnimation();
                break;
            case R.id.property_animation_pause:
                pauseAnimation();
                break;
            case R.id.property_animation_cancel:
                cancelAnimation();
                break;
            case R.id.property_animation_stop:
                stopAnimation();
                break;
        }
    }

    private void startAnimation(){
        if(mValueAnimator == null){
            mValueAnimator = ValueAnimator.ofFloat(getResources().getInteger(R.integer.integer_zero), getResources().getInteger(R.integer.integer_eight_hundred));
            mValueAnimator.setDuration(getResources().getInteger(R.integer.integer_one_thousand_and_eight_hundred));
            mValueAnimator.setInterpolator(new DecelerateAccelerateInterpolator());
            mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
            mValueAnimator.setRepeatMode(ValueAnimator.REVERSE);
            mValueAnimator.addUpdateListener(this);
            mValueAnimator.addListener(this);
            mValueAnimator.addPauseListener(this);
            mValueAnimator.start();
        }else if(mValueAnimator.isPaused()){
            mValueAnimator.resume();
        }else if(!mValueAnimator.isStarted()){
            mValueAnimator.start();
        }


    }

    private void pauseAnimation(){
        if(mValueAnimator != null && !mValueAnimator.isPaused()){
            mValueAnimator.pause();
        }
    }

    private void cancelAnimation(){
        if(mValueAnimator != null){
            mValueAnimator.cancel();
        }
    }

    private void stopAnimation(){
        if(mValueAnimator != null){
            mValueAnimator.end();
        }
    }

    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationUpdate  ");
        }
        mTarget.setY((Float) animation.getAnimatedValue());
    }

    @Override
    public void onAnimationStart(Animator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationStart  ");
            Log.e(Constants.TAG, String.valueOf((float)(Math.cos((0.25 + 1) * Math.PI) / 2.0f) + 0.5f));
        }
    }

    @Override
    public void onAnimationEnd(Animator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationEnd  ");
        }
    }

    @Override
    public void onAnimationCancel(Animator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationCancel  ");
        }
    }

    @Override
    public void onAnimationRepeat(Animator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationRepeat  ");
        }
    }

    @Override
    public void onAnimationPause(Animator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationPause  ");
        }
    }

    @Override
    public void onAnimationResume(Animator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationResume  ");
        }
    }

}

最终效果如下：

2.6 自定义估值器

想要自定义估值器，只要实现 TypeEvaluator 接口，并实现其中定义的 evaluate 方法即可。

接下来，我们自定义一个估值器：

//1. 自定义估值器
public class CustomTypeEvaluator implements TypeEvaluator {

    @Override
    public Object evaluate(float fraction, Object startValue, Object endValue) {
        float startFloat = ((Number) startValue).floatValue();
        return 200 + fraction * (((Number) endValue).floatValue() - startFloat);
    }
    
}

//2. 应用自定义估值器
public class PropertyAnimationListenerActivity extends AppCompatActivity implements View.OnClickListener, ValueAnimator.AnimatorUpdateListener, Animator.AnimatorListener,Animator.AnimatorPauseListener {

    private ImageView mTarget;
    private Button mStart,mPause,mCancel,mStop;
    private ValueAnimator mValueAnimator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_property_animation_listener);
        initView();
        initData();
    }

    private void initView(){
        mTarget = findViewById(R.id.property_animation_target);
        mStart = findViewById(R.id.property_animation_start);
        mPause = findViewById(R.id.property_animation_pause);
        mCancel = findViewById(R.id.property_animation_cancel);
        mStop = findViewById(R.id.property_animation_stop);
        mStart.setOnClickListener(this);
        mPause.setOnClickListener(this);
        mCancel.setOnClickListener(this);
        mStop.setOnClickListener(this);
    }

    private void initData(){
        setTitle(R.string.property_animation_custom_typeEvaluator_value_animator);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.property_animation_start:
                startAnimation();
                break;
            case R.id.property_animation_pause:
                pauseAnimation();
                break;
            case R.id.property_animation_cancel:
                cancelAnimation();
                break;
            case R.id.property_animation_stop:
                stopAnimation();
                break;
        }
    }

    private void startAnimation(){
        if(mValueAnimator == null){
            mValueAnimator = ValueAnimator.ofFloat(getResources().getInteger(R.integer.integer_zero), getResources().getInteger(R.integer.integer_eight_hundred));
            mValueAnimator.setDuration(getResources().getInteger(R.integer.integer_one_thousand_and_eight_hundred));
            mValueAnimator.setInterpolator(new DecelerateAccelerateInterpolator());
            mValueAnimator.setEvaluator(new CustomTypeEvaluator());
            mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
            mValueAnimator.setRepeatMode(ValueAnimator.REVERSE);
            mValueAnimator.addUpdateListener(this);
            mValueAnimator.addListener(this);
            mValueAnimator.addPauseListener(this);
            mValueAnimator.start();
        }else if(mValueAnimator.isPaused()){
            mValueAnimator.resume();
        }else if(!mValueAnimator.isStarted()){
            mValueAnimator.start();
        }


    }

    private void pauseAnimation(){
        if(mValueAnimator != null && !mValueAnimator.isPaused()){
            mValueAnimator.pause();
        }
    }

    private void cancelAnimation(){
        if(mValueAnimator != null){
            mValueAnimator.cancel();
        }
    }

    private void stopAnimation(){
        if(mValueAnimator != null){
            mValueAnimator.end();
        }
    }

    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationUpdate  ");
        }
        mTarget.setY((Float) animation.getAnimatedValue());
    }

    @Override
    public void onAnimationStart(Animator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationStart  ");
            Log.e(Constants.TAG, String.valueOf((float)(Math.cos((0.25 + 1) * Math.PI) / 2.0f) + 0.5f));
        }
    }

    @Override
    public void onAnimationEnd(Animator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationEnd  ");
        }
    }

    @Override
    public void onAnimationCancel(Animator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationCancel  ");
        }
    }

    @Override
    public void onAnimationRepeat(Animator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationRepeat  ");
        }
    }

    @Override
    public void onAnimationPause(Animator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationPause  ");
        }
    }

    @Override
    public void onAnimationResume(Animator animation) {
        if(Constants.IS_DEBUG){
            Log.e(Constants.TAG, "  onAnimationResume  ");
        }
    }

}

最终效果如下：

下面使用默认插值器的效果图：

2.7 ViewPropertyAnimator 使用简介

当需要同时更改 View 的多个属性的时候，我知道三种方法：

  1. ObjectAnimator + AnimatorSet；
  2. PropertyValuesHolder + ObjectAnimator；
  3. ViewPropertyAnimator；

接下来，分别用三种方法分别实现同一种效果：

View 的 Y 值从当前位置增到 400，Alpha 值 从 1.0f 变成 0.1f。

2.7.1 ObjectAnimator + AnimatorSet
ObjectAnimator alphaObjectAnimator = ObjectAnimator.ofFloat(mTarget, "alpha", 1.0f, 0.1f);
ObjectAnimator yObjectAnimator = ObjectAnimator.ofFloat(mTarget, "y", 400f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(alphaObjectAnimator, yObjectAnimator);
animatorSet.start();

最终效果如下：

2.7.2 PropertyValuesHolder + ObjectAnimator
PropertyValuesHolder alphaPropertyValuesHolder = PropertyValuesHolder.ofFloat("alpha", 1.0f, 0.1f);
PropertyValuesHolder yPropertyValuesHolder = PropertyValuesHolder.ofFloat("y", 400f);
ObjectAnimator.ofPropertyValuesHolder(mTarget, alphaPropertyValuesHolder, yPropertyValuesHolder).start();

最终效果如下：

2.7.3 ViewPropertyAnimator
ViewPropertyAnimator viewPropertyAnimator = mTarget.animate();
viewPropertyAnimator.alpha(0.1f);
viewPropertyAnimator.y(400f);

//也可以写成一句：
mTarget.animate().alpha(0.1f).y(400f);

最终效果如下：

相比于上面两种实现，通过 ViewPropertyAnimator 实现是不是更简单？相似的简单操作类还有 ViewAnimationUtils。

3. 应用实例

Property Animation 的应用场景还是很多的，所有能用 Tween Animation 实现的动画都能通过 Property Animation 实现，另外，大多数的自定义 View 中都有 Property Animation 的身影，如下面这些都是我通过自定义 View + Property Animation 实现的：

4. 参考文献

  1. Animation resources
  2. Property Animation Overview
极速24号
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android中Property Animation属性动画编写的实例教程
01-04
Android提供了几种动画类型：View Animation 、Drawable Animation 、Property Animation 。View Animation相当简单，不过只能支持简单的缩放、平移、旋转、透明度基本的动画，且有一定的局限性。比如：你希望View有...
Android Animation：这一次让你彻底了解 Android Property Animation
weixin_34148340的博客
03-17 180
在正式开始讲解 Property Animation 之前，先放一张用 Property Animation 实现的效果图，有兴趣的小伙伴可以先自行尝试下： 1. 属性动画概述 1.1 概念 在一段时间内通过修改对象的属性而形成的动画叫属性动画。 Creates an animation by modifying an object's property values over a set...
Android：属性动画（Property Animation）的理解和使用
JMW1407的博客
04-14 833
属性动画1、属性动画的理解和使用 1、属性动画的理解和使用
android native property属性
大脸猫的博客
07-08 4968
前几天在分析Camera的时候，有一段这样的代码 property_get("service.camera.hw", value,"base");从字面猜测这是获取属性值，但是怎么去获取？属性值又在哪设置的？决定等把Camera HAL理完了之后，把这个也分析一下。今天就粗略的看
Android属性之build.prop，及property_get/property_set
sevedk的专栏
04-21 1599
简要分析一下build.prop是如何生成的。Android的build.prop文件是在Android编译时收集的各种property（LCD density/语言/编译时间, etc.），编译完成之后，文件生成在out/target/product//system/目录下。在Android运行时可以通过property_get()[c/c++域] / SystemProperties_get*
Android动画之(PropertyAnimation)属性动画详解(一)
02-04
博客示例代码：http://blog.csdn.net/xiaohao0724/article/details/54863112
Android 属性动画（Property Animation） 完全解析 源码程序
07-25
代码为博客实例代码：http://blog.csdn.net/lmj623565791/article/details/38067475 有问题博客留言
Android中编写属性动画PropertyAnimation的进阶实例
09-02
主要介绍了Android中编写属性动画PropertyAnimation的进阶实例,包括一些缩放和淡入淡出效果的设计,强大且不算复杂,需要的朋友可以参考下
Android属性动画（一）—— 属性动画的基本使用
Marck的博客
04-27 716
一、概述 属性动画（property animation）是在 API11 引入的新特性，它相比于补间动画有如下优势： 补间动画只能对View进行操作，而属性动画可以对任何对象进行操作，甚至还可以没有对象。 补间动画只能实现平移、缩放、旋转和透明度这4种动画，当我们需要更多效果时，补间动画无能为力；而属性动画则具有良好的扩展性，只要我们根据一定的规则，我们可以操作多种属性。 补间动画只改变Vie...
Android 属性动画（Property Animation）
07-24
代码为博客示例代码：http://blog.csdn.net/lmj623565791/article/details/38067475 有问题请博客留言
Android动画篇——Property Animation（属性动画）
chiai3519的博客
03-28 414
OverView The property animation system is a robust framework that allows you to animate almost anything. You can define an animation to change any...
Android动画系列之属性动画（Property Animation）详解
帅绝天下的博客
07-30 407
Android动画系列之属性动画（Property Animation）详解 1、简介 Property Animation官方链接 属性动画可以让任何对象加上动画效果。可以定义一个动画来改变任何对象属性，无论它是否显示在屏幕上。在指定的时间长度，属性动画改变属性值。通过指定对象属性来创造动画效果，比如View在屏幕上的位置，动画的时长，以及动画值的改变。 属性动画系统可以让定义一个动画的...
Android 属性动画（Property Animation） 完全解析，程序员面试防坑宝典
m0_64604178的博客
12-23 1865
3、看了上面的例子，因为设置的操作的属性只有一个，那么如果我希望一个动画能够让View既可以缩小、又能够淡出（3个属性scaleX,scaleY,alpha），只使用ObjectAnimator咋弄？ 想法是不是很不错，可能会说使用AnimatorSet啊，这一看就是一堆动画塞一起执行，但是我偏偏要用一个ObjectAnimator实例实现呢~下面看代码： [java]  view plain  copy public void rotateyAnimRun(fi
Android动画(四)ObjectAnimator的介绍以及使用
热门推荐
高级开发者进阶ing... QaQ
07-01 1万+
大家带来ObjectAnimator介绍以及使用概述公共代码ofFloat()改变透明度(alpha)ofFloat()旋转(rotation)rotationrotationXrotationY 概述 ValueAnimator需要通过监听它的方法来改变值,用起来比较麻烦. ObjectAnimator是继承自ValueAnimator的,所以ValueAnimator中的方法,ObjectAnimator都可以使用. ObjectAnimator中重写了ofInt(),ofFloat()等方法 公共
Android动画系列（三） - Property Animation
SingleShu的博客
04-15 448
那么接着学习属性动画，之前的ViewAnimation和插值器看了的话，那么谷歌提供的动画效果掌握的差不多了。这里给出之前的文章链接。 Android动画系列（二）插值器效果:http://blog.csdn.net/sw5131899/article/details/70176382 Android动画系列（一）ViewAnimation：http://blog.csdn.net/sw513189
Android 属性动画（Property Animation） 完全解析 （上）
weixin_30917213的博客
07-25 962
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/380674751、概述Android提供了几种动画类型：View Animation 、Drawable Animation 、Property Animation 。View Animation相当简单，不过只能支持简单的缩放、平移、旋转、透明度基本的动画，且有一定的局限性。...
Android基础篇-属性动画（Property Animation）
王涛的博客
11-05 1201
效果图： 属性动画（Property Animation）：这个是在Android 3.0中才引进的，它更改的是对象的实际属性，在View Animation（Tween Animation）中，其改变的是View的绘制效果，真正的View的属性保持不变，比如无论你在对话中如何缩放Button的大小，Button的 有效点击区域还是没有应用动画时的区域，其位置与大小都不变。而在Property A
android animator 简书,Android ObjectAnimator源码不一样的分析
weixin_35070925的博客
05-31 461
1.前言最近在看项目代码中，突然冒出这样一个想法：如果在ObjectAnimator动画结束回调函数onAnimationEnd中重新start此动画，是否能达到循环播放动画呢？其实通过setRepeatCount()和setRepeatMode()函数配合使用也是可以实现动画循环播放的效果，但是出于好奇，我还是想通过代码实现来验证自己的想法，代码如下：final ObjectAnimator o...
qml的PropertyAnimation
最新发布
05-30
QML中的PropertyAnimation是一种用于控制对象属性变化的组件。它可以控制任何QML对象的属性值，比如位置、大小、颜色、透明度等等。 PropertyAnimation组件的用法非常简单，只需要设置target属性和property属性，以及变化的目标值to和动画时长duration即可。例如，以下代码可以让一个Rectangle在2秒内从当前位置移动到(100, 100)： ``` Rectangle { id: rect width: 100 height: 100 color: "red" MouseArea { anchors.fill: parent onClicked: { var animation = PropertyAnimation { target: rect property: "x" to: 100 duration: 2000 } animation.start() } } } ``` 在这个例子中，当鼠标单击Rectangle时，会创建一个PropertyAnimation组件并启动它，使得Rectangle的x属性从当前值移动到100，动画时长为2秒。 需要注意的是，target属性必须指定一个有效的对象，而property属性必须指定该对象的一个有效属性。to属性指定了属性变化的目标值，duration属性指定了动画的时长。可以根据需要设置其他属性，比如easing属性用于控制动画的速度曲线，from属性用于设置属性变化的起始值等。 PropertyAnimation组件通常作为QML动画框架的一部分使用，可以实现各种动态效果，比如渐变、缩放、平移等。在使用时需要确保目标对象和属性正确设置，以及动画时长与效果匹配。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值