Android中具有动画效果的图片资源

Android动画和Transition系列文章

• 初识属性动画——使用Animator创建动画
• 再谈属性动画——介绍以及自定义Interpolator插值器
• 三谈属性动画——Keyframe以及ViewPropertyAnimator
• 让View具有减速效果的动画——FlingAnimation
• 让View具有弹性效果的动画——SpringAnimation
• 让View跟随状态动起来——StateListAnimator
• 仿抖音发布按住拍呼吸效果
• Jetpack学习之——使用动画缩放图片
• 使用动画隐藏或显示View
• Android中具有动画效果的图片资源
• ViewGroup内容改变时的动画效果—LayoutTransition
• 在布局切换之间实现Transition动画
• 在Activity切换之间实现Transition动画
• 让转场更加酷炫——自定义Transition

在一些场景下，图片需要具有动画效果。当你想显示一个由多张图片组成的loading动画，或者一个图标切换过程，就需要到具有动画效果的图片了。Android提供了几种方式实现动画图片。

下面的是个示例：

第一种方式是使用Animation Drawable，这是通过建立多张静态图片构成动画的方式，类似动画片和gif。第二种方式是使用Animated Vector Drawable，然后改变其属性。

使用AnimationDrawable

当你可以定义动画中的每一帧时，可以使用AnimationDrawable，AnimationDrawable和ShapeDrawable等一样，都可以通过xml进行编写，然后设置给ImageView。

举个栗子：

在res/drawable目录下创建一个drawable文件，内容如下：

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
                android:oneshot="true">

    <item
        android:drawable="@drawable/signal_wifi_1_bar"
        android:duration="200"/>
    <item
        android:drawable="@drawable/signal_wifi_2_bar"
        android:duration="200"/>
    <item
        android:drawable="@drawable/signal_wifi_3_bar"
        android:duration="200"/>
    <item
        android:drawable="@drawable/signal_wifi_4_bar"
        android:duration="200"/>

animation-list>

其中每个item表示一帧，duration表示该帧持续时间，oneshot=true表示每一帧播放完后不循环播放了，停留在最后一帧。代码如下：

class AnimationDrawableActivity : AppCompatActivity() {

    private lateinit var wifiSignalAnimation: AnimationDrawable

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_animation_drawable)

        findViewById<ImageView>(R.id.iv_wifi_signal).apply {
            setBackgroundResource(R.drawable.wifi_signal)
            wifiSignalAnimation = background as AnimationDrawable
        }
    }

    override fun onStart() {
        super.onStart()
        wifiSignalAnimation.start()
    }
}

在onStart()方法中调用start()方法是因为在onCreate()方法中ImageView还没有添加到Window中。下面是oneshot=false的gif图。

由于AnimationDrawable是多张静态图片的集合，因此需要注意OOM问题。上面的例子是一个寻找wifi信号的动画，时间设的有点短，所以动画效果很快。

使用AnimatedVectorDrawable

AnimatedVectorDrawable（AnimatedVectorDrawableCompat）允许你改变矢量图片的属性，比如旋转或改变path数据以改变形状。

你通常需要在三个地方定义xml文件：

1. 在res/drawable目录下定义矢量图片，使用元素
2. 在res/drawable目录下定义矢量动画图片，使用元素
3. 在res/animator目录下定义一个或多个对象动画，使用元素

矢量动画图片可以更改和 属性，属性定义了一组path或subgroup， 定义了绘画的线。当你想定义一个可以动画的矢量图片时，使用android:name属性为元素分配一个独立的名称，这样可以在代码中找到属性并动画。
举个例子：

矢量动画图片给drawable中指定的名称指定动画：

上面的例子中给rotationGroup和分别指定了动画，接下来是定义这两个动画，

代码如下，和AnimationDrawable类似：

class AnimationDrawableActivity : AppCompatActivity() {

    private lateinit var vectorAnimation: AnimatedVectorDrawable

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_animation_drawable)

        findViewById(R.id.iv_wifi_signal).apply {
            setBackgroundResource(R.drawable.animvectordrawable)
            vectorAnimation = background as AnimatedVectorDrawable
        }
        
        findViewById(R.id.btn_start).setOnClickListener {
            vectorAnimation.start()
        }
    }
}

运行结果如下：

这边加了一个按钮进行控制，不然gif不好录，尴尬…

这边是将矢量动画图片的文件分成了三个文件，其实也可以将其融合到一个文件中去，

    
        
            
                
            
        
    

    *
        
            
        
    

    
        
            
                
            
        
    

总结

本文主要翻译自https://developer.android.com/guide/topics/graphics/drawable-animation

代码地址