动画讲解

来源：互联网发布：win7如何打开端口编辑：程序博客网时间：2024/05/01 18:40

动画分为帧动画和补间动画

Tween Animation(渐变动画)：通过对特定的对象做图像变换如平移、缩放、旋转、淡出/淡入等产生动画效果

Frame Animation(帧动画)：创建一个Drawable序列，这些Drawable可以按照指定的时间间隔一个一个的显示，也就是顺序播放事先做好的图像。

补间动画例子：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true" >

<item android:drawable="@drawable/a1" android:duration="500"></item>
<item android:drawable="@drawable/a2" android:duration="500"></item>
<item android:drawable="@drawable/a3" android:duration="500"></item>
<item android:drawable="@drawable/a4" android:duration="500"></item>
<item android:drawable="@drawable/a5" android:duration="500"></item>
<item android:drawable="@drawable/a6" android:duration="500"></item>
<item android:drawable="@drawable/a7" android:duration="500"></item>
<item android:drawable="@drawable/a8" android:duration="500"></item>
<item android:drawable="@drawable/a9" android:duration="500"></item>
<item android:drawable="@drawable/a10" android:duration="500"></item>
<item android:drawable="@drawable/a11" android:duration="500"></item>
<item android:drawable="@drawable/a12" android:duration="500"></item>
<item android:drawable="@drawable/a13" android:duration="500"></item>
<item android:drawable="@drawable/a14" android:duration="500"></item>
<item android:drawable="@drawable/a15" android:duration="500"></item>
<item android:drawable="@drawable/a16" android:duration="500"></item>
<item android:drawable="@drawable/a17" android:duration="500"></item>
<item android:drawable="@drawable/a18" android:duration="500"></item>
<item android:drawable="@drawable/a19" android:duration="500"></item>
<item android:drawable="@drawable/a20" android:duration="500"></item>
<item android:drawable="@drawable/a21" android:duration="500"></item>
<item android:drawable="@drawable/a22" android:duration="500"></item>
<item android:drawable="@drawable/a23" android:duration="500"></item>
<item android:drawable="@drawable/a24" android:duration="500"></item>
<item android:drawable="@drawable/a25" android:duration="500"></item>
<item android:drawable="@drawable/a26" android:duration="500"></item>
<item android:drawable="@drawable/a27" android:duration="500"></item>
<item android:drawable="@drawable/a28" android:duration="500"></item>
<item android:drawable="@drawable/a29" android:duration="500"></item>
<item android:drawable="@drawable/a30" android:duration="500"></item>
<item android:drawable="@drawable/a31" android:duration="500"></item>
<item android:drawable="@drawable/a32" android:duration="500"></item>
<item android:drawable="@drawable/a33" android:duration="500"></item>
<item android:drawable="@drawable/a34" android:duration="500"></item>
<item android:drawable="@drawable/a35" android:duration="500"></item>
<item android:drawable="@drawable/a36" android:duration="500"></item>
<item android:drawable="@drawable/a37" android:duration="500"></item>
<item android:drawable="@drawable/a38" android:duration="500"></item>
<item android:drawable="@drawable/a39" android:duration="500"></item>
<item android:drawable="@drawable/a40" android:duration="500"></item>
<item android:drawable="@drawable/a41" android:duration="500"></item>
<item android:drawable="@drawable/a42" android:duration="500"></item>
<item android:drawable="@drawable/a43" android:duration="500"></item>
<item android:drawable="@drawable/a44" android:duration="500"></item>
<item android:drawable="@drawable/a45" android:duration="500"></item>
<item android:drawable="@drawable/a46" android:duration="500"></item>
<item android:drawable="@drawable/a47" android:duration="500"></item>
<item android:drawable="@drawable/a48" android:duration="500"></item>
<item android:drawable="@drawable/a49" android:duration="500"></item>
<item android:drawable="@drawable/a50" android:duration="500"></item>
<item android:drawable="@drawable/a51" android:duration="500"></item>
<item android:drawable="@drawable/a52" android:duration="500"></item>
<item android:drawable="@drawable/a53" android:duration="500"></item>
<item android:drawable="@drawable/a54" android:duration="500"></item>
<item android:drawable="@drawable/a55" android:duration="500"></item>
<item android:drawable="@drawable/a56" android:duration="500"></item>
<item android:drawable="@drawable/a57" android:duration="500"></item>
<item android:drawable="@drawable/a58" android:duration="500"></item>
<item android:drawable="@drawable/a59" android:duration="500"></item>
<item android:drawable="@drawable/a60" android:duration="500"></item>
<item android:drawable="@drawable/a61" android:duration="500"></item>
<item android:drawable="@drawable/a62" android:duration="500"></item>
<item android:drawable="@drawable/a63" android:duration="500"></item>
<item android:drawable="@drawable/a64" android:duration="500"></item>
<item android:drawable="@drawable/a65" android:duration="500"></item>
<item android:drawable="@drawable/a66" android:duration="500"></item>
</animation-list>

