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