Android 安卓动画帧动画(Frame)

亦凉 2022-05-14 00:14 296阅读 0赞

## 引入 篇 ##

**帧**

指的是每秒播放图片的数量，单位(fps),1 fps 是一帧，当帧速度达到25fps会形成连贯动画效果

--------------------

**类AnimationDrawable**

用于创建逐帧动画的对象，由一系列Drawable对象定义，这些对象可以用作View对象的背景。创建逐帧动画的最简单方法是在XML文件中定义动画，将其放在res/drawable/文件夹中，并将其作为View对象的背景。然后，调用Run（）启动动画。在XML中定义的动画绘制由单个<动画列表>元素和一系列嵌套的<项目>标签组成。

--------------------

## 动画 - 相关文章篇 ##

**帧动画**

帧动画:  [https://blog.csdn.net/qq\_40881680/article/details/82222684][https_blog.csdn.net_qq_40881680_article_details_82222684]

**补间动画**

补间动画-平移动画:  [https://blog.csdn.net/qq\_40881680/article/details/82255459][https_blog.csdn.net_qq_40881680_article_details_82255459]

补间动画-缩放动画:  [https://blog.csdn.net/qq\_40881680/article/details/82260914][https_blog.csdn.net_qq_40881680_article_details_82260914]

补间动画-旋转动画:  [https://blog.csdn.net/qq\_40881680/article/details/82261557][https_blog.csdn.net_qq_40881680_article_details_82261557]

补间动画-透明/渐变动画:  [https://blog.csdn.net/qq\_40881680/article/details/82261869][https_blog.csdn.net_qq_40881680_article_details_82261869]

补间动画-组合动画(四个动画一起播放):  [https://blog.csdn.net/qq\_40881680/article/details/82285987][https_blog.csdn.net_qq_40881680_article_details_82285987]

**属性动画**

属性动画-渐变透明动画:  [https://blog.csdn.net/qq\_40881680/article/details/82318363][https_blog.csdn.net_qq_40881680_article_details_82318363]

属性动画-旋转动画:  [https://blog.csdn.net/qq\_40881680/article/details/82354017][https_blog.csdn.net_qq_40881680_article_details_82354017]

属性动画-缩放动画:  [https://blog.csdn.net/qq\_40881680/article/details/82377850][https_blog.csdn.net_qq_40881680_article_details_82377850]

属性动画-移动动画:  [https://blog.csdn.net/qq\_40881680/article/details/82378391][https_blog.csdn.net_qq_40881680_article_details_82378391]

属性动画-组合动画:  [https://blog.csdn.net/qq\_40881680/article/details/82381258][https_blog.csdn.net_qq_40881680_article_details_82381258]

--------------------

## 代码步骤 篇 ##

先将 帧素材 放在图片文件夹下，我放在了mipmap-hdpi下，帧动画素材下载地址：[点击下载帧动画素材][Link 1]

在drawable文件夹下新建xml文件，如下图操作:

![70][]

编辑创建的xml文件，

android:oneshot="false" 表示一直循环播放，设置为true表示只播放一次

android:drawable="@mipmap/indicator1" 表示图片文件的地址

android:duration="45" 表示多少毫秒后播放下一张

<?xml version="1.0" encoding="utf-8"?>
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
    
        <item android:drawable="@mipmap/indicator1"  android:duration="45"></item>
        <item android:drawable="@mipmap/indicator2"  android:duration="45"></item>
        <item android:drawable="@mipmap/indicator3"  android:duration="45"></item>
        <item android:drawable="@mipmap/indicator4"  android:duration="45"></item>
        <item android:drawable="@mipmap/indicator5"  android:duration="45"></item>
        <item android:drawable="@mipmap/indicator6"  android:duration="45"></item>
        <item android:drawable="@mipmap/indicator7"  android:duration="45"></item>
        <item android:drawable="@mipmap/indicator8"  android:duration="45"></item>
        <item android:drawable="@mipmap/indicator9"  android:duration="45"></item>
        <item android:drawable="@mipmap/indicator10" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator11" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator12" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator13" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator14" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator15" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator16" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator17" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator18" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator19" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator20" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator21" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator22" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator23" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator24" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator25" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator26" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator27" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator28" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator29" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator30" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator31" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator32" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator33" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator34" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator35" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator36" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator37" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator38" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator39" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator40" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator41" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator42" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator43" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator44" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator45" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator46" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator47" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator48" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator49" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator50" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator51" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator52" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator53" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator54" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator55" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator56" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator57" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator58" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator59" android:duration="45"></item>
        <item android:drawable="@mipmap/indicator60" android:duration="45"></item>
    
    </animation-list>

简单点，只演示动画

在主布局文件中，写一个ImageView，如下：

定义宽、高、id和背景，背景就是自己写的那个xml文件

<?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <ImageView
            android:id="@+id/image"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:background="@drawable/start" />
    
    </android.support.constraint.ConstraintLayout>

--------------------

## 代码逻辑 篇 ##

java:

用到了AnimationDrawable 类（AnimationDrawable 文章开始就有介绍）

public class MainActivity extends AppCompatActivity {
    
        private ImageView image;
        private AnimationDrawable animationDrawable;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            initView();
    
            animationDrawable = (AnimationDrawable) image.getBackground();
            animationDrawable.start();
        }
    
        private void initView() {
            image = (ImageView) findViewById(R.id.image);
        }
    }

--------------------

## 效果图 篇 ##

![70 1][]

[https_blog.csdn.net_qq_40881680_article_details_82222684]: https://blog.csdn.net/qq_40881680/article/details/82222684
[https_blog.csdn.net_qq_40881680_article_details_82255459]: https://blog.csdn.net/qq_40881680/article/details/82255459
[https_blog.csdn.net_qq_40881680_article_details_82260914]: https://blog.csdn.net/qq_40881680/article/details/82260914
[https_blog.csdn.net_qq_40881680_article_details_82261557]: https://blog.csdn.net/qq_40881680/article/details/82261557
[https_blog.csdn.net_qq_40881680_article_details_82261869]: https://blog.csdn.net/qq_40881680/article/details/82261869
[https_blog.csdn.net_qq_40881680_article_details_82285987]: https://blog.csdn.net/qq_40881680/article/details/82285987
[https_blog.csdn.net_qq_40881680_article_details_82318363]: https://blog.csdn.net/qq_40881680/article/details/82318363
[https_blog.csdn.net_qq_40881680_article_details_82354017]: https://blog.csdn.net/qq_40881680/article/details/82354017
[https_blog.csdn.net_qq_40881680_article_details_82377850]: https://blog.csdn.net/qq_40881680/article/details/82377850
[https_blog.csdn.net_qq_40881680_article_details_82378391]: https://blog.csdn.net/qq_40881680/article/details/82378391
[https_blog.csdn.net_qq_40881680_article_details_82381258]: https://blog.csdn.net/qq_40881680/article/details/82381258
[Link 1]: https://download.csdn.net/download/qq_40881680/10636245
[70]: /images/20220514/8f2dec54c6294a449faa568be56984d0.png
[70 1]: /images/20220514/b42146bdd7a849b1be4236a5c4f17a0b.png