前言
属性动画,API3.0之后提出的动画模式,那么相对于3.0之前的动画有什么优势呢?有以下几点优势:1.不在局限于View对象,无对象也可以进行动画处理。2.不再局限于4种基本变换:平移、旋转、缩放 、透明度。3.可以灵活的操作任意对象属性,根据自己业务来实现自己想要的结果。接下来我们就从ObjectAnimator,ValueAnimator ,PropertyValueHolder,TypeEvaluator,AnimatorSet,Interpolator一一举例说明。
ObjectAnimator | 对象动画 |
ValueAnimator | 值动画 |
PropertyValueHolder | 用于多个动画同时执行 |
TypeEvaluator | 估值器 |
AnimatorSet | 动画集合 |
Interpolator | 插值器 |
效果图:
ObjectAnimator:
ObjectAnimator alphaAnim = ObjectAnimator.ofFloat(imageView, "alpha", 1.0f, 0.3f);
alphaAnim.setDuration(3000);//执行时间
alphaAnim.setStartDelay(300);
alphaAnim.start(); |
如上代码:ObjectAnimator 操作对象属性,完成透明变化,执行结果,如下图所示:
AnimatorSet,TranslateAnimation,RotateAnimation
实现效果如下图所示:
如上图实现效果思路:利用animation原生的加速器即可实现,上下坐标移动,且绕自身旋转,这里我们用AnimationSet集合把RotateAnimation和TranslateAnimation同时应用,并且在TranslatAnimtion的结束的时候更换view的图片,达到砸中文字的时候图片立刻更换的效果,图片要放在一个固定的数组里面,实现方法如下:
1.声明变量
private final int[] mResDrawable = {R.mipmap.p1, R.mipmap.p3, R.mipmap.p5, R.mipmap.p7}; /** * 当前图片的下标 */ private int mIndex; private boolean mSkip = true; private final int MAX_HEIGHT = 300; private final int DURATION = 600; RotateAnimation rotateAnimation; TranslateAnimation translateAnimation, backAnimation; AnimationSet animationSet2, animationSet; private Context mContext; private ImageView mImageView; |
2.初始化加载布局并设置参数
void init(Context context) { View view = LayoutInflater.from(context).inflate(R.layout.view_fruit_loading,this); this.mContext = context; mImageView = (ImageView) view.findViewById(R.id.view_fruit_image); mImageView.setImageResource(mResDrawable[1]); curveHeadLoadingView = (CurveHeadLoadingView) view.findViewById(R.id.curheadloadingview); LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams. WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); layoutParams.setMargins(0,MAX_HEIGHT,0,0); curveHeadLoadingView.setLayoutParams(layoutParams); } |
3.加载动画
void loadAnim() { translateAnimation = new TranslateAnimation(0, 0, 0, MAX_HEIGHT); translateAnimation.setDuration(DURATION); translateAnimation.setFillAfter(true); backAnimation = new TranslateAnimation(0, 0, MAX_HEIGHT, 0); backAnimation.setDuration(DURATION); backAnimation.setFillAfter(true); rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); rotateAnimation.setRepeatCount(0); rotateAnimation.setDuration(DURATION); animationSet = new AnimationSet(true); animationSet.addAnimation(rotateAnimation); animationSet.addAnimation(translateAnimation); animationSet2 = new AnimationSet(true); animationSet2.addAnimation(rotateAnimation); animationSet2.addAnimation(backAnimation); translateAnimation.setAnimationListener(animationListener); backAnimation.setAnimationListener(animationListener); mImageView.setAnimation(animationSet); animationSet2.setInterpolator(mContext, android.R.anim.decelerate_interpolator); animationSet.setInterpolator(mContext, android.R.anim.accelerate_interpolator); animationSet.start(); } |
4.动画监听切换动画
Animation.AnimationListener animationListener = new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
if (animation == translateAnimation) {
curveHeadLoadingView.startAnim();
changeIcon();
mImageView.setAnimation(animationSet2);
animationSet2.start();
} else {
mImageView.setAnimation(animationSet);
animationSet.start();
}
}
|
更换图片:
public void changeIcon() { mImageView.clearAnimation(); if (mSkip) { mIndex = 2; mSkip = false; } else { mIndex = (mIndex == mResDrawable.length - 1) ? 0 : mIndex + 1; } mImageView.setImageResource(mResDrawable[mIndex]); } |
具体代码查看https://github.com/yangxiansheng123/AndroidRxJava
ObjectAnimator,PropertyValueHolder
实现效果:
ObjectAnimator animator1 = ObjectAnimator.ofFloat(imageView, "translationX", 0f, 500F);
ObjectAnimator animator2 = ObjectAnimator.ofFloat(imageView, "alpha", 0f, 1f);
ObjectAnimator animator3 = ObjectAnimator.ofFloat(imageView, "scaleX", 0f, 2f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(500);
//animatorSet.play(animator3).with(animator2).after(animator1);//链式调用顺序
//animatorSet.playTogether(animator1,animator2,animator3);//一起执行
//顺序执行
animatorSet.playSequentially(animator1, animator2, animator3);
animatorSet.start(); ———————————————————————————————————————————————————————————— PropertyValuesHolder holder1 = PropertyValuesHolder.ofFloat("alpha", 1f, 0.5f);
PropertyValuesHolder holder2 = PropertyValuesHolder.ofFloat("scaleX", 1f, 0.5f);
PropertyValuesHolder holder3 = PropertyValuesHolder.ofFloat("scaleY", 1f, 0.5f);
ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(v, holder1, holder2, holder3);
animator.setDuration(200);
animator.start(); |
Interpolator
实现效果:从顶端向下坠落。
ValueAnimator animator = new ValueAnimator();
animator.setDuration(5000);
animator.setObjectValues(new PointF(0, 0));
final PointF point = new PointF();
//估值
animator.setEvaluator(new TypeEvaluator() {
@Override
public Object evaluate(float fraction, Object startValue, Object endValue) {
point.x = 100f * (fraction * 5);
// 重力计算
point.y = 0.5f * 98f * (fraction * 5) * (fraction * 5);
return point;
}
});
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
imageView.setX(point.x);
imageView.setY(point.y);
}
});
animator.start(); |
// 加速插值器,公式: y=t^(2f) (加速度参数. f越大,起始速度越慢,但是速度越来越快) animator.setInterpolator(new AccelerateInterpolator(10)); // 减速插值器公式: y=1-(1-t)^(2f) (描述: 加速度参数. f越大,起始速度越快,但是速度越来越慢) animator.setInterpolator(new DecelerateInterpolator()); // 先加速后减速插值器 y=cos((t+1)π)/2+0.5 animator.setInterpolator(new AccelerateDecelerateInterpolator()); // 张力值, 默认为2,T越大,初始的偏移越大,而且速度越快 公式:y=(T+1)×t3–T×t2 animator.setInterpolator(new AnticipateInterpolator()); // 张力值tension,默认为2,张力越大,起始和结束时的偏移越大, // 而且速度越快;额外张力值extraTension,默认为1.5。公式中T的值为tension*extraTension animator.setInterpolator(new AnticipateOvershootInterpolator()); // 弹跳插值器 animator.setInterpolator(new BounceInterpolator()); // 周期插值器 y=sin(2π×C×t) 周期值,默认为1;2表示动画会执行两次 animator.setInterpolator(new CycleInterpolator(2)); // 线性插值器,匀速公式:Y=T animator.setInterpolator(new LinearInterpolator()); // 公式: y=(T+1)x(t1)3+T×(t1)2 +1 // 描述: 张力值,默认为2,T越大,结束时的偏移越大,而且速度越快 animator.setInterpolator(new OvershootInterpolator());