Android View动画--基础篇

Android的动画模式:frame animation,tween animation和property animation,又叫Drawable Animation,View Animation和Property Animation,前两种是3.0以前版本支持的,属性动画是3.0以后支持的。
Animation(tween animation)和Animator(Property Animation)的区别:Animation只是view的绘制效果,但实际属性没有改变。而Animator改变的是view的属性。比如做位移动画,用Animation时view的实际位置没有改变,而Animator可以改变view的位置。
属性动画相比较补间动画重绘少很多,性能更加优秀,所以,在实现东花市有限考虑使用属性动画,这样不但能实现更多效果,性能也能大大提高。
本文简单介绍帧动画、补间动画,重点介绍属性动画。

帧动画

animation-list

在res/drawable目录下面创建文件:animation.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 
	根标签为animation-list,其中oneshot代表着是否只展示一遍,设置为false会不停的循环播放动画
	根标签下,通过item标签对动画中的每一个图片进行声明
	android:duration 表示展示所用的该图片的时间长度
 -->
<animation-list
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:oneshot="true"
  >
  	<item android:drawable="@drawable/icon1" android:duration="150"></item>
  	<item android:drawable="@drawable/icon2" android:duration="150"></item>
  	<item android:drawable="@drawable/icon3" android:duration="150"></item>
  	<item android:drawable="@drawable/icon4" android:duration="150"></item>
  	<item android:drawable="@drawable/icon5" android:duration="150"></item>
  	<item android:drawable="@drawable/icon6" android:duration="150"></item>
</animation-list>
imageView.setImageResource(R.drawable.animation);  
AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();  
animationDrawable.start();  

animated-selector

#1.Animation
用Animation可以实现AlphaAnimation,ScaleAnimation,TranslateAnimation,RotateAnimation。
比如:

        float fromY = 0f;
        float toY = 100f;
        anim = new TranslateAnimation(0.0f, 0.0f, fromY, toY);
        anim.setInterpolator(new LinearInterpolator());
        anim.setDuration(3000);
        anim.setStartOffset(700);
        anim.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {

            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        view.startAnimation(anim);

TypeEvaluator

TypeEvaluator提供了一个接口,开发者可以通过实现该接口自定义Evaluator。
目前系统提供的Evaluator有以下几种:
ArgbEvaluator,FloatArrayEvaluator,FloatEvaluator,IntArrayEvaluator,IntEvaluator,RectEvaluator,PointFEvaluator等,
看ArgbEvaluator的实现,我们发现只需要根据我们定义的属性简单的实现evaluate方法就可以了。这样我们就可以定义自己的XXEvaluator了。
根据动画执行的时间跟应用的Interplator,会计算出一个0~1之间的因子,即evalute函数中的fraction参数。

public class ArgbEvaluator implements TypeEvaluator {
    private static final ArgbEvaluator sInstance = new ArgbEvaluator();

    public static ArgbEvaluator getInstance() {
        return sInstance;
    }

    public Object evaluate(float fraction, Object startValue, Object endValue) {
        int startInt = (Integer) startValue;
        int startA = (startInt >> 24) & 0xff;
        int startR = (startInt >> 16) & 0xff;
        int startG = (startInt >> 8) & 0xff;
        int startB = startInt & 0xff;

        int endInt = (Integer) endValue;
        int endA = (endInt >> 24) & 0xff;
        int endR = (endInt >> 16) & 0xff;
        int endG = (endInt >> 8) & 0xff;
        int endB = endInt & 0xff;

        return (int)((startA + (int)(fraction * (endA - startA))) << 24) |
                (int)((startR + (int)(fraction * (endR - startR))) << 16) |
                (int)((startG + (int)(fraction * (endG - startG))) << 8) |
                (int)((startB + (int)(fraction * (endB - startB))));
    }
}

例子:

        ValueAnimator backgroundColor = ValueAnimator.ofObject(new ArgbEvaluator(),
                0xffffffff, 0xff000000);
        backgroundColor.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {

            }
            @Override
            public void onAnimationEnd(Animator animation) {

            }
        });
        backgroundColor.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int color = (int) animation.getAnimatedValue();
                mView.setBackgroundColor(color);
            }
        });
        backgroundColor.setInterpolator(new LinearInterpolator());
        backgroundColor.setDuration(500);
        backgroundColor.start();

