Android UI——Material Design——属性动
2019-03-22 本文已影响1人
So_ProbuING
属性动画
什么是属性动画
属性动画是从3.0及以后出现的，可以不断的控制控件的属性变化达到动画的效果，一般我们是一些组合的属性动画达到复杂效果。
在以前的动画都是使用：补间动画BetweenAnimation、帧动画FrameAnimation
与之前的View动画相比，属性动画更加丰富、好用；属性动画是真实地改变控件的属性，而不像view动画是一个假象，控件的属性并没有发生变化。而属性动画是真实的改变控件的属性
属性动画可以操作的控件的属性
- translationX translationY：这两个属性控制了View所处的位置，它们的值是由layout容器设置的，是相对于坐标原点(左上角0，0)的一个偏移量
- rotation:控制View绕着轴点旋转
- scaleX scaleY:控制View基于pivotX和pivotY的缩放
- alpha:控制透明度 1是完全不透明 0是完全透明
属性动画的创建与使用
ObjectAnimator 对象动画 指定动画执行方式 最后一个可变参数代表动画执行的值
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view, "translationX", 0f, 100f, 200f, 300f);
objectAnimator.setDuration(500);
objectAnimator.start();
多个属性动画一起执行方法
//2.----------------多个动画同时执行---办法1：设置动画监听，开始第一个动画同时开启其他动画-----------------
//方法1：
ObjectAnimator animator = ObjectAnimator.ofFloat(v, "haha", 0f, 100f);//没有这个属性的时候，就是valueanimator
animator.setDuration(300);
//设置动画监听
animator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//动画在执行的过程当中，不断地调用此方法
animation.getAnimatedFraction()//百分比
//得到duration时间内 values当中的某一个中间值。0f~100f
float value = (float) animation.getAnimatedValue();//
iv.setScaleX(0.5f+value/200);//0.5~1
iv.setScaleY(0.5f+value/200);//0.5~1
}
});
animator.start();
animator.addListener(new AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationRepeat(Animator animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animator animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationCancel(Animator animation) {
// TODO Auto-generated method stub
}
});
//2)方法2：用ValueAnimator
ValueAnimator animator = ValueAnimator.ofFloat(0f,200f);
animator.setDuration(200);
animator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//动画在执行的过程当中，不断地调用此方法
animation.getAnimatedFraction()//百分比
//得到duration时间内 values当中的某一个中间值。0f~100f
float value = (float) animation.getAnimatedValue();//
iv.setScaleX(0.5f+value/200);//0.5~1
iv.setScaleY(0.5f+value/200);//0.5~1
}
});
animator.start();
//3）方法3
//float... values:代表关键帧的值
PropertyValuesHolder holder1 = PropertyValuesHolder.ofFloat("alpha", 1f,0.7f,1f);
PropertyValuesHolder holder2 = PropertyValuesHolder.ofFloat("scaleX", 1f,0.7f,1f);
PropertyValuesHolder holder3 = PropertyValuesHolder.ofFloat("scaleY", 1f,0.7f,1f);
PropertyValuesHolder holder3 = PropertyValuesHolder.ofFloat("translationX", 0f,300f);
ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(iv, holder1,holder2,holder3);
animator.setDuration(1000);
animator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
// TODO Auto-generated method stub
float animatedValue = (float) animation.getAnimatedValue();
float animatedFraction = animation.getAnimatedFraction();
long playTime = animation.getCurrentPlayTime();
System.out.println("animatedValue:"+animatedValue+", playTime:"+playTime);
}
});
animator.start();
//4)方法4：-----------------动画集合--------------------
ObjectAnimator animator1 = ObjectAnimator.ofFloat(iv,"alpha", 1f,0.7f,1f);
ObjectAnimator animator2 = ObjectAnimator.ofFloat(iv,"scaleX", 1f,0.7f,1f);
ObjectAnimator animator3 = ObjectAnimator.ofFloat(iv,"scaleY", 1f,0.7f,1f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(500);
animatorSet.play(anim);//执行当个动画
animatorSet.playTogether(animator1,animator2,animator3);//同时执行
animatorSet.playSequentially(animator1,animator2,animator3);//依次执行动画
animatorSet.start();
依托TypeEvaluator 实现抛物线效果
/**
* x:匀速
* y:加速度 y=1/2*g*t*t
* 使用估值器最好实现。
*/
ValueAnimator valueAnimator = new ValueAnimator();
valueAnimator.setDuration(4000);
valueAnimator.setFloatValues(values)
valueAnimator.setObjectValues(new PointF(0, 0));
//估值器---定义计算规则
valueAnimator.setEvaluator(new TypeEvaluator<PointF>() {
@Override
public PointF evaluate(float fraction, PointF startValue,
PointF endValue) {
//拿到每一个时间点的坐标
//x=v*t (s秒)
PointF pointF = new PointF();
pointF.x = 100f*(fraction*4);//初始速度*(执行的百分比*4)
pointF.y = 0.5f*9.8f*(fraction*4)*(fraction*4);
pointF.y = 0.5f*150f*(fraction*4)*(fraction*4);
return pointF;
}
});
valueAnimator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//得到此时间点的坐标
PointF pointF = (PointF) animation.getAnimatedValue();
iv.setX(pointF.x);
iv.setY(pointF.y);
}
});
valueAnimator.start();
ObjectAnimator oa = ObjectAnimator.ofFloat(v, "translationY", 0f,1100f);
oa.setDuration(500);
//设置加速器---
oa.setInterpolator(new AccelerateInterpolator(5));
oa.setInterpolator(new AccelerateDecelerateInterpolator());
oa.setInterpolator(new AnticipateInterpolator(8));
oa.setInterpolator(new OvershootInterpolator());
oa.setInterpolator(new CycleInterpolator(4));
oa.setInterpolator(new BounceInterpolator());
oa.start();
}
