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>
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类。
以上就是逐帧动画、view动画的简单演示、此外动画Animation类还有个属性,插值器Interpolator,用来控制动画执行的速率,默认值为LinearInterpolator,即匀速,若值设置为AccelerateInterpolator,则动画执行速率会先慢后快
以下是本篇博客的演示代码,感兴趣的可以下载观看:
https://github.com/ZeQiangFang/Animation.git