动画第七步->KeyFrame关键帧

极客学院Animation教程讲解的很详细，点击进入哦

_{这里为学习的整理和补充O(∩_∩)O}

前言

控制动画速率的变化，自定义插值器或者 Evaluator ？可是，数学不好~~~_{(>_<)}~~_{肿么办？KeyFrame}

一、概念解析

1.关键帧：

一个关键帧必须包含两个原素，第一时间点，第二位置。即这个关键帧是表示的是某个物体在哪个时间点应该在哪个位置上

2.KeyFrame函数声明

public static Keyframe ofFloat(float fraction, float value) 

• fraction: 当前的显示进度，即加速器中getInterpolation()返回的进度值

• value：表示当前应该在的位置

3.KeyFrame的使用

• 第一步：生成Keyframe对象

//进度为0时，动画的位置为0
Keyframe keyframe0 = Keyframe.ofFloat(0, 0);
//进度为1时，动画的位置为-1000
Keyframe keyframe1 = Keyframe.ofFloat(1f, -1000);

• 第二步：利用PropertyValuesHolder.ofKeyframe()生成 PropertyValuesHolder 对象

PropertyValuesHolder translateX = PropertyValuesHolder.ofKeyframe("translationX", keyframe0, keyframe1);

-*第三步：利用ObjectAnimator.ofPropertyValuesHolder()生成对应的Animator

ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(view,  translateX);

二、小试牛刀

一起来实现这个效果吧！

简单仿写小红唇加入购物车效果

final View view = findViewById(R.id.view);
view.setOnClickListener(new View.OnClickListener() {    @Override
    public void onClick(View v) {
        //第一步
        Keyframe keyframe0 = Keyframe.ofFloat(0, 0);//①
        Keyframe keyframe1 = Keyframe.ofFloat(1f, -1000);//②
        //第二步
        PropertyValuesHolder translateX = PropertyValuesHolder.ofKeyframe("translationX", keyframe0, keyframe1);

        //第一步
        Keyframe[] keyframes = new Keyframe[11];        float fraction = 0;
        for (int i = 0; i < 11; i++) {
            keyframes[i] = Keyframe.ofFloat(fraction, (float) (-Math.sin(fraction * Math.PI) * 300));
            fraction = fraction + 0.1f;
        }
        //设置 该Keyframe 动作期间所对应的插值器
        keyframes[10].setInterpolator(new BounceInterpolator());
        //第二步
        PropertyValuesHolder translateY = PropertyValuesHolder.ofKeyframe("translationY", keyframes);
        //可以设置动画的 Evaluator
        translateY.setEvaluator(new FloatEvaluator());

        //第三步
        ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(view, translateY, translateX);
        animator.setDuration(2000);
        //没有设置插值器的keyframe，将会使用animator设置的
        animator.setInterpolator(new DecelerateInterpolator());
        animator.start();
    }
});

三、注意事项

1.关键帧最少要有两个，不然会崩溃
2.去掉0进度值的关键帧，动画开始就会以最近的关键帧的位置开始执行，将其作为第一帧。
例如：只将小试牛刀中①标注的代码改为

Keyframe keyframe0 = Keyframe.ofFloat(0.5f, -500);

则动画会从横坐标为-500的地方开始。

没有设置进度为0的关键帧时
3.去掉结束帧，将最后一帧为结束帧
例如：只将小试牛刀中②标注的代码改为

Keyframe keyframe1 = Keyframe.ofFloat(0.1f, -1000);

没有设置进度为1的关键帧时