View的animate()方法

我们也可以直接使用View的API animate()来做动画,而且还可以几个动画同时做哦!
下面的例子就实现了一个View的X位移、透明度、缩放的动画

        view.animate().translationX(animTranslationXPx)
                .alpha(0.5f)
                .setStartDelay(0)
                .scaleX(0.8f)
                .scaleY(0.8f)
                .setUpdateListener(null)
                .setInterpolator(new AccelerateDecelerateInterpolator())
                .setDuration(1000)
                .withEndAction(new Runnable() {
                    @Override
                    public void run() {

                    }
                })
                .start();

ValueAnimator

ValueAnimator就是一个数值产生器,他本身不作用于任何一个对象,但是可以对产生的值进行动画处理。
为了实现动画效果,必须为ValueAnimator注册一个监听器ValueAnimator.AnimatorUpdateListener,该监听器负责更新对象的属性值。在实现这个监听器的时候,可以通过getAnimatedValue()的方法来获取当前帧的值。
下面例子用ValueAnimator来实现了一个缩放和位移动画:

        final Rect fromRect = ......
        final Rect toRect = ......

        final float originScaleX = 1.0f;//(float)fromRect.width() / toRect.width();
        final float originScaleY = 1.0f;//(float)fromRect.height() / toRect.height();

        ValueAnimator trans = ValueAnimator.ofFloat(0, 1);
        trans.setInterpolator(new LinearInterpolator());
        trans.setDuration(600);
        trans.addListener(new AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) { }
            @Override
            public void onAnimationRepeat(Animator animation) { }
            @Override
            public void onAnimationEnd(Animator animation) {

            }
            @Override
            public void onAnimationCancel(Animator animation) {

            }
        });
        trans.addUpdateListener(new AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float percent = (Float)animation.getAnimatedValue();

                float toX = (fromRect.left + percent * (toRect.left - fromRect.left));
                float toY = (fromRect.top + percent * (toRect.top - fromRect.top));
                float toR = (fromRect.right + percent * (toRect.right - fromRect.right));
                float toB = (fromRect.bottom + percent * (toRect.bottom - fromRect.bottom));
                float scaleX = (float)(toR - toX) / fromRect.width();
                float scaleY = (float)(toB - toY) / fromRect.height();
                view.setTranslationX(toX-view.getLeft());
                view.setTranslationY(toY-view.getTop());
                view.setScaleX(scaleX*originScaleX);
                view.setScaleY(scaleY*originScaleY);
                float alpha = 0 + percent * 1 / (0.8f - 0);
        ......
            }
        });
        trans.start();

ObjectAnimator

ObjectAnimator继承自ValueAnimator,它会自动更新我们定义的属性值,来实现动画的目的。
下面的例子是用ObjectAnimator来实现X轴位移的动画:

        ObjectAnimator anim = ObjectAnimator.ofFloat(v,View.TRANSLATION_X, newPos);
        anim.setInterpolator(new LinearInterpolator());
        anim.setDuration(500);
        anim.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {

            }
        });
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {

            }
        });
        anim.start();

AnimatorSet

