1、补间动画的含义
做flash动画时,在两个关键帧中间需要做“补间动画”,才能实现图画的运动;插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的。
2、补间动画的四种形式
①alpha 透明度
②scale 比例缩放
③translate 位移
④rotate 旋转
3、补间动画的四种形式的实现
3.1 Java代码实现
1、alpha 透明度 AlphaAnimation 设置动画的透明度的开始与结束,设置持续的时间 0~1
<span style="font-size:14px;">// 通过java代码实现
public void alphaJava() {
// 1、创建动画的透明度对象
AlphaAnimation alphaAnimation = new AlphaAnimation(1f, 0f);
// 2、为透明度动画对象设置值
alphaAnimation.setRepeatCount(1);
alphaAnimation.setRepeatMode(Animation.RESTART);
alphaAnimation.setDuration(2000);
alphaAnimation.setFillAfter(true);
// 3、设置控件的动画
imageView.setAnimation(alphaAnimation);
}</span>
2、scale 比例缩放 ScaleAnimation 设置缩放参照的中心轴(pivotX,pivotY),设置开始的比例x,y与结束的比例x,y
<span style="font-size:14px;">public void sacleJava() {
ScaleAnimation scaleAnimation = new ScaleAnimation(0.2f, 0.2f, 0.2f, 2f);
scaleAnimation.setDuration(3000);
scaleAnimation.setFillAfter(true);
imageView.setAnimation(scaleAnimation);
}</span>
3、translate 位移 TranslateAnimation 设置动画移动开始(x,y)与结束(x,y) ,设置持续的时间
<span style="font-size:14px;">public void translateJava() {
//1、创建移动动画效果的对象
TranslateAnimation translateAnimation=new TranslateAnimation(-100f, 100f, -100f, 100f);
translateAnimation.setDuration(3000);
translateAnimation.setFillAfter(true);
imageView.setAnimation(translateAnimation);
}</span>
4、rotate 旋转 RotateAnimation 设置动画开始旋转的角度,结束时的旋转角度,并指定动画的持续时间,设置旋转的中心轴(pivotX,pivotY)
<span style="font-size:14px;">public void rotateJava() {
RotateAnimation rotateAnimation=new RotateAnimation(0,1800,0,100);
rotateAnimation.setDuration(3000);
imageView.setAnimation(rotateAnimation);
}</span>
综合应用:AnimationSet,set.addAnimation(a);
<span style="font-size:14px;">public void setJava() {
AnimationSet animationSet=new AnimationSet(false);
ScaleAnimation scaleAnimation = new ScaleAnimation(0.2f, 0.2f, 0.2f, 2f);
scaleAnimation.setDuration(3000);
scaleAnimation.setFillAfter(true);
TranslateAnimation translateAnimation=new TranslateAnimation(-100f, 100f, -100f, 100f);
translateAnimation.setDuration(3000);
translateAnimation.setFillAfter(true);
animationSet.addAnimation(scaleAnimation);
animationSet.addAnimation(translateAnimation);
imageView.setAnimation(animationSet);
}</span>
3.2 XML文件实现 结合代码
1、alpha 透明度 <alpha></alpha>
<span style="font-size:14px;"><alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="1"
android:toAlpha="0"
android:duration="2000"
android:repeatCount="2"
android:fillAfter="true"
android:repeatMode="restart"></span>
<span style="font-size:14px;">// 通过xml文件实现
public void alphaXML() {
// 1、获取动画对象
Animation animation = AnimationUtils.loadAnimation(this,
R.anim.alpha_tween);
// 2、设置动画效果
imageView.setAnimation(animation);
}</span>
2、scale 比例缩放 <scale></scale>
<span style="font-size:14px;"><scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1"
android:toXScale="1"
android:fromYScale="0.2"
android:toYScale="20"
android:pivotX="50%"
android:pivotY="50%"
android:duration="5000"></span>
<span style="font-size:14px;">public void sacleXML() {
// 1、获取动画对象
Animation animation = AnimationUtils.loadAnimation(this,
R.anim.scale_tween);
// 2、设置动画效果
imageView.setAnimation(animation);
}</span>
3、translate 位移 <translate></translate>
<span style="font-size:14px;"><translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="100"
android:fromYDelta="0"
android:toYDelta="100"
android:fillAfter="true"
android:duration="3000"></span>
<span style="font-size:14px;">public void translateXML() {
// 1、获取动画对象
Animation animation = AnimationUtils.loadAnimation(this,
R.anim.translate_tween);
// 2、设置动画效果
imageView.setAnimation(animation);
}</span>
4、rotate 旋转 <rotate></rotate>
<span style="font-size:14px;"><rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="1800"
android:pivotX="20%p"
android:pivotY="20%p"
android:duration="3000"
android:fillAfter="true" ></span>
<span style="font-size:14px;">public void rotateXML() {
// 1、获取动画对象
Animation animation = AnimationUtils.loadAnimation(this,
R.anim.rotate_tween);
// 2、设置动画效果
imageView.setAnimation(animation);
}</span>
综合应用:<set> <alpha></alpha>... </set>
<span style="font-size:14px;"><set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="1"
android:toXScale="1"
android:fromYScale="0.2"
android:toYScale="20"
android:pivotX="50%"
android:pivotY="50%"
android:duration="5000"/>
<translate
android:fromXDelta="0"
android:toXDelta="100"
android:fromYDelta="0"
android:toYDelta="100"
android:fillAfter="true"
android:duration="3000"/>
</set></span>
辅助的类:AnimationUtils.loadAnimation(context, id);
<span style="font-size:14px;">public void setXML() {
AnimationSet set=(AnimationSet) AnimationUtils.loadAnimation(this, R.anim.set_tween);
imageView.setAnimation(set);
}</span>
4、结果显示
①alphaXML();
alphaJava();
②sacleXML();
sacleJava();
③translateXML();
translateJava();
④rotateXML();
rotateJava();
⑤setXML();
setJava();