【Android动画入门篇】

Android动画入门篇

动画种类：逐帧动画、view动画、属性动画，下面我们演示下前两种类别，相对来说比较容易入门，图片可能需要翻墙才能看到。

1、逐帧动画定义方法

1.1 先在drawable目录下新建文件loading.xml，代码如下

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:drawable="@mipmap/frame_1"android:duration="1000" /><itemandroid:drawable="@mipmap/frame_2"android:duration="1000" /><itemandroid:drawable="@mipmap/frame_3"android:duration="1000" /></animation-list>

android使用AnimationDrawable这个Java类来定义逐帧动画，在xml文件中是用animation-list这个标签来表示AnimationDrawable，每一个item对应每一帧，duration表示这一帧显示多长时间

1.2 在MainActivity的布局文件activity_main中添加如下代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"android:orientation="vertical"tools:context=".frame.MainActivity"><Viewandroid:id="@+id/view"android:background="@drawable/loading"android:layout_width="400dp"android:layout_height="400dp" /><Buttonandroid:onClick="startAnimation"android:text="startAnimation"android:layout_width="wrap_content"android:layout_height="wrap_content" /><Buttonandroid:onClick="endAnimation"android:text="endAnimation"android:layout_width="wrap_content"android:layout_height="wrap_content" /></LinearLayout>

这段代码中添加了一个view，background为loading.xml，一个按钮用来点击开始动画，一个按钮用来点击结束动画

1.3 在MainActivity类中添加如下代码

class MainActivity : AppCompatActivity() {lateinit var animationDrawable:AnimationDrawableoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)animationDrawable = findViewById<View>(R.id.view).background as AnimationDrawable
//        animationDrawable.isOneShot = true}fun startAnimation(view: View) {animationDrawable.start()}fun endAnimation(view: View) {animationDrawable.stop()}
}

点击运行，运行后若点击startAnimation按钮动画开始执行，并且动画一直重复无限次的执行，若点击endAnimation按钮则停止动画。

start方法开启动画，stop方法停止动画，默认情况下动画会无线循环的执行，如果想动画只执行一次，可以设置AnimationDrawable的isOneShot属性为true ，以下为Animationdrawable的继承关系结构图，这个类是Drawable，也是Drawable容器。

2、透明度动画定义方法

2.1、先在res目录下新建anim目录，然后在anim目录下新建文件alpha.xml，文件内容如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><alpha android:fromAlpha="0" android:toAlpha="1" android:duration="4000"/>
</set>

android使用AlphaAnimation这个Java类来定义透明动画，在xml文件中是用alpha这个标签来表示AlphaAnimation，fromAlpha表示动画开始时的透明度，toAlpha表示动画结束时的透明度，duration表示动画持续多长时间，set标签表示java类AnimationSet，用于表示动画集合

2.2 在ViewAnimationActivity的布局文件activity_view_animation中添加如下代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_margin="16dp"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".view.ViewAnimationActivity"><TextViewandroid:id="@+id/tv_alpha"android:textColor="@color/white"android:background="@color/design_default_color_primary"android:padding="16dp"android:onClick="onClick"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Alpha" /></LinearLayout>

这段代码中添加了一个TextView

2.3 在ViewAnimationActivity类中添加如下代码

class ViewAnimationActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_view_animation)}fun onClick(view: View) {when (view.id) {R.id.tv_alpha -> {val alphaAnimation: Animation = AnimationUtils.loadAnimation(this, R.anim.alpha)view.startAnimation(alphaAnimation)}}}
}

点击运行，运行后若点击Textview按钮动画开始执行。

startAnimation方法开启动画，AnimationUtils用来加载alpha.xml文件的动画，以下为Animation类的继承关系结构图，当前我们使用的是AlphaAnimation类继承于Animation类。

3、缩放动画定义方法

3.1、先在res目录下新建anim目录，然后在anim目录下新建文件scale.xml，文件内容如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"android:fillAfter="true"android:duration="2000"><scaleandroid:fromXScale="1.0"android:fromYScale="1.0"android:pivotX="50%"android:pivotY="50%"android:toXScale="2.0"android:toYScale="2.0" /></set>

