帧动画总体实现比较简单,其实现本身是实现一个图片集的连续播放,从而达到动画的效果。
实现帧动画就必须将大量图片资源加入到APK当中,从而增加APK的大小,但是却可以实现比较复杂的动画效果。
帧动画使用比较简单的,具体操作过程如下
<?xml version="1.0" encoding="UTF-8"?> <animation-list android:oneshot="false" xmlns:android="http://schemas.android.com/apk/res/android"> //duraction字段可以用来设置该图片播放时长,drawable用来设置要显示的图片 <item android:duration="230" android:drawable="@drawable/ic_chat_recording1" /> <item android:duration="230" android:drawable="@drawable/ic_chat_recording2" /> <item android:duration="230" android:drawable="@drawable/ic_chat_recording3" /> <item android:duration="230" android:drawable="@drawable/ic_chat_recording4" /> <item android:duration="230" android:drawable="@drawable/ic_chat_recording5" /> <item android:duration="230" android:drawable="@drawable/ic_chat_recording6" /> </animation-list>
<Button android:id="@+id/frame_animation_test" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="帧动画测试" /> <ImageView android:id="@+id/frame_animation_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_chat_recording1" android:layout_marginTop="20dp"/>
public class MainActivity extends AppCompatActivity { private Button frameButton; private ImageView frameImage; private AnimationDrawable frameAnimation; boolean isStart = false; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initFrame(); } private void initFrame() { //初始化控件 frameButton = (Button) findViewById(R.id.frame_animation_test); frameImage = (ImageView) findViewById(R.id.frame_animation_img); //给ImageView设置drawable frameImage.setImageResource(R.drawable.anim_chat_recording); //给动画资源赋值 frameAnimation = (AnimationDrawable) frameImage.getDrawable(); //给按钮添加点击事件用来控制动画 frameButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //当isStart=false时表示动画没有在播放,点击按钮开始播放 if (!isStart) { frameAnimation.start(); isStart = true; } else {//当isStart=true时表示动画正在播放,点击按钮停止播放 frameAnimation.stop(); isStart = false; } } }); } }
运行代码进行测试
帧动画也存在使用纯java代码的实现方式,但是在应用当中并不多见,有兴趣可以了解一下,这里不做介绍。
与按帧播放的帧动画不同,补间动画只需要定义初始和结束时的状态,中间的动画过程将由系统自动补齐。
特点:
分类:补间动画可分为四类
jave | xml | 效果 |
---|---|---|
AlphaAnimation | alph | 渐变透明度动画效果 |
ScaleAnimation | scale | 渐变尺寸伸缩动画效果 |
TranslateAnimation1 | translate | 画面转换位置移动动画效果 |
RotateAnimation | rotate | 画面转移旋转动画效果 |
后文将对四种补间动画效果做具体说明。
特有属性:
直接上代码
<ImageView android:id="@+id/alph_animation_img" android:layout_width="150dp" android:layout_height="200dp" android:src="@drawable/animation_test1"/>
后续内容的动画效果基本针对图片涉及到的xml布局都基本类似,将不再进行说明。
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initAlphJava(); } private void initAlphJava() { alphImage = (ImageView) findViewById(R.id.alph_animation_img); alphImage.setVisibility(View.VISIBLE); //构造参数中,第一个参数为动画开始时候透明度,第二个参数toAlpha为 动画结束时候透明度 //对于fromAlpha和toAlpha,1.0代表完全不透明状态,0.0代表完全透明状态 AlphaAnimation mAlpha = new AlphaAnimation(1.0f,0.0f); //设置动画播放时间,2000MS=2S mAlpha.setDuration(2000); //设置动画循环次数,-1为一直循环 mAlpha.setRepeatCount(-1); //设置动画循环方式Animation.REVERSE为倒叙播放,Animation.RESTART为重复播放 mAlpha.setRepeatMode(Animation.REVERSE); //alphImage开始播放动画 alphImage.startAnimation(mAlpha); }
动画效果为:由原图显示渐变为隐藏状态。
<set xmlns:android="http://schemas.android.com/apk/res/android"> <!--透明度控制动画效果 alpha--> <!--fromAlpha 属性为动画起始时透明度 0.0表示完全透明 1.0表示完全不透明--> <!--toAlpha 属性为动画结束时透明度--> <!--duration 属性为动画持续时间--> <alpha android:duration="2000" //播放时间为2秒 android:fromAlpha="1.0" //初始透明度为完全显示 android:toAlpha="0.0" //结束透明度为完全透明 android:repeatCount= "-1" /> //重复播放次数为无限循环 </set>
fromAlpha和toAlpha为alph动画的特有属性,1.0代表完全不透明状态,0.0代表完全透明状态
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initAlphXml(); } private void initAlphXml() { alphImage = (ImageView) findViewById(R.id.alph_animation_img); Animation animation = AnimationUtils.loadAnimation(this,R.anim.alph_anim); alphImage.startAnimation(animation); }
运行程序,动画效果与上述java实现相同。
补间动画中有一些公共属性,其说明如下:
android:duration: 动画执行的时间,以毫秒为单位
android:fillEnabled:true|false 动画结束时还原到开始动画前的状态
android:fillBefore:true|false 动画结束后视图会停留在动画开始的状态,如果fillEnabled的值为true,它的值才有意义,否则没有意义。默认值是true。
android:fillAfter:true|false 动画结束后是否保留这个动画的最后一帧的效果,它的设置不受fillEnabled的影响
android:repeatMode:reverse|restart 重复类型,reverse:表示倒序回放,restart:表示重新放一遍,这个属性必须与repeatCount联合使用,因为它的前提是重复,即重复播放时的播放类型。
android:repeatCount:动画重复的次数(注意是重复的次数),设定具体数值,也是可以是infinite,表示无限循环
android:interpolator:设定的插值器,它主要用来为动画设置一些特殊的效果,比方说:加速运动、减速运动等等。
特有属性:
动画实现效果:以自身中心点为原点,缩放为原大小的两倍。
构造方法
ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
参数取值介绍
对于前四个参数:0.0表示收缩到没有 1.0表示正常无伸缩 值小于1.0表示收缩 值大于1.0表示放大
pivotXType存在三种取值
pivotXType = Animation.ABSOLUTE:缩放轴点的x坐标 = View左上角的原点 在x方向 + pivotXValue数值的点(y方向同理)
pivotXType = Animation.RELATIVE_TO_SELF:缩放轴点的x坐标 = View左上角的原点 在x方向 + 自身宽度乘上pivotXValue数值的值(y方向同理)
pivotXType = Animation.RELATIVE_TO_PARENT:缩放轴点的x坐标 = View左上角的原点 在x方向 + 父控件宽度乘上pivotXValue数值的值 (y方向同理)
例子中所选参数为从原图大小X轴和Y轴缩放到原大小的两倍,缩放参照点为以自身宽高比例的50%处,也就是中心点。
<set xmlns:android="http://schemas.android.com/apk/res/android" > <scale android:duration="3000" //设置播放时长为3秒 android:fillAfter="false" //设置不保存播放完毕之后的画面 android:fromXScale="1.0" //起始画面X轴缩放倍数 android:fromYScale="1.0" //起始画面Y轴缩放倍数 android:interpolator="@android:anim/accelerate_decelerate_interpolator" //使用accelerate_decelerate_interpolator加速--减速差值器 android:pivotX="50%" //X轴缩放原点为自身宽度的50% android:pivotY="50%" //Y轴缩放原点为自身宽度的50% android:toXScale="2.0" //结束画面X轴缩放倍数 android:toYScale="2.0" //结束画面Y轴缩放倍数 android:repeatCount= "-1" //动画循环次数为无限循环 android:repeatMode="reverse"/> //循环模式为倒播 </set>
pivotX与pivotY相同,有三种取值方式:
- 取值为数值:当为数值时,表示在当前View的左上角,加上参数值即原点处,做为旋转点X坐标,单位为px。
- 取值为百分数:如果是50%表示在当前控件的左上角加上自己宽度的50%做为旋转点X坐标。
- 取值为百分数p:如果是50%p,那么就是表示在当前的左上角加上父控件宽度的50%做为旋转点X坐标。
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initScaleXML(); } private void initAlphXml() { private void initScaleXML() { mImage = (ImageView) findViewById(R.id.animation_img); Animation animation = AnimationUtils.loadAnimation(this,R.anim.scale_anim); mImage.startAnimation(animation); } }
运行程序,动画效果与上述java实现相同。
特有属性:
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initTranslateJava(); } private void initTranslateJava() { mImage = (ImageView) findViewById(R.id.animation_img); TranslateAnimation translateAnimation = new TranslateAnimation(0,300,0,300); //fromXDelta:起始点X轴的坐标 //toXDelta:终止点X轴的坐标 //fromYDelta:起始点Y轴的坐标 //toYDelta:终止点Y轴的坐标 translateAnimation.setDuration(2000); translateAnimation.setRepeatMode(Animation.REVERSE); //Animation.INFINITE与-1取值相同,为无限重播 translateAnimation.setRepeatCount(Animation.INFINITE); mImage.startAnimation(translateAnimation); }
上述代码实现效果:View向右下角45°移动,最终坐标为原左上角坐标的X轴正方向300,Y轴正方向300.
动画效果如下
对于构造方法
public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue) {
参数类型可大体分为两种: value和type
Type参数取值介绍
- fromXType = Animation.ABSOLUTE:缩放轴点的x坐标 = View左上角的原点 在x方向 加上 pivotXValue数值的点(y方向同理) 默认为这种方式。
- fromXType = Animation.RELATIVE_TO_SELF:缩放轴点的x坐标 = View左上角的原点 在x方向 加上 自身宽度乘上pivotXValue数值的值(y方向同理)
- fromXType = Animation.RELATIVE_TO_PARENT:缩放轴点的x坐标 = View左上角的原点 在x方向 加上 父控件宽度乘上pivotXValue数值的值 (y方向同理)
Value取值介绍:
- 取值为数值:当为数值时,表示在当前View的左上角,即原点处加上参数值,做为旋转点X坐标,单位为px。
- 取值为百分数:如果是50%表示在当前控件的左上角加上自己宽度的50%做为原点X坐标。
- 取值为百分数p:如果是50%p,那么就是表示在当前的左上角加上父控件宽度的50%做为原点X坐标。
<set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="2000" android:fromXDelta="0" android:fromYDelta="0" android:toXDelta="300" android:toYDelta="300" /> </set>
参数值类型介绍
整型值:
fromXDelta 属性为动画起始时 X坐标上的位置
toXDelta 属性为动画结束时 X坐标上的位置
fromYDelta 属性为动画起始时 Y坐标上的位置
toYDelta 属性为动画结束时 Y坐标上的位置
注意:
没有指定fromXType toXType fromYType toYType 时候, 默认是以自己为相对参照物
长整型值:
duration 属性为动画持续时间
说明: 时间以毫秒为单位
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initTranslateXML(); } private void initTranslateXML() { mImage = (ImageView) findViewById(R.id.animation_img); Animation animation = AnimationUtils.loadAnimation(this,R.anim.translate_anim); mImage.startAnimation(animation); }
运行程序,动画效果与上述java实现相同。
作者:銀灬楓
链接:https://www.jianshu.com/p/1fac598febc1
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。