Android动画--帧动画和补间动画
帧动画
- 首先我们定义在drawable文件夹下定义一个xml文件
- 里面包含我们要播放的动画的图片，以及每一帧动画的播放的时长
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/feiben1" android:duration="100"/>
<item android:drawable="@mipmap/feiben2" android:duration="100"/>
<item android:drawable="@mipmap/feiben3" android:duration="100"/>
<item android:drawable="@mipmap/feiben4" android:duration="100"/>
<item android:drawable="@mipmap/feiben5" android:duration="100"/>
<item android:drawable="@mipmap/feiben6" android:duration="100"/>
<item android:drawable="@mipmap/feiben7" android:duration="100"/>
<item android:drawable="@mipmap/feiben8" android:duration="100"/>
</animation-list>- 下面就是引用我们的xml文件来显示动画了，这里我们有两种方式
1.在布局文件中引用
- 只需要在src属性中引用相应的xml文件就可以了
<ImageView android:id="@+id/image_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/run"/>- 注意在布局中引用，我测试的时候在5.0版本的模拟器，和我自己的手机上不会播放，换成4.4.4就可以了，我不知道是不是只有我的这样，特别说明一下
2.在代码中引用
imageView.setBackgroundResource(R.drawable.run);
AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getBackground();
animationDrawable.start();- 效果图
补间动画
补间动画分为四种
位移动画 TranslateAnimation
旋转动画 RotateAnimation
缩放动画 ScaleAnimation
淡入淡出动画 AlphaAnimation补间动画在res文件夹下新建anim文件夹，下面放置动画的xml文件
相关的属性
- setDuration(long durationMills)
设置动画持续时间（单位：毫秒） - setFillAfter(Boolean fillAfter)
如果fillAfter的值为true,则动画执行后，控件将停留在执行结束的状态 - setFillBefore(Boolean fillBefore)
如果fillBefore的值为true，则动画执行后，控件将回到动画执行之前的状态 - setStartOffSet(long startOffSet)
设置动画执行之前的等待时间 setRepeatCount(int repeatCount)
设置动画重复执行的次数Interpolator定义了动画变化的速率，在Animations框架当中定义了一下几种Interpolator
AccelerateDecelerateInterpolator：在动画开始与结束的地方速率改变比较慢，在中间的时候速率快。
AccelerateInterpolator：在动画开始的地方速率改变比较慢，然后开始加速
CycleInterpolator：动画循环播放特定的次数，速率改变沿着正弦曲线
DecelerateInterpolator：在动画开始的地方速率改变比较慢，然后开始减速
LinearInterpolator：动画以均匀的速率改变- Interpolator一般定义在set的标签中
位移动画 TranslateAnimation
- 相应的xml布局文件如下，其中的属性比较见简单，就不再解释
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="5000">
<translate android:fromXDelta="0" android:fromYDelta="0" android:toXDelta="500" android:toYDelta="0"></translate>
</set>- 相应的代码如下
imageView2.clearAnimation();
Animation animationTranslate = AnimationUtils.loadAnimation(this, R.anim.translateanimation);
imageView2.setImageResource(R.mipmap.ic_launcher);
imageView2.setAnimation(animationTranslate);
旋转动画 RotateAnimation
- 相应的xml文件
- repeatCount表示重复次数，-1表示循环
- pivotX和pivotY表示旋转的中心点，50%表示就是图片的中心
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="5000">
<rotate android:repeatCount="-1" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360"></rotate>
</set>- 相应的代码如下
imageView2.clearAnimation();
Animation animationRotate = AnimationUtils.loadAnimation(this, R.anim.rotateanimation);
imageView2.setImageResource(R.mipmap.ic_launcher);
imageView2.setAnimation(animationRotate);
缩放动画 ScaleAnimation
- 相应的xml文件如下
- fromXScale开始的图片比例，1表示正常大小
- toXScale渐变的比例，2表示放大两倍
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="5000">
<scale android:fromXScale="1" android:fromYScale="1" android:pivotX="50%" android:pivotY="50%" android:toXScale="2" android:toYScale="2"></scale>
</set>- 相应的代码如下
imageView2.clearAnimation();
Animation animationScale = AnimationUtils.loadAnimation(this, R.anim.scaleanimation);
imageView2.setImageResource(R.mipmap.ic_launcher);
imageView2.setAnimation(animationScale);
淡入淡出动画 AlphaAnimation
- 相应的xml文件如下
- fromAlpha表示开始的透明度，1表示不透明
- toAlpha表示最终的透明度，0表示完全透明
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="5000">
<alpha android:fromAlpha="1" android:toAlpha="0"></alpha>
</set>- 相应的逻辑代码如下
imageView2.clearAnimation();
Animation animationAlpha = AnimationUtils.loadAnimation(this, R.anim.alphaanimation);
imageView2.setImageResource(R.mipmap.ic_launcher);
imageView2.setAnimation(animationAlpha);
补间动画的组合使用
- 相应的xml文件如下
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="5000">
<alpha android:fromAlpha="1" android:toAlpha="0"></alpha>
<rotate android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360"></rotate>
<translate android:fromXDelta="0" android:fromYDelta="0" android:toXDelta="500" android:toYDelta="0"></translate>
</set>- 相应的逻辑代码如下
imageView2.clearAnimation();
Animation animationMany = AnimationUtils.loadAnimation(this, R.anim.manyanimation);
imageView2.setImageResource(R.mipmap.ic_launcher);
imageView2.setAnimation(animationMany);
补间动画的监听事件
- 以上面的组合的补间动画为例子
- 这里代码比较简单易懂，就不再一一解释了
imageView2.clearAnimation();
Animation animationMany = AnimationUtils.loadAnimation(this, R.anim.manyanimation);
imageView2.setImageResource(R.mipmap.ic_launcher);
imageView2.setAnimation(animationMany);
animationMany.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
Toast.makeText(MainActivity.this, "动画开始啦", Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimationEnd(Animation animation) {
Toast.makeText(MainActivity.this, "动画结束啦", Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimationRepeat(Animation animation) {
Toast.makeText(MainActivity.this, "动画重复啦", Toast.LENGTH_SHORT).show();
}
});