安卓动画系列之五, 属性动画PropertyAnimation(下) - 通过官方例子深入了解

这里继续之前写的上篇属性动画PropertyAnimation(上)之初步印象 来写下篇,了解一下自定义的对象如何调用实现属性动画,还有AnimatorSet的一些灵活用法.本来也尝试像之前那样写demo去讲,但发现android官方在这方面已经提供了非常好的例子,于是就拿官方的这个小球下落回弹来作为例子,深入的了解属性动画的用法吧. 代码中的注释我已经非常详细,所以不再另外写出来了.过一遍代码,相信我们自己以后也能灵活运用属性动画了.

先上效果图:

代码:

ShapeHolder:

package com.test.android.objectanimationmain;import android.graphics.Paint;import android.graphics.RadialGradient;import android.graphics.drawable.ShapeDrawable;import android.graphics.drawable.shapes.Shape;/** * ShapeHolder作为属性动画的对象,必须设置setter和getter方法才能使动画生效. * 这个类本质上也是通过ShapeDrawable来创建可视化的实体对象. * 里面都是主要的getter和setter方法 */public class ShapeHolder {    private float x = 0, y = 0;    private ShapeDrawable shape;    private int color;    private RadialGradient gradient;    private float alpha = 1f;    private Paint paint;    public void setPaint(Paint value) {        paint = value;    }    public Paint getPaint() {        return paint;    }    public void setX(float value) {        x = value;    }    public float getX() {        return x;    }    public void setY(float value) {        y = value;    }    public float getY() {        return y;    }    public void setShape(ShapeDrawable value) {        shape = value;    }    public ShapeDrawable getShape() {        return shape;    }    public int getColor() {        return color;    }    public void setColor(int value) {        shape.getPaint().setColor(value);        color = value;    }    public void setGradient(RadialGradient value) {        gradient = value;    }    public RadialGradient getGradient() {        return gradient;    }    public void setAlpha(float alpha) {        this.alpha = alpha;        shape.setAlpha((int)((alpha * 255f) + .5f));    }    public float getWidth() {        return shape.getShape().getWidth();    }    public void setWidth(float width) {        Shape s = shape.getShape();        s.resize(width, s.getHeight());    }    public float getHeight() {        return shape.getShape().getHeight();    }    public void setHeight(float height) {        Shape s = shape.getShape();        s.resize(s.getWidth(), height);    }    public ShapeHolder(ShapeDrawable s) {        shape = s;    }}