android使用ScaleAnimation这个Java类来定义伸縮动画，在xml文件中是用scale这个标签来表示ScaleAnimation，fromXScale表示动画开始时宽度的倍数，toXScale表示动画结束时宽度的倍数,fromYScale表示动画开始时高度的倍数，toYScale表示动画结束时高度的倍数,pivotX表示X轴方向缩放的基准点，默认为0即左上角的位置，50%表示以当前view宽度的50%为基准点，如果有加px单位则以具体像素位置，就不是百分比了，如果是50%p，则以当前view控件宽度的50%为基准点,同理pivoty是表示Y轴方向的基准点，duration表示动画持续多长时间，fillAfter为true表示拉伸后保持拉伸的状态，set标签表示java类AnimationSet，用于表示动画集合

3.2 在原有的ViewAnimationActivity的布局文件activity_view_animation中添加如下代码

<TextViewandroid:id="@+id/tv_scale"android:layout_gravity="center_horizontal"android:layout_marginTop="16dp"android:textColor="@color/white"android:background="@color/design_default_color_primary"android:padding="16dp"android:onClick="onClick"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Scale" />

这段代码中添加了一个TextView

3.3 在原有的ViewAnimationActivity类中添加如下代码

val animation = AnimationUtils.loadAnimation(this, R.anim.scale)view.startAnimation(animation)

点击运行，运行后若点击Scale按钮动画开始执行。

startAnimation方法开启动画，AnimationUtils用来加载alpha.xml文件的动画，以下为Animation类的继承关系结构图，当前我们使用的是ScaleAnimation类继承于Animation类。

4、位移动画定义方法

4.1、先在res目录下新建anim目录，然后在anim目录下新建文件translate.xml，文件内容如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"android:duration="2000"android:fillAfter="true"><translateandroid:fromXDelta="0"android:fromYDelta="0"android:toXDelta="50%p"android:toYDelta="100%" /></set>

android使用TranslateAnimation这个Java类来定义伸縮动画，在xml文件中是用translate这个标签来表示TranslateAnimation，fromXDelta表示动画开始时x轴方向移动的距离，0表示0px，fromYDelta表示动画开始时Y轴方向移动的距离，0表示0px，toXDelta表示动画结束时x轴方向移动的距离，50%p表示移动当前view的父控件宽度的一半，toYDelta表示动画结束时Y轴方向移动的距离，100%表示移动当前view控件的高度。

4.2 在原有的ViewAnimationActivity的布局文件activity_view_animation中添加如下代码

<TextViewandroid:id="@+id/tv_translate"android:layout_marginTop="16dp"android:textColor="@color/white"android:background="@color/design_default_color_primary"android:padding="16dp"android:onClick="onClick"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Translate" />

这段代码中添加了一个TextView

4.3 在原有的ViewAnimationActivity类的onClick方法中添加如下代码

val animation = AnimationUtils.loadAnimation(this, R.anim.translate)view.startAnimation(animation)

点击运行，运行后若点击Translate按钮动画开始执行。

