极客学院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的地方开始。
3.去掉结束帧,将最后一帧为结束帧
例如:只将小试牛刀中②标注的代码改为
Keyframe keyframe1 = Keyframe.ofFloat(0.1f, -1000);