布局里五个ImageView便是我们看到的五个小球,最重要是给左边的小球和右边的小球加上动画,这里我们设定最左边是红色球,最右边是紫色球,两球交替升起降落,
这里我们设定左边小球先升起;便有了左边球下落敲打旁边球,右边球受力弹起,右边球下落敲打旁边球,左边球受力弹起的动画效果;
核心就是左边小球和右边小球的动画xml文件,内容如下:
左边球升起降落动画rotate_left.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:interpolator="@android:anim/accelerate_interpolator"
android:repeatCount="1"
android:fromDegrees="0"
android:toDegrees="50"
android:pivotX="50%"
android:pivotY="-300%"
android:repeatMode="reverse"
android:duration="300"
/>
</set>
右边球升起降落动画rotate_right.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:interpolator="@android:anim/accelerate_interpolator"
android:repeatCount="1"
android:fromDegrees="0"
android:toDegrees="-50"
android:pivotX="50%"
android:pivotY="-300%"
android:repeatMode="reverse"
android:duration="300"
/>
</set>
关于旋转动画的属性意思,百度可以更详细告诉你
有了动画文件,下面就是怎样控制动画的执行先后顺序:
activity.java文件内容:
定义变量:
private ImageView ballRed;
private ImageView ballPurple;
private Animation leftRotate;
private Animation rightRotate;
onCreate函数绑定小球id,以及准备动画;
ballRed = (ImageView)this.findViewById(R.id.ball_img_red);
ballPurple = (ImageView)this.findViewById(R.id.ball_img_purple);
leftRotate= AnimationUtils.loadAnimation(this, R.anim.rotate_left);
rightRotate= AnimationUtils.loadAnimation(this, R.anim.rotate_right);
onStarte函数控制动画:
这里用到了动画监听函数,可以在动画的开始,结束时,加入你想要的处理;
ballRed.startAnimation(leftRotate);//这里我们让左边小球先执行动画
leftRotate.setAnimationListener(new AnimationListener() {//给左边小球加入动画监听
@Override
public void onAnimationStart(Animation arg0) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationRepeat(Animation arg0) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animation arg0) {
// TODO Auto-generated method stub
ballPurple.startAnimation(rightRotate);//待左边小球的动画结束后,右边小球开始执行动画
}
});
rightRotate.setAnimationListener(new AnimationListener() {//给右边小球加入动画监听
@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
ballRed.startAnimation(leftRotate);//待右边小球的动画结束后,左边小球开始执行动画
}
});
由于布局文件非常简单,里面就是5个imageView的左右排列,这里就不赘述了