Android Animation学习（三） ApiDemos解析：XML动画文件的使用

 

Android Animation学习（三） ApiDemos解析：XML动画文件的使用

　　可以用XML文件来定义Animation。

　　文件必须有一个唯一的根节点：

　　<set>, <objectAnimator>, or <valueAnimator>三者之一。

　　对应的Java类是：

• ValueAnimator - <animator>
• ObjectAnimator - <objectAnimator>
• AnimatorSet - <set>

　　<set>标签是可以嵌套的。

　　<set>标签的android:ordering属性规定了这个set中的动画的执行顺序。该属性值默认是together (default)。

　　比如：

<set android:ordering="sequentially" >

    <set>
        <objectAnimator
            android:duration="500"
            android:propertyName="x"
            android:valueTo="400"
            android:valueType="intType" />
        <objectAnimator
            android:duration="500"
            android:propertyName="y"
            android:valueTo="300"
            android:valueType="intType" />
    </set>

    <objectAnimator
        android:duration="500"
        android:propertyName="alpha"
        android:valueTo="1f" />

</set>

　

　　

　　使用时：

        AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(
                myContext, R.anim.property_animator);
        set.setTarget(myObject);
        set.start();

　　为了区分Property animation和View animation的资源文件，从Android 3.1开始，Property animation的xml文件存在res/animator/目录下（View animation的存在res/anim/目录下）， animator这个名是可选的。但是如果你想要使用Eclipse ADT plugin (ADT 11.0.0+)的布局编辑器，你就必须使用res/animator/目录，因为ADT只在该目录下寻找property animation的资源文件。

Api Demo相关代码：

　　代码结构和上一篇文章中的基本类似，也是各种小球的动画，只不过这次的动画效果都是从XML文件中读取的。

　　完整的项目见项目地址：https://github.com/mengdd/AnimationApiDemos.git

