【Android动画入门篇】

_银河

已于 2023-07-03 02:11:33 修改

阅读量519

点赞数

文章标签： android

于 2023-07-03 01:36:05 首次发布

本文链接：https://blog.csdn.net/qq_33971387/article/details/131507888

版权

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">
    <item
        android:drawable="@mipmap/frame_1"
        android:duration="1000" />
    <item
        android:drawable="@mipmap/frame_2"
        android:duration="1000" />
    <item
        android: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">

    <View
        android:id="@+id/view"
        android:background="@drawable/loading"
        android:layout_width="400dp"
        android:layout_height="400dp" />

    <Button
        android:onClick="startAnimation"
        android:text="startAnimation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android: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:AnimationDrawable

    override 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">

    <TextView
        android: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">

    <scale
        android: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中添加如下代码

<TextView
        android: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">
    <translate
        android: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中添加如下代码

<TextView
        android: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">
    <rotate
        android: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中添加如下代码

<TextView
        android: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">

    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:toDegrees="720"
        android:pivotX="50%"
        android:pivotY="50%" />

    <translate
        android: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中添加如下代码

<TextView
        android: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">
    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"
        android:repeatMode="reverse" />
</set>

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

<TextView
        android: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按钮动画开始执行。

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

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

_银河

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Android动画入门篇】

android动画入门
复制链接

扫一扫