自定义View-属性动画Property Animation进阶篇

前言

总结一下稍稍复杂的属性动画吧

TypeEvaluator

当我们需要用其他类型来做属性动画的时候，就需要用到TypeEvaluator

ArgbEvaluator

// 使用方法
ObjectAnimator animator = ObjectAnimator.ofInt(view, "color", 0xffff0000, 0xff00ff00);  
animator.setEvaluator(new ArgbEvaluator()); 
animator.start();  


// Android 5.0加入新方法
ObjectAnimator animator = ObjectAnimator.ofArgb(view, "color", 0xffff0000, 0xff00ff00);  
animator.start(); 

自定义Evaluator

// 新建一个class继承TypeEvaluator
// 重写evaluate()方法

ofObject()

// 为目标属性写一个自定义的TypeEvaluator
// 使用ofObject()来创建Animator, 将TypeEvaluator作为参数传入

ofMultiInt()和ofMultiFloat()

// 不多介绍了

PropertyValuesHolder

// 同一个动画同时改变多个属性，比如我同时平移方法旋转，那么就得使用PropertyValuesHolder
PropertyValuesHolder holder1 = PropertyValuesHolder.ofFloat("scaleX", 1);  
PropertyValuesHolder holder2 = PropertyValuesHolder.ofFloat("scaleY", 1);  
PropertyValuesHolder holder3 = PropertyValuesHolder.ofFloat("alpha", 1);

ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(view, holder1, holder2, holder3)  
animator.start(); 

AnimatorSet

AnimatorSet animatorSet = new AnimatorSet();  

// 两个动画依次执行
animatorSet.playSequentially(animator1, animator2);  
animatorSet.start();  

// 两个动画同时执行
animatorSet.playTogether(animator1, animator2);  
animatorSet.start();  

// 精确配置顺序
animatorSet.play(animator1).with(animator2);  
animatorSet.play(animator1).before(animator2);  
animatorSet.play(animator1).after(animator2);  
animatorSet.start(); 

PropertyValuesHolders.ofKeyframe()

// 把同一个属性拆分，比如进度增加到100%后再反弹回来

// 在 0% 处开始
Keyframe keyframe1 = Keyframe.ofFloat(0, 0);  
// 时间经过 50% 的时候，动画完成度 100%
Keyframe keyframe2 = Keyframe.ofFloat(0.5f, 100);  
// 时间见过 100% 的时候，动画完成度倒退到 80%，即反弹 20%
Keyframe keyframe3 = Keyframe.ofFloat(1, 80);  
PropertyValuesHolder holder = PropertyValuesHolder.ofKeyframe("progress", keyframe1, keyframe2, keyframe3);

ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(view, holder);  
animator.start();  

ValueAnimator最基本的轮子

// 很多时候用不到它，只是在使用一些第三方控件的时候，你想要做动画的属性没有setter/getter方法的时候，会需要用到他

// ViewPropertyAnimator、ObjectAnimator、ValueAnimator
// 依次更加难用，也更加灵活

总结

1、这节的重点就是学会Evaluator以及如何去自定义Evaluator

2、 其次要懂得如何时使用PropertyValuesHolder、AnimatorSet、PropertyValuesHolders.ofKeyframe()

贴个henCoder的链接：自定义View-属性动画（进阶篇）

分割线-------------------------------------------------------------------------------------

实践

// 1 颜色渐变，由红色变为绿色，并通过设置ArgbEvaluator来修复闪烁问题
    ObjectAnimator animator = ObjectAnimator.ofInt(view, "color", 0xffff0000, 0xff00ff00);
    animator.setEvaluator(new ArgbEvaluator());
    animator.setInterpolator(new LinearInterpolator());
    animator.setDuration(2000);
    animator.start();



// 2 颜色渐变, 让颜色按照HSV来变化
    public class HsvEvaluator implements TypeEvaluator<Integer> {
        public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
            
            // 根据动画完成度计算所对应的的颜色值
            return xx;
        }
    }



// 3 ofObject()的使用：一个圆球从左上角运动到右下角
    ObjectAnimator animator = ObjectAnimator.ofObject(view, "position",
                        new PointFEvaluator(), new PointF(0, 0), new PointF(1, 1));
    animator.setInterpolator(new LinearInterpolator());
    animator.setDuration(1000);
    animator.start();
    

    // 自定义Evaluator
    private class PointFEvaluator implements TypeEvaluator<PointF> {

        PointF pointF = new PointF();

        // 重写 evaluate() 方法，让 PointF 可以作为属性来做动画
        @Override
        public PointF evaluate(float fraction, PointF startValue, PointF endValue) {
            float x = startValue.x + (fraction * (endValue.x - startValue.x));
            float y = startValue.y + (fraction * (endValue.y - startValue.y));
            pointF.set(x, y);
            return pointF;
        }
    }



// 4 播放按钮慢慢出现慢慢变大, 改变透明度，改变Scale
    PropertyValuesHolder holder1 = PropertyValuesHolder.ofFloat("scaleX", 0, 1);
    PropertyValuesHolder holder2 = PropertyValuesHolder.ofFloat("scaleY", 0, 1);
    PropertyValuesHolder holder3 = PropertyValuesHolder.ofFloat("alpha", 0, 1);

    ObjectAnimator.ofPropertyValuesHolder(view, holder1, holder2, holder3).start();



// 5 先后移一段距离透明度由0变为1，然后往前移动的同时旋转三圈
    view.setTranslationX(-200f);
    ObjectAnimator animator1 = ObjectAnimator.ofFloat(view, "alpha", 0, 1);
    ObjectAnimator animator2 = ObjectAnimator.ofFloat(view, "translationX", -200, 200);
    ObjectAnimator animator3 = ObjectAnimator.ofFloat(view, "rotation", 0, 1080);
    animator3.setDuration(1000);
    AnimatorSet animatorSet = new AnimatorSet();           
    animatorSet.play(animator1).before(animator2);
    animatorSet.playTogether(animator2, animator3);
    animatorSet.start();
    


// 6 进度条从0到100，然后又回弹到80
    Keyframe keyframe1 = Keyframe.ofFloat(0, 1);
    Keyframe keyframe2 = Keyframe.ofFloat(0.5f, 100);
    Keyframe keyframe3 = Keyframe.ofFloat(1, 80);
    PropertyValuesHolder holder = PropertyValuesHolder
                        .ofKeyframe("progress", keyframe1, keyframe2, keyframe3);
    ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(view, holder);
    animator.setDuration(3000);
    animator.start();