04.2 精通自定义 View 之属性动画进阶——ViewPropertyAnimator

发表于 | 分类于 |

返回自定义 View 目录

4.2.1 概述

使用 ObjectAnimator：

1
2
ObjectAnimator animator = ObjectAnimator.ofFloat(mView, "alpha", 0f);
animator.start();

使用 ViewPropertyAnimator：

1
mView.animate().alpha(0f);

除此之外，还可以非常容易地将多个动画结合起来。比如：将控件移动到点 (50, 100) 且完全透明。

1
mView.animate().x(50).y(100).alpha(0f);

此类事专门针对 View 对象动画而操作的类：链式调用，自动 start， 简化流程，提高效率：

  • 提供了更简洁的链式调用设置多个属性动画，这些动画可以同时进行的。
  • 拥有更好的性能，多个属性动画是一次同时变化，只执行一次 UI 刷新（也就是只调用一次 invalidate，而 n 个 ObjectAnimator 就会进行 n 次属性变化，就有 n 次 invalidate）。
  • 每个属性提供两种类型方法设置。如：scaleX()、scaleXBy()。
  • 该类只能通过 View 的 animate() 获取其实例对象的引用。

4.2.2 常用函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
view.animate()                  // 获取ViewPropertyAnimator对象
        // 位移
        .translationX(100)
        .translationXBy(100)
        .translationY(100)
        .translationYBy(100)
        .translationZ(100)      // Z 轴移动，API 21 添加
        .translationZBy(100)    // API 21 添加
        // 改变坐标
        .x(100)
        .xBy(100)
        .y(100)
        .yBy(100)
        // 改变透明度
        .alpha(0.1f)
        .alphaBy(0.1f)
        // 改变透明度
        .scaleX(0.1f)
        .scaleXBy(0.1f)
        .scaleY(0.1f)
        .scaleYBy(0.1f)
        // 旋转
        .rotation(180)
        .rotationX(180)
        .rotationBy(180)
        .rotationY(180)
        .rotationYBy(180)
        // 持续时间
        .setDuration(1000)
        // 动画开始时执行 runnable，API 16 添加
        .withStartAction(new Runnable() {
            @Override
            public void run() {
            }
        })
        // 动画结束时执行 runnable，API 16 添加
        .withEndAction(new Runnable() {
            @Override
            public void run() {
            }
        })
        .withLayer()            // 硬件加速,API 16添加
        .setStartDelay(1000)    // 执行延迟
        // 设置插值器
        .setInterpolator(new LinearInterpolator())
        // 设置更新监听
        .setUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {}
        })
        // 动画监听
        .setListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {}
            @Override
            public void onAnimationEnd(Animator animation) {}
            @Override
            public void onAnimationCancel(Animator animation) {}
            @Override
            public void onAnimationRepeat(Animator animation) {}
        })
        .start();

举例说明一下 xxxX() 和 xxxXBy() 函数之间的区别。如 scaleY(2f) 和 scaleYBy(2f)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public class MainActivity extends AppCompatActivity {
    private TextView tv1, tv2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_main);
        Button startBtn = findViewById(R.id.start_btn);
        tv1 = findViewById(R.id.tv1);
        tv2 = findViewById(R.id.tv2);
        startBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tv1.animate().scaleX(2f);
                tv2.animate().scaleXBy(2f);
            }
        });
    }
}

原图：

第一次点击开始动画按钮，效果图如下所示：

第二次点击开始动画按钮，效果图如下所示：