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();
                    }
                });