1.帧动画
2.动画类简介
3.alphaAnimation
4.translateAnimation
5.rotateAnimation
6.scaleAnimation
7.animationSet
一.帧动画
(1)正常使用
1.在drawable里面新建资源目录,里面存放将要播放的图片
2.在资源目录里面编写如下代码
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/campfire01" android:duration="100"/>
<item android:drawable="@drawable/campfire02" android:duration="100"/>
<item android:drawable="@drawable/campfire03" android:duration="100"/>
<item android:drawable="@drawable/campfire04" android:duration="100"/>
<item android:drawable="@drawable/campfire05" android:duration="100"/>
<item android:drawable="@drawable/campfire06" android:duration="100"/>
<item android:drawable="@drawable/campfire07" android:duration="100"/>
<item android:drawable="@drawable/campfire08" android:duration="100"/>
<item android:drawable="@drawable/campfire09" android:duration="100"/>
<item android:drawable="@drawable/campfire10" android:duration="100"/>
<item android:drawable="@drawable/campfire11" android:duration="100"/>
<item android:drawable="@drawable/campfire12" android:duration="100"/>
<item android:drawable="@drawable/campfire13" android:duration="100"/>
<item android:drawable="@drawable/campfire14" android:duration="100"/>
<item android:drawable="@drawable/campfire15" android:duration="100"/>
<item android:drawable="@drawable/campfire16" android:duration="100"/>
<item android:drawable="@drawable/campfire17" android:duration="100"/>
</animation-list>
一张图片就是一个item
3.再在Activity中重写onStart方法启动动画
override fun onStart() {
super.onStart()
//启动动画
(imageView.drawable as AnimationDrawable).start()
}
注意:
利用R.id或者R.drawable这些得到的是id,也就是整型,如果把这些id作为参数,调用getDrawable(),就真正得到了这个图片
二.代码实现动画效果
class MainActivity : AppCompatActivity() {
private lateinit var frameAnim: AnimationDrawable
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//添加点击事件
imageView.setOnClickListener {
if(frameAnim.isRunning){
frameAnim.stop()
}else{
frameAnim.start()//是从头开始
}
}
}
override fun onStart() {
super.onStart()
manuFirmAnim()
}
//代码创建火焰燃烧的动画
fun manuFirmAnim(){
//1.先用数组保存所有图片
val fires = arrayOf(
R.drawable.campfire01,
R.drawable.campfire02,
R.drawable.campfire03,
R.drawable.campfire04,
R.drawable.campfire05,
R.drawable.campfire06,
R.drawable.campfire07,
R.drawable.campfire08,
R.drawable.campfire09,
R.drawable.campfire10,
R.drawable.campfire11,
R.drawable.campfire12,
R.drawable.campfire13,
R.drawable.campfire14,
R.drawable.campfire15,
R.drawable.campfire16,
R.drawable.campfire17
)
//2.创建对象
frameAnim = AnimationDrawable().apply {
//添加每一帧对应的资源和时间
for(item in fires){
addFrame(getDrawable(item)!!,100)
}
//关联帧动画和图片
imageView.setImageDrawable(this)
//启动动画
start()
}
}
}
二.动画类简介
1.简单介绍
动画类Animation是抽象类,有以下几个比较重要的类实现了这个抽象类
AlphaAnimation
TranslateAnimation
RotateAnimation
ScaleAnimation
AnimationSet
里面有几个属性比较重要
duration 是动画时长
repeatCount是重复次数,如果是无限重复的话就是INFINITE
repeatMode是重复的方式,restart是从头开始,reverse是从结束回到起始
reset()是重新设置动画
start()是启动动画
cancel()是取消动画
fillAfter是 是停留在结束状态
fillBefore是 回到起始状态
setAnimationListener是监听事件
2.创建动画的两种方式
(1)xml配置
在res下创建资源名为anim的资源目录
可以使用AnimationUtils来加载动画
(2)代码创建
三.alphaAnimation
1.xml创建
//淡出
fun testAlpha(){
//1.将xml配置的动画解析出来
val alphaAnimation = AnimationUtils.loadAnimation(this,R.anim.alpha) as AlphaAnimation
//2.设置保留在最后位置
alphaAnimation.fillAfter = true
//3.设置时长是1s
alphaAnimation.duration = 1000
//4.设置无限重复
alphaAnimation.repeatCount = -1
//5.设置重复的样式是从结束地方到开始地方,也就是reverse
alphaAnimation.repeatMode = Animation.REVERSE
//2.将这个动画添加到视图上
textView.startAnimation(alphaAnimation)
}
在xml里面
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="1.0f"
android:toAlpha="0.0f"
/>
2.代码创建
//淡出
fun testAlpha(){
AlphaAnimation(1.0f,0.0f).apply {
duration = 1000
fillAfter = true
repeatCount = 3//实际上是做四次
repeatMode = Animation.REVERSE
//设置监听器
setAnimationListener(object : Animation.AnimationListener{
override fun onAnimationRepeat(animation: Animation?) {
TODO("Not yet implemented")
}
override fun onAnimationEnd(animation: Animation?) {
TODO("Not yet implemented")
}
override fun onAnimationStart(animation: Animation?) {
TODO("Not yet implemented")
}
})
}.also {
textView.startAnimation(it)
}
}
四.translateAnimation
1.xml创建
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="200"
android:fromYDelta="0"
android:toYDelta="0"
/>
//移动
fun textTranslate(){
//1.创建动画
val translateAnimation = AnimationUtils.loadAnimation(this,R.anim.move) as TranslateAnimation
//设置时间
translateAnimation.duration = 1000
//设置是否停留在最后
translateAnimation.fillAfter = true
//2.将动画添加到视图上
textView.startAnimation(translateAnimation)
}
这里如果把
android:fromXDelta="0"
android:toXDelta="200"
改为
android:fromXDelta="0%"
android:toXDelta="100%"
就会移动一个自己的长度
xml配置移动距离时,可以使用三种方式
(1)相对于自己的起始点xy移动固定的距离 ABSOLUTE
(2)相对于自身的大小比例进行移动,也就是移动的距离和自己的宽或者高是成比例的,而这个比例就是你自己设置的数字。RELATIVE_TO_SELF
(3)相对于父容器的大小比例进行移动,形式就是%后加个p
RELATIVE_TO_PARENT
2.代码创建
//移动
fun textTranslate(){
TranslateAnimation(0f,100f,0f,0f).apply {
//设置时间
duration = 1000
//停留末尾
fillAfter = true
}.also {
textView.startAnimation(it)
}
}
五.rotateAnimation
1.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
/>
<!--旋转的中心点是图形的中心-->
//旋转
fun textRotate(){
val rotateAnimation = AnimationUtils.loadAnimation(this,R.anim.rotate) as RotateAnimation
//设置时间和次数
rotateAnimation.duration = 1000
rotateAnimation.repeatCount = Animation.INFINITE//无数次
textView.startAnimation(rotateAnimation)
}
2.代码
//旋转
fun textRotate(){
RotateAnimation(0f,360f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f).apply {
//设置时间和次数
duration = 1000
repeatCount = Animation.INFINITE
}.also {
textView.startAnimation(it)
}
}
六.scaleAnimation
1.代码方式
//缩放
fun textScale(){
//默认以左上角为中心进行缩放
//效果就是先缩小后变大
ScaleAnimation(0.8f,1.5f,0.8f,1.5f).apply {
duration = 1000
fillAfter = true
}.also {
textView.startAnimation(it)
}
}
2.xml
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="100%"
android:toXScale="150%"
android:fromYScale="100%"
android:toYScale="150%"
android:pivotX="50%"
android:pivotY="50%"
/>
以图形中心为中心点
七.set
1.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="0"
android:toDegrees="360"/>
<scale
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="100%"
android:toYScale="150%"/>
</set>
//综合
fun textSet(){
val animationSet = AnimationUtils.loadAnimation(this,R.anim.set)
//设置时间
animationSet.duration = 1000
//开始
textView.startAnimation(animationSet)
}
2.代码
//综合
fun textSet(){
val a1 = AnimationUtils.loadAnimation(this,R.anim.scale) as ScaleAnimation
val a2 = AnimationUtils.loadAnimation(this,R.anim.rotate) as RotateAnimation
AnimationSet(true).apply {
addAnimation(a1)
addAnimation(a2)
duration = 1000
}.also {
textView.startAnimation(it)
}
}