主类方法:

 public class MyAnimationView extends View {        private static final int RED = 0xffFF8080;        private static final int BLUE = 0xff8080FF;        private static final int CYAN = 0xff80ffff;        private static final int GREEN = 0xff80ff80;        public final ArrayList<ShapeHolder> balls = new ArrayList<ShapeHolder>();        AnimatorSet animation = null;        public MyAnimationView(Context context) {            super(context);            // Animate background color            // Note that setting the background color will automatically invalidate the            // view, so that the animated color, and the bouncing balls, get redisplayed on            // every frame of the animation.            //设置背景颜色的动画            ValueAnimator colorAnim = ObjectAnimator.ofInt(this, "backgroundColor", RED, BLUE);            colorAnim.setDuration(3000);            //设置属性值计算器            colorAnim.setEvaluator(new ArgbEvaluator());            colorAnim.setRepeatCount(ValueAnimator.INFINITE);            colorAnim.setRepeatMode(ValueAnimator.REVERSE);            colorAnim.start();        }        @Override        public boolean onTouchEvent(MotionEvent event) {            //如果触摸事件不是按下或者移动事件,则不拦截            if (event.getAction() != MotionEvent.ACTION_DOWN &&                    event.getAction() != MotionEvent.ACTION_MOVE) {                return false;            }            ShapeHolder newBall = addBall(event.getX(), event.getY());            // Bouncing animation with squash and stretch            //获取触摸的事件X,Y坐标            float startY = newBall.getY();            //小球最后下落点的Y坐标,由屏幕高度减去小球高度得到            float endY = getHeight() - 50f;            //获取shapeholder的高度            float h = (float)getHeight();            float eventY = event.getY();            int duration = (int)(500 * ((h - eventY)/h));            //这里设置了"y","x"这些属性,但是系统针对newBall这对象是没有setX(), setY()的方法支持的.            //所以我们在newBall所继承的自定义的ShapeHolder了中,必须自己去实现setX() setY()            //和getX() , getY()方法,这样才能是属性动画在使用过程中可以根据时间不断的getter和setter.            //这里就是我们所使用自定义的对象去调用属性动画的关键地方.            //换言之,如果ShapeHolder中将x,y换成locationX,locationY,只要类中实现类似setLocationY(),getLocationY()方法就行了,            //下面这句照样可以换成ValueAnimator bounceAnim = ObjectAnimator.ofFloat(newBall, "locationY", startY, endY);            ValueAnimator bounceAnim = ObjectAnimator.ofFloat(newBall, "y", startY, endY);            bounceAnim.setDuration(duration);            //设置插值器,由慢到快.这样小球(也就是一个圆)在下落的过程中是从慢到快的,看起来是受了地心引力的影响...更真实一些            bounceAnim.setInterpolator(new AccelerateInterpolator());            //这里创建的squashAnim1属性动画,是实现小球掉落在底部的Y坐标时的压扁效果.X坐标偏移25f            ValueAnimator squashAnim1 = ObjectAnimator.ofFloat(newBall, "x", newBall.getX(),                    newBall.getX() - 25f);            //这里设置的动画时间只有bounceAnim动画时间的1/4,因为压扁的过程是迅速的,所以要时间值小很多才合理            squashAnim1.setDuration(duration/4);            //设置重复次数为1次            squashAnim1.setRepeatCount(1);            //设置重复模式是逆向返回起点            squashAnim1.setRepeatMode(ValueAnimator.REVERSE);            //设置插值器,一直减速            squashAnim1.setInterpolator(new DecelerateInterpolator());            //这里一连串的squashAnim1,squashAnim2等等都是构成小球压扁效果的动画,宽度增加至50            ValueAnimator squashAnim2 = ObjectAnimator.ofFloat(newBall, "width", newBall.getWidth(),                    newBall.getWidth() + 50);            squashAnim2.setDuration(duration/4);            squashAnim2.setRepeatCount(1);            //因为压扁完还要恢复原状,这里必须是逆向返回起始值,使用ValueAnimator.REVERSE            squashAnim2.setRepeatMode(ValueAnimator.REVERSE);            squashAnim2.setInterpolator(new DecelerateInterpolator());            //依旧是构成压扁效果的动画,小球压扁后Y轴上移25f,也就是半个小球的高度,看起来是压扁到恢复原状的效果了.            ValueAnimator stretchAnim1 = ObjectAnimator.ofFloat(newBall, "y", endY,                    endY + 25f);            stretchAnim1.setDuration(duration/4);            stretchAnim1.setRepeatCount(1);            stretchAnim1.setInterpolator(new DecelerateInterpolator());            stretchAnim1.setRepeatMode(ValueAnimator.REVERSE);            //依旧是构成压扁效果的动画,小球高度减小25.            ValueAnimator stretchAnim2 = ObjectAnimator.ofFloat(newBall, "height",                    newBall.getHeight(), newBall.getHeight() - 25);            stretchAnim2.setDuration(duration/4);            stretchAnim2.setRepeatCount(1);            stretchAnim2.setInterpolator(new DecelerateInterpolator());            stretchAnim2.setRepeatMode(ValueAnimator.REVERSE);            //小球回弹动画,弹回原点.            ValueAnimator bounceBackAnim = ObjectAnimator.ofFloat(newBall, "y", endY,                    startY);            bounceBackAnim.setDuration(duration);            bounceBackAnim.setInterpolator(new DecelerateInterpolator());            // Sequence the down/squash&stretch/up animations            //这里是AnimatorSet的灵活用法,上篇中只讲了AnimatorSet的playSequentially()和playTogether()方法            //AnimatorSet作为一个动画容器,这里规定了bounceAnim在squashAnim1动画前面播放,            //然后squashAnim1播放的同时又播放squashAnim2,stretchAnim1,stretchAnim2这三个动画            //最后规定bounceBackAnim这个小球弹起动画必须放在stretchAnim2这个动画后面去播放,也就是放最后.            //这些规则,保证了小球从下落到底部,然后在底部产生压扁效果,然后恢复原状,再弹回原点的整个过程.            AnimatorSet bouncer = new AnimatorSet();            bouncer.play(bounceAnim).before(squashAnim1);            bouncer.play(squashAnim1).with(squashAnim2);            bouncer.play(squashAnim1).with(stretchAnim1);            bouncer.play(squashAnim1).with(stretchAnim2);            bouncer.play(bounceBackAnim).after(stretchAnim2);            // Fading animation - remove the ball when the animation is done            //这里动画定义透明度从可见到完全不可见,就是小球弹回原点后消失了的效果.            ValueAnimator fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f);            //消失的时间很短,所以这个值不要设置过长.            fadeAnim.setDuration(250);            //添加监听接口,当动消失的动画结束,就将小球(ShapeHolder的子类)从队列中删去.            fadeAnim.addListener(new AnimatorListenerAdapter() {                @Override                public void onAnimationEnd(Animator animation) {                    balls.remove(((ObjectAnimator)animation).getTarget());                }            });            // Sequence the two animations to play one after the other            AnimatorSet animatorSet = new AnimatorSet();            //这里规定消失动画必须在整个下落回弹结束后才开始            animatorSet.play(bouncer).before(fadeAnim);            // Start the animation            //启动动画            animatorSet.start();            //拦截触摸事件,返回true.            return true;        }        private ShapeHolder addBall(float x, float y) {            //创建椭圆Shape            OvalShape circle = new OvalShape();            //X和Y都是50f,则代表这个椭圆circle是一个半径为25f的圆            circle.resize(50f, 50f);            //上篇分析过ShapeDrawable的源码,可知下面是使用OvalShape去创建shapedrawable对象            ShapeDrawable drawable = new ShapeDrawable(circle);            ShapeHolder shapeHolder = new ShapeHolder(drawable);            shapeHolder.setX(x - 25f);            shapeHolder.setY(y - 25f);            //下面是通过随机的方法去生成红绿蓝三个值.,从而组合成ARGB的值,设置为该圆的颜色            int red = (int)(Math.random() * 255);            int green = (int)(Math.random() * 255);            int blue = (int)(Math.random() * 255);            int color = 0xff000000 | red << 16 | green << 8 | blue;            //每个ShapeDrawable对象都有自己的paint,直接getPaint()就能获取了            Paint paint = drawable.getPaint(); //new Paint(Paint.ANTI_ALIAS_FLAG);            int darkColor = 0xff000000 | red/4 << 16 | green/4 << 8 | blue/4;            //给上面生成的ARGB值,添加圆的中心到边缘颜色从深到浅的渐变效果            RadialGradient gradient = new RadialGradient(37.5f, 12.5f,                    50f, color, darkColor, Shader.TileMode.CLAMP);            paint.setShader(gradient);            //到了这一步,圆的颜色效果已经确定了            shapeHolder.setPaint(paint);            balls.add(shapeHolder);            return shapeHolder;        }        @Override        protected void onDraw(Canvas canvas) {            for (int i = 0; i < balls.size(); ++i) {                //画出小球                ShapeHolder shapeHolder = balls.get(i);                canvas.save();                canvas.translate(shapeHolder.getX(), shapeHolder.getY());                shapeHolder.getShape().draw(canvas);                canvas.restore();            }        }    }

在自己新建的Activity的view中直接container.addView(new MyAnimationView(getActivity())); 就能看到效果了.

上面官方的例子没有用到自定义属性计算器Evaluator,于是为了和上面的效果对比明显,就写了一个奇葩的.

 /**     * 自定义属性计算器     */    public class MyEvaluator implements TypeEvaluator    {        @Override        public Object evaluate(float fraction, Object startValue, Object endValue) {            fraction = (Float)startValue - (Float)endValue/10;            return fraction;        }    }

然后在第一个动画中去设置它:

bounceAnim.setEvaluator(new MyEvaluator());

这样看看效果,是不是点击屏幕的时候,小球不再是直接从按下的地方开始下落,而是从按下的Y轴坐标更往上一些的地方下落.

值得注意的是,如果要使用自定义的对象去调用属性动画,必须在属性动画所用到的对象中设置相应属性的getter和setter方法才行.不然是没有效果的.

以上demo所用到的方法已经是比较复杂的属性动画的进阶用法,相关说明也在注释写上,所有复杂的动画都不是一两个动画就一蹴而就的,复杂的东西都由较为简单的东西去组合而成.就像代码中AnimatorSet的动画集制定了各种播放规则,组合了5,6个动画才实现一个小球从下落到底部,然后压扁恢复原状,再弹起,最后消失,这样的过程.

最后,希望能给你提供一点点帮助.感谢你阅读本文.