AnimatorSet用于实现多个动画的协同作用,AnimatorSet中有一系列的顺序控制方法:playTogether、playSequentially、animSet.play().with()、defore()、after()等。用来实现多个动画的协同工作方式。
下面的例子用AnimatorSet实现了缩放和位移动画:

        ObjectAnimator trans = ObjectAnimator.ofFloat(view,View.TRANSLATION_X, newPos);
        ObjectAnimator scalex = ObjectAnimator.ofFloat(view, View.SCALE_X, 1.0f, 0.8f);
        ObjectAnimator scaley = ObjectAnimator.ofFloat(view, View.SCALE_Y, 1.0f, 0.8f);
        AnimatorSet animSet = new AnimatorSet();
        animSet.playTogether(scalex, scaley, trans);
        animSet.setDuration(duration);
        animSet.setInterpolator(new LinearInterpolator());
        animSet.addListener(new AnimatorListener() {

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationEnd(Animator animation) {
            	// do end;
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
            }

            @Override
            public void onAnimationStart(Animator animation) {
            }

        });
        animSet.start();

关于时间的设置问题:
如果AnimatorSet设置了setDuration,那么不管子动画有没有设置时间,都要AnimatorSet的时间为准,如果AnimatorSet没有设置,那么子动画以各自的时间为准。当所有动画完成后调用onAnimationEnd。
#7.使用xml来创建动画

animation

        final Animation ani = AnimationUtils.loadAnimation(this, R.anim.test);
        ani.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }
            @Override
            public void onAnimationEnd(Animation animation) {
            }
            @Override
            public void onAnimationRepeat(Animation animation) {
            }
        });
        mView.startAnimation(ani);
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXScale="1.0" android:toXScale="0.2"
    android:fromYScale="1.0" android:toYScale="1.0"
    />

当然也可以用下面的方式做。

objectAnimator

        Animator ani= AnimatorInflater.loadAnimator(this, R.anim.test);
        ani.setTarget(mView);
        ani.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
            }
        });
        ani.start();

test.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:propertyName="scaleX"
    android:valueFrom="1.0"
    android:valueTo="0.2"
    android:valueType="floatType" >
</objectAnimator>

注意两个R.anim.test不要用错,否则会报错。
通过这个动画也可以看出一般动画和属性动画的区别:
animation做完动画后属性会恢复原样,也就是说它改变的是View的绘制效果,真正的View的属性并没有改变,animator做完动画后保持动画完成时的属性不变,说明它把View的属性改变了。

set

R.anim.test

<set xmlns:android="http://schemas.android.com/apk/res/android"
        android:shareInterpolator="false"
        android:zAdjustment="top">
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0"
            android:interpolator="@interpolator/test_alpha"
            android:fillEnabled="true"
            android:fillBefore="false" android:fillAfter="true"
            android:duration="336"/>
    <translate android:fromYDelta="15%" android:toYDelta="0"
            android:fillEnabled="true" android:fillBefore="true" android:fillAfter="true"
            android:interpolator="@interpolator/test_translate"
            android:duration="336"/>
    <scale android:fromXScale="0.94" android:toXScale="1.0"
            android:fromYScale="0.94" android:toYScale="1.0"
            android:interpolator="@interpolator/test_scale"
            android:duration="336"
            android:pivotX="50%"
            android:pivotY="50%"/>
</set>

R.interpolator.test_alpha

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:controlX1="0.1"
    android:controlY1="0" android:controlX2="0" android:controlY2="1" />

Java

		final Animation ani = AnimationUtils.loadAnimation(mActivity, R.anim.test);
        ani.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }
            @Override
            public void onAnimationEnd(Animation animation) {

            }
            @Override
            public void onAnimationRepeat(Animation animation) {
            }
        });		
        imageView.startAnimation(ani);

Animator set

当然也可以用下面的方式实现:
test_animator.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="together"
    android:shareInterpolator="false"
    android:zAdjustment="top">
    <objectAnimator
        android:propertyName="alpha"
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:valueType="floatType"
        android:interpolator="@interpolator/test_alpha"
        android:duration="336"
        />
    <objectAnimator
        android:propertyName="translationY"
        android:valueFrom="@dimen/translation_y"
        android:valueTo="0"
        android:valueType="floatType"
        android:interpolator="@interpolator/test_alpha"
        android:duration="336"
        />
    <set android:ordering="together">
        <objectAnimator
            android:propertyName="scaleX"
            android:valueFrom="0.94"
            android:valueTo="1.0"
            android:valueType="floatType"
            android:interpolator="@interpolator/test_scale"
            android:duration="336"
            />
        <objectAnimator
            android:propertyName="scaleY"
            android:valueFrom="0.94"
            android:valueTo="1.0"
            android:valueType="floatType"
            android:interpolator="@interpolator/test_scale"
            android:duration="336"
            />
    </set>