public class AnimationFromXmlActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 设置布局，布局xml中只包含了一个线性布局和一个Button
        setContentView(R.layout.animation_basic);

        LinearLayout container = (LinearLayout) findViewById(R.id.container);

        // 将自定义的View加入到线性布局中
        final MyAnimationView animView = new MyAnimationView(this);
        container.addView(animView);

        // Button的点击事件即动画开始
        Button starter = (Button) findViewById(R.id.startButton);
        starter.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {
                animView.startAnimation();
            }
        });
    }

    public class MyAnimationView extends View implements
            ValueAnimator.AnimatorUpdateListener {

        private static final float BALL_SIZE = 100f;

        public final ArrayList<ShapeHolder> balls = new ArrayList<ShapeHolder>();
        Animator animation = null;

        public MyAnimationView(Context context) {
            super(context);
            addBall(50, 50);
            addBall(200, 50);
            addBall(350, 50);
            addBall(500, 50, Color.GREEN);
        }

        private void createAnimation() {
            Context appContext = AnimationFromXmlActivity.this;

            if (animation == null) {

                // ========================================================
                // 载入根节点为<objectAnimator>的xml资源文件，解析放进ObjectAnimator类对象
                ObjectAnimator anim = (ObjectAnimator) AnimatorInflater
                        .loadAnimator(appContext, R.anim.object_animator);
                anim.addUpdateListener(this);
                anim.setTarget(balls.get(0));

                // ========================================================
                // 载入根节点为<animator>的xml资源文件，解析放进ValueAnimator类对象
                ValueAnimator fader = (ValueAnimator) AnimatorInflater
                        .loadAnimator(appContext, R.anim.animator);
                fader.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    public void onAnimationUpdate(ValueAnimator animation) {
                        invalidate();
                        // ValueAnimator动画需要在监听器中自己设置对象的属性值
                        // 这里改变的是alpha值
                        balls.get(1).setAlpha(
                                (Float) animation.getAnimatedValue());
                    }
                });

                // ========================================================
                // 载入根节点为<set>的xml资源文件，解析放进AnimatorSet类对象
                AnimatorSet seq = (AnimatorSet) AnimatorInflater.loadAnimator(
                        appContext, R.anim.animator_set);// x和y属性同时改变的动画集合
                seq.setTarget(balls.get(2));
                // 这里要注意：因为AnimatorSet没有设置AnimatorUpdateListener的方法，
                // 所以如果其他动画没有设置AnimatorUpdateListener来进行View的invalidate()刷新，
                // 这个AnimatorSet seq是不刷新的

                // ========================================================
                // 载入根节点为<objectAnimator>的xml资源文件，解析放进ObjectAnimator类对象
                ObjectAnimator colorizer = (ObjectAnimator) AnimatorInflater
                        .loadAnimator(appContext, R.anim.color_animator);
                colorizer.setTarget(balls.get(3));
                colorizer.addUpdateListener(this);

                // ========================================================
                // 总的AnimationSet，所有的动画同时播放
                animation = new AnimatorSet();
                ((AnimatorSet) animation).playTogether(anim, fader, seq,
                        colorizer);
            }
        }

        public void startAnimation() {
            createAnimation();
            animation.start();
        }

        private ShapeHolder createBall(float x, float y) {
            OvalShape circle = new OvalShape();
            circle.resize(BALL_SIZE, BALL_SIZE);
            ShapeDrawable drawable = new ShapeDrawable(circle);
            ShapeHolder shapeHolder = new ShapeHolder(drawable);
            shapeHolder.setX(x);
            shapeHolder.setY(y);
            return shapeHolder;
        }

        private void addBall(float x, float y, int color) {
            ShapeHolder shapeHolder = createBall(x, y);
            shapeHolder.setColor(color);
            balls.add(shapeHolder);
        }

        private void addBall(float x, float y) {
            ShapeHolder shapeHolder = createBall(x, y);
            int red = (int) (100 + Math.random() * 155);
            int green = (int) (100 + Math.random() * 155);
            int blue = (int) (100 + Math.random() * 155);
            int color = 0xff000000 | red << 16 | green << 8 | blue;
            Paint paint = shapeHolder.getShape().getPaint();
            int darkColor = 0xff000000 | red / 4 << 16 | green / 4 << 8 | blue
                    / 4;
            RadialGradient gradient = new RadialGradient(37.5f, 12.5f, 50f,
                    color, darkColor, Shader.TileMode.CLAMP);
            paint.setShader(gradient);
            balls.add(shapeHolder);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            // 遍历并绘制每一个球形对象
            for (ShapeHolder ball : balls) {
                // 这里是canvas.translate到一个地方，进行绘制，之后再translate回来
                // 跟先save后restore的作用相同
                canvas.translate(ball.getX(), ball.getY());
                ball.getShape().draw(canvas);
                canvas.translate(-ball.getX(), -ball.getY());
            }
        }

        public void onAnimationUpdate(ValueAnimator animation) {

            // 刷新View
            invalidate();

            // 因为第一个小球用的是ObjectAnimator，所以这里不必要自己设置属性值
            // 如果是ValueAnimator就需要加上下面两行
            // ShapeHolder ball = balls.get(0);
            // ball.setY((Float) animation.getAnimatedValue());
        }
    }
}

相关动画：

　　资源文件：

　　第一个小球：下落，并且返回：

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:valueTo="200"
    android:valueType="floatType"
    android:propertyName="y"
    android:repeatCount="1"
    android:repeatMode="reverse"/>

　　第二个小球：消失（变为透明），然后再出现：

<animator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:valueFrom="1"
    android:valueTo="0"
    android:valueType="floatType"
    android:repeatCount="1"
    android:repeatMode="reverse"/>

　　第三个小球：X轴与Y轴同时运动，并且返回：

<set>
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:valueTo="200"
        android:valueType="floatType"
        android:propertyName="x"
        android:repeatCount="1"
        android:repeatMode="reverse"/>
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:valueTo="400"
        android:valueType="floatType"
        android:propertyName="y"
        android:repeatCount="1"
        android:repeatMode="reverse"/>
</set>

　　第四个小球：颜色变化：

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:valueFrom="#0f0"
    android:valueTo="#00ffff"
    android:propertyName="color"
    android:repeatCount="1"
    android:repeatMode="reverse"/>

 

参考资料

　　API Guides：Declaring Animations in XML

　　Animation Resources

　　项目地址：https://github.com/mengdd/AnimationApiDemos.git