startAnimation方法开启动画，AnimationUtils用来加载translate.xml文件的动画，以下为Animation类的继承关系结构图，当前我们使用的是TranslateAnimation类继承于Animation类。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ITKyGo0N-1688321490091)(https://s2.loli.net/2023/06/26/Y9Uvhbwe43uJKBS.png)]

5、旋转动画定义方法

5.1、先在res目录下新建anim目录，然后在anim目录下新建文件rotate.xml，文件内容如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"android:fillAfter="true"><rotateandroid:duration="2000"android:fromDegrees="0"android:toDegrees="360"android:pivotX="50%"android:pivotY="50%"android:repeatCount="infinite"android:repeatMode="reverse" />
</set>

android使用RotateAnimation这个Java类来定义旋转动画，在xml文件中是用rotate这个标签来表示RotateAnimation，fromDegrees表示动画开始时旋转的角度，toDegrees表示动画结束时旋转的角度，0表示0度，360表示360度，pivotX和pivotY表示旋转的中心点坐标，50%表示当前view控件宽度或高度的一半，repeatCount表示动画重复次数，没写值默认为0，为infinite表示无限次重复，为3表示重复三次，repeatMode表示重复的模式，默认值为restart表示重新开始，若值为reverse则表示放方向开始。

5.2 在原有的ViewAnimationActivity的布局文件activity_view_animation中添加如下代码

<TextViewandroid:id="@+id/tv_rotate"android:layout_gravity="center_horizontal"android:layout_marginTop="16dp"android:textColor="@color/white"android:background="@color/design_default_color_primary"android:padding="16dp"android:onClick="onClick"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="rotate" />

这段代码中添加了一个TextView

5.3 在原有的ViewAnimationActivity类的onClick方法中添加如下代码

val animation = AnimationUtils.loadAnimation(this, R.anim.rotate)
view.startAnimation(animation)

点击运行，运行后若点击Rotate按钮动画开始执行。

startAnimation方法开启动画，AnimationUtils用来加载rotate.xml文件的动画，以下为Animation类的继承关系结构图，当前我们使用的是RotateAnimation类继承于Animation类。

6、集合动画定义方法

6.1、先在res目录下新建anim目录，然后在anim目录下新建文件set.xml，文件内容如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><rotateandroid:duration="1000"android:fromDegrees="0"android:toDegrees="720"android:pivotX="50%"android:pivotY="50%" /><translateandroid:startOffset="1000"android:duration="1000"android:fromXDelta="0"android:toXDelta="500"android:fromYDelta="0"android:toYDelta="0"/>
</set>

android使用AnimationSet这个Java类来定义集合动画，在xml文件中是用set这个标签来表示AnimationSet，startOffset表示开始执行前的等待时间，总的动画时间为startOffset等待的时间和duration动画执行时间相加，其它标签属性前面几种动画已介绍过

5.2 在原有的ViewAnimationActivity的布局文件activity_view_animation中添加如下代码

<TextViewandroid:id="@+id/tv_set"android:layout_marginTop="16dp"android:textColor="@color/white"android:background="@color/design_default_color_primary"android:padding="16dp"android:onClick="onClick"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Set" />

这段代码中添加了一个TextView

5.3 在原有的ViewAnimationActivity类的onClick方法中添加如下代码

val animation = AnimationUtils.loadAnimation(this, R.anim.set)
view.startAnimation(animation)

点击运行，运行后若点击Set按钮动画开始执行。

startAnimation方法开启动画，AnimationUtils用来加载set.xml文件的动画，以下为Animation类的继承关系结构图，当前我们使用的是AnimationSet类继承于Animation类。

6、旋转动画定义方法

6.1、先在res目录下新建anim目录，然后在anim目录下新建文件rotate.xml，文件内容如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"android:fillAfter="true"><rotateandroid:duration="2000"android:fromDegrees="0"android:toDegrees="360"android:pivotX="50%"android:pivotY="50%"android:repeatCount="infinite"android:repeatMode="reverse" />
</set>

android使用RotateAnimation这个Java类来定义旋转动画，在xml文件中是用rotate这个标签来表示RotateAnimation，fromDegrees表示动画开始时旋转的角度，toDegrees表示动画结束时旋转的角度，0表示0度，360表示360度，pivotX和pivotY表示旋转的中心点坐标，50%表示当前view控件宽度或高度的一半，repeatCount表示动画重复次数，没写值默认为0，为infinite表示无限次重复，为3表示重复三次，repeatMode表示重复的模式，默认值为restart表示重新开始，若值为reverse则表示放方向开始。

5.2 在原有的ViewAnimationActivity的布局文件activity_view_animation中添加如下代码

<TextViewandroid:id="@+id/tv_rotate"android:layout_gravity="center_horizontal"android:layout_marginTop="16dp"android:textColor="@color/white"android:background="@color/design_default_color_primary"android:padding="16dp"android:onClick="onClick"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="rotate" />

这段代码中添加了一个TextView

5.3 在原有的ViewAnimationActivity类的onClick方法中添加如下代码

val animation = AnimationUtils.loadAnimation(this, R.anim.rotate)
view.startAnimation(animation)

点击运行，运行后若点击Rotate按钮动画开始执行。

startAnimation方法开启动画，AnimationUtils用来加载rotate.xml文件的动画，以下为Animation类的继承关系结构图，当前我们使用的是RotateAnimation类继承于Animation类。

以上就是逐帧动画、view动画的简单演示、此外动画Animation类还有个属性，插值器Interpolator，用来控制动画执行的速率，默认值为LinearInterpolator，即匀速，若值设置为AccelerateInterpolator，则动画执行速率会先慢后快

以下是本篇博客的演示代码，感兴趣的可以下载观看：
https://github.com/ZeQiangFang/Animation.git