</set>

Java

        Animator animator = AnimatorInflater.loadAnimator(mActivity, R.animator.test_animator);
        animator.setTarget(view);
        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                end.run();
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                end.run();
            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        animator.start();

#8.自定义ObjectAnimator属性

自定义propertyName

通常情况下我们使用ObjectAnimator来实现动画效果,可以用下面的方法:

ObjectAnimator anim = ObjectAnimator.ofFloat(view, "alpha", 0f, 1f);
anim.setDuration(1000);
anim.start();

因为在View中已经实现了alpha属性的动画,那么如果在View中没有实现的属性我们如何使用ObjectAnimator来做动画呢?
我们可以用下面的方法:

ObjectAnimator anim = ObjectAnimator.ofFloat(myTextView, "test", 0f, 1f);
anim.setDuration(1000);
anim.start();

test就代表了View的一个属性,只需要一个类继承View并实现

public void setTest(float set){
    //to do something
}

如果用下面这样只为该属性设置一个属性值,那么还要实现getter的方法:

ObjectAnimator anim = ObjectAnimator.ofFloat(view, "testt",  1f);
anim.setDuration(1000);
anim.start();

public void setTestt(float set){
    mTestt = set;
}

public float getTestt(){
    return mTestt;
}

当然如果view中没有该属性的动画,那么还可以用ValueAnimator来实现,只不过要ValueAnimator.AnimatorUpdateListener接口,自己更新相应的属性值

自定义Property

   private static Property<View, Integer> LEFT = new IntProperty<View>("left") {
        @Override
        public void setValue(View object, int value) {
            object.setLeft(value);
        }

        @Override
        public Integer get(View object) {
            return object.getLeft();
        }
    };

    private static Property<View, Integer> TOP = new IntProperty<View>("top") {
        @Override
        public void setValue(View object, int value) {
            object.setTop(value);
        }

        @Override
        public Integer get(View object) {
            return object.getTop();
        }
    };

    private static Property<View, Integer> RIGHT = new IntProperty<View>("right") {
        @Override
        public void setValue(View object, int value) {
            object.setRight(value);
        }

        @Override
        public Integer get(View object) {
            return object.getRight();
        }
    };

    private static Property<View, Integer> BOTTOM = new IntProperty<View>("bottom") {
        @Override
        public void setValue(View object, int value) {
            object.setBottom(value);
        }

        @Override
        public Integer get(View object) {
            return object.getBottom();
        }
    };

    private static Animator animateBounds(View v, Rect bounds) {
        final PropertyValuesHolder left = PropertyValuesHolder.ofInt(LEFT, bounds.left);
        final PropertyValuesHolder top = PropertyValuesHolder.ofInt(TOP, bounds.top);
        final PropertyValuesHolder right = PropertyValuesHolder.ofInt(RIGHT, bounds.right);
        final PropertyValuesHolder bottom = PropertyValuesHolder.ofInt(BOTTOM, bounds.bottom);
        return ObjectAnimator.ofPropertyValuesHolder(v, left, top, right, bottom);
    }

propertyValuesHolder

多动画效果的另一种实现方法

	PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("alpha", 1f, 0f, 1f);
	PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("scaleX", 1f, 0f, 1f);
	PropertyValuesHolder pvhZ = PropertyValuesHolder.ofFloat("scaleY", 1f, 0f, 1f);
	ObjectAnimator.ofPropertyValuesHolder(view, pvhX, pvhY, pvhZ)
		.setDuration(1000)
		.start();