iv = (ImageView) findViewById(R.id.iv);

// 把帧动画当成一个图片设置给ImageView
iv.setImageResource(R.drawable.frame_anim);

// 再把图片取出来
AnimationDrawable ad = (AnimationDrawable) iv.getDrawable();

// 进行播放
ad.start();

补间动画的使用：见上例子。

渐变动画经常使用的例子：

渐变明暗度变化

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fillAfter="true"
android:fromAlpha="1"
android:repeatCount="1"
android:repeatMode="reverse"
android:toAlpha="0" >

</alpha>

iv = (ImageView) findViewById(R.id.iv);

注意这个地方就是实现我们的组件ImageView的动画效果

// 把xml动画得到java对象
Animation anim = AnimationUtils.loadAnimation(this, R.anim.alpha_anim);

// 执行动画
iv.startAnimation(anim);

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fillAfter="true"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="2"
android:repeatMode="reverse"
android:toXScale="2"
android:toYScale="2" >

</scale>

实现伸缩的效果

// 把xml动画得到java对象
Animation anim = AnimationUtils.loadAnimation(this, R.anim.scale_anim);

// 执行动画
iv.startAnimation(anim);

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fillAfter="true"
android:fromXDelta="0%"
android:fromYDelta="0%"
android:repeatCount="2"
android:repeatMode="reverse"
android:toXDelta="200%"
android:toYDelta="400%" >

</translate>

// 把xml动画得到java对象
Animation anim = AnimationUtils.loadAnimation(this, R.anim.translate_anim);

// 执行动画
iv.startAnimation(anim);

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fillAfter="true"
android:fromDegrees="-35"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="2"
android:repeatMode="reverse"
android:toDegrees="35" >

</rotate>

// 把xml动画得到java对象
Animation anim = AnimationUtils.loadAnimation(this, R.anim.rotate_anim);

// 执行动画
iv.startAnimation(anim);

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

<alpha
android:duration="2000"
android:fillAfter="true"
android:fromAlpha="1"
android:repeatCount="1"
android:repeatMode="reverse"
android:toAlpha="0" >
</alpha>

<scale
android:duration="2000"
android:fillAfter="true"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="2"
android:repeatMode="reverse"
android:toXScale="2"
android:toYScale="2" >
</scale>

<translate
android:duration="2000"
android:fillAfter="true"
android:fromXDelta="0%"
android:fromYDelta="0%"
android:repeatCount="2"
android:repeatMode="reverse"
android:toXDelta="200%"
android:toYDelta="400%" >
</translate>

<rotate
android:duration="2000"
android:fillAfter="true"
android:fromDegrees="-35"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="2"
android:repeatMode="reverse"
android:toDegrees="35" >
</rotate>

</set>

/**
* 动画的集合(大杂烩)
* @param v
*/

// 把xml动画得到java对象
Animation anim = AnimationUtils.loadAnimation(this, R.anim.anim_set);

// 执行动画
iv.startAnimation(anim);

下面是通过java代码实现我们的动画的设置。

/**
* 渐变
* @param v
*/
public void clickAlpha(View v) {
AlphaAnimation aa = new AlphaAnimation(1, 0); // 从显示到隐藏
aa.setDuration(2000); // 动画执行的时间
aa.setRepeatCount(2); // 在第一次动画执行完毕之后, 再重复执行两次
aa.setRepeatMode(Animation.REVERSE); // 指定重复的模式为: 反转
aa.setFillAfter(true); // 到动画指定完毕之后, 控件的状态停留在动画停止的状态
aa.setAnimationListener(new MyAnimationListener());
// 让ImageView执行动画
iv.startAnimation(aa);
}

/**
* 伸缩
* @param v
*/
public void clickScale(View v) {
ScaleAnimation sa = new ScaleAnimation(
1, 0,
1, 0,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
sa.setDuration(3000);
sa.setRepeatCount(2);
sa.setRepeatMode(Animation.REVERSE);
sa.setFillAfter(true);
iv.startAnimation(sa);
}

/**
* 位移
* @param v
*/
public void clickTranslate(View v) {
TranslateAnimation ta = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0,
Animation.RELATIVE_TO_SELF, 6,
Animation.RELATIVE_TO_SELF, 0,
Animation.RELATIVE_TO_SELF, 7);
ta.setDuration(500);
ta.setRepeatCount(2);
ta.setRepeatMode(Animation.REVERSE);
ta.setFillAfter(true);
iv.startAnimation(ta);
}

