Android 动画总结(2) - 帧动画

三流编程

发布于 2018-09-11 16:18:11

8890

发布于 2018-09-11 16:18:11

Frame Animation，也叫 Drawable Animation，原理就类似视频快速播放一帧一帧的图片。一般场景下很少使用，工作中遇到的是有时会有背景色，用若干颜色值变化，有时一个 View 要弹跳，其实是做好了若干切图，图片大小一致，但里面的内容处于不同位置，然后播放起来看着好像是在弹跳。

如果真的有用大图，需要防止 OOM 问题。

xml 方式

在 res/anim 目录创建动画 xml 文件。其中一个 <item> 代表一帧。

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true" >
    <item
        android:drawable="@color/color1"
        android:duration="200" />
    <item
        android:drawable="@color/color2"
        android:duration="200" />
    <item
        android:drawable="@color/color3"
        android:duration="200" />
    <item
        android:drawable="@color/color4"
        android:duration="200" />
    <item
        android:drawable="@color/color5"
        android:duration="200" />
    <item
        android:drawable="@color/color6"
        android:duration="200" />
    <item
        android:drawable="@color/color7"
        android:duration="200" />
    <item
        android:drawable="@color/color8"
        android:duration="200" />
    <item
        android:drawable="@color/color9"
        android:duration="200" />
    <item
        android:drawable="@color/color10"
        android:duration="200" />
    <item
        android:drawable="@color/color11"
        android:duration="200" />
    <item
        android:drawable="@color/color12"
        android:duration="200" />
</animation-list>

如果是颜色值，要在 colors.xml 中定义好，直接在 android:drawable 处使用 #FFFFFF 这种十六进制颜色值会报错。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="color1">#FF3030</color>
    <color name="color2">#FF4500</color>
    <color name="color3">#FF6EB4</color>
    <color name="color4">#FF7F50</color>
    <color name="color5">#FF8C00</color>
    <color name="color6">#FFA54F</color>
    <color name="color7">#FFB90F</color>
    <color name="color8">#FFC1C1</color>
    <color name="color9">#FFDEAD</color>
    <color name="color10">#FFE4E1</color>
    <color name="color11">#FFEFD5</color>
    <color name="color12">#FFF68F</color>
</resources>

其中 android:oneshot 用于控制动画是否循环播放，为 true 只播放一次并停留在最后一帧，默认是 false，循环播放的。

然后代码控制播放，实际运行发现既可以作为 Background 也可以作为 Resource，都可以启动动画。

// 作为 Background
image.backgroundResource = R.drawable.test // 设置背景资源
// or
// image.backgroundDrawable = resources.getDrawable(R.drawable.frame_drawable_test)
// getBackground() 取得 AnimationDrawable 对象
val animDrawable : AnimationDrawable = image.background as AnimationDrawable
// 启动动画
animDrawable.start()

// 作为 Resource
image.imageResource = R.drawable.frame_drawable_test
// getDrawable() 取得 AnimationDrawable 对象
val animDrawable2 : AnimationDrawable = image.drawable as AnimationDrawable
animDrawable.stop() // 停止动画
animDrawable2.start()

代码方式

val animDrawable = AnimationDrawable()
animDrawable.isOneShot = true
(1..12).map {
    val id = resources.getIdentifier("color" + it, "color", packageName)
    animDrawable.addFrame(resources.getDrawable(id), 200) // 添加一帧，播放时长 200 ms
}
// 作为 Resource
image.setImageDrawable(animDrawable)
// 作为 Background
// image.backgroundDrawable = animDrawable
// image.background = animDrawable
animDrawable.start()

效果如下：

帧动画

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018.04.01 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度