Keyframe

PropertyValuesHolder的工厂方法里面,除了整形ofInt()、浮点型ofFloat()、Object类型ofObject()之外,还有一种:ofKeyframe()。
Keyframe类型对象由一个time/value对组成,定义了指定时间点的指定值,即关键帧。
每一个keyframe还可以拥有自己的interpolator,控制了前一个关键帧到这一个关键帧之间的时间动画行为。
Keyframe 对象的构造也用是工厂方法:ofInt(), ofFloat(), or ofObject()。
Keyframe对象构造完之后就可以用 ofKeyframe()工厂方法来构造PropertyValuesHolder对象。

        Keyframe kf0 = Keyframe.ofFloat(0, 1.0f);
        Keyframe kf1 = Keyframe.ofFloat(0.25f, 0.5f);
        Keyframe kf2 = Keyframe.ofFloat(0.5f, 0f);
        Keyframe kf4 = Keyframe.ofFloat(0.75f, 0.5f);
        Keyframe kf3 = Keyframe.ofFloat(1f, 1.0f);
        PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe("alpha", kf0, kf1, kf2, kf4, kf3);
        ObjectAnimator anim = ObjectAnimator.ofPropertyValuesHolder(mView, pvhRotation);
        anim.setDuration(2000);
        anim.start();

上述代码的意思为:设置btn对象的width属性值使其:
开始时 alpha=1.0
动画开始1/4时 alpha=0.5
动画开始1/2时 alpha=0
动画开始3/4时 alpha=0.5
动画结束时 alpha=1.0
用下面的代码可以实现同样的效果(上述代码时间值是线性,变化均匀):

        ObjectAnimator oa=ObjectAnimator.ofFloat(mView, "alpha", 1.0f, 0.5f, 0f, 0.5f, 1.0f);
        oa.setDuration(2000);
        oa.start();

Interpolator

贝塞尔曲线

一个查看三阶贝塞尔曲线效果的网站
http://cubic-bezier.com/#.45,0,.21,1

PathInterpolator

PathInterpolator是android5.0才开始提供的一种时间时间插值器,和LinearInterpolator,AccelerateDecelerateInterpolator一样用来设置给animator或者animation的,PathInterpolator需要一段起点是(0,0),终点是(1,1)的path路径。
看它的几个构造函数:
public PathInterpolator(Path path) :自定义的Path,但是要保证起点是(0,0),终点是(1,1)。
public PathInterpolator(float controlX, float controlY):二阶的贝塞尔曲线,controlX和controlY是控制点的坐标
public PathInterpolator(float controlX1, float controlY1, float controlX2, float controlY2)三阶的贝塞尔曲线,(controlX1,controlY1)和(controlX2,controlY2)是两个控制点的坐标。
还可以通过xml方式定义PathInterpolator:

......
ValueAnimator trans = ValueAnimator.ofFloat(0, 1);
trans.setInterpolator(enterInterpolator);
......
public Interpolator enterInterpolator;
enterInterpolator= AnimationUtils.loadInterpolator(context,R.interpolator.enter);

enter.xml

<?xml version="1.0" encoding="utf-8"?>

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:controlX1="0.45"
    android:controlY1="0" android:controlX2="0.34" android:controlY2="1" />

用android:pathData来描述一个path

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:pathData="L0.3,0 C 0.5,0 0.7,1 1, 1" />

二阶贝塞尔曲线

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.3"
    android:controlY1="0"/>

加减速引子

<decelerateInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:factor="2.5" />

android:factor 浮点值,加减速速率,默认为1

其他的动画常用知识:

ValueAnimator.reverse()

反向进行当前的ValueAnimator动画,可以进行取消动画时的动画,当动画已经开始运行时,调用reverse(),那么当前动画会停止,并从当前动画的点反向进行已经做过的动画。如果动画还没有开始,那么他会从最后开始向前做动画。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

寒江蓑笠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值