/**
* 旋转
* @param v
*/
public void clickRotate(View v) {
RotateAnimation ra = new RotateAnimation(
0, -360,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
ra.setDuration(800);
ra.setRepeatCount(2);
ra.setRepeatMode(Animation.REVERSE);
ra.setFillAfter(true);
iv.startAnimation(ra);
}

/**
* 动画的集合(大杂烩)
* @param v
*/
public void clickAnimationSet(View v) {
AnimationSet animSet = new AnimationSet(false);

AlphaAnimation aa = new AlphaAnimation(1, 0); // 从显示到隐藏
aa.setDuration(2000); // 动画执行的时间
aa.setRepeatCount(2); // 在第一次动画执行完毕之后, 再重复执行两次
aa.setRepeatMode(Animation.REVERSE); // 指定重复的模式为: 反转
aa.setFillAfter(true); // 到动画指定完毕之后, 控件的状态停留在动画停止的状态
animSet.addAnimation(aa);

ScaleAnimation sa = new ScaleAnimation(
1, 0,
1, 0,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
sa.setDuration(3000);
sa.setRepeatCount(2);
sa.setRepeatMode(Animation.REVERSE);
sa.setFillAfter(true);
animSet.addAnimation(sa);

TranslateAnimation ta = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0,
Animation.RELATIVE_TO_SELF, 3,
Animation.RELATIVE_TO_SELF, 0,
Animation.RELATIVE_TO_SELF, 3);
ta.setDuration(2000);
ta.setRepeatCount(2);
ta.setRepeatMode(Animation.REVERSE);
ta.setFillAfter(true);
animSet.addAnimation(ta);

RotateAnimation ra = new RotateAnimation(
0, -360,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
ra.setDuration(2000);
ra.setRepeatCount(2);
ra.setRepeatMode(Animation.REVERSE);
ra.setFillAfter(true);
animSet.addAnimation(ra);

iv.startAnimation(animSet);
}

fromAlpha:动画起始时透明度
0.0表示完全透明
1.0表示完全不透明
以上值取0.0-1.0之间的float数据类型的数字
toAlpha:动画结束时透明度
duration:持续时间 -->

fromXScale[float]:为动画起始时，X坐标上的伸缩尺寸,0.0表示收缩到没有
fromYScale[float]:为动画起始时，Y坐标上的伸缩尺寸,0.0表示收缩到没有
1.0表示正常无伸缩
值小于1.0表示收缩
值大于1.0表示放大
toXScale[float]:为动画结束时，X坐标上的伸缩尺寸
toYScale[float]:为动画结束时，X坐标上的伸缩尺寸
pivotX[float]:为动画相对于物件的X坐标的开始位置
pivotY[float]:为动画相对于物件的X、Y坐标的开始位置
50,50%，50%p。这三种写法就分别代表了ABSOLUTE，RELATIVE_TO_SELF和RELATIVE_TO_PARENT。
属性值说明：从0%-100%中取值，50%为物件的X或Y方向坐标上的中点位置
fillAfter[boolean]:当设置为true ，该动画转化在动画结束后被应用
startOffset[long]:动画之间的时间间隔，从上次动画停多少时间开始执行下个动画
repeatCount[int]:动画的重复次数 -->

fromXDelta:为动画起始时 X坐标上的位置
toXDelta: 为动画结束时 X坐标上的位置
fromYDelta: 为动画起始时 Y坐标上的位置
toYDelta:为动画结束时 Y坐标上的位置 -->

fromDegrees:动画起始时物件的角度
toDegrees:动画结束时物件旋转的角度可以大于360度
当角度为负数——表示逆时针旋转
当角度为正数——表示顺时针旋转
(负数from——to正数:顺时针旋转)
(负数from——to负数:逆时针旋转)
(正数from——to正数:顺时针旋转)
(正数from——to负数:逆时针旋转)
pivotX；:为动画相对于物件的X、Y坐标的开始位置
pivotY: 为动画相对于物件的X、Y坐标的开始位置
50%为物件的X或Y方向坐标上的中点位置 -->

AnimationDrawable是Android实现动画的一种简单的形式，可以用来实现帧动画。

9.6 AnimationSet类：动画集合类

AnimationSet类是Android系统中的动画集合类，用于控制View对象进行多个动作的组合，该类继承于Animation类。AnimationSet类中的很多方法都与Animation类一致，该类中最常用的方法便是addAnimation方法，该方法用于为动画集合对象添加动画对象。

【基本语法】public void addAnimation (Animation a)

其中，参数a为Animation动画对象，可以是前述任何一种补间动作。

AnimationListener听名字就知道是对Animation设置监听器，说简单点就是在Animation动画效果开始执行前，执行完毕和重复执行时可以触发监听器，从而执行对应的函数。这种模式在实际运行过程中应该还是蛮有用的。

AnimaitonListener的使用方法主要是在Animation上设置一个监听器，即采用Animation的方法成员setAnimationListener().其参数就是监听器的函数。

 animation.setAnimationListener(new DeleteAnimationListener());

class MyAnimationListener implements AnimationListener {

@Override
public void onAnimationStart(Animation animation) {
System.out.println("动画开始了");
}

@Override
public void onAnimationEnd(Animation animation) {
System.out.println("动画结束了");
}

@Override
public void onAnimationRepeat(Animation animation) {
System.out.println("动画重复了");
}
}

//延迟播放动画
ra.setStartOffset(startOffset);

0 0