安卓实战开发Day06 2020.8.17

1.帧动画
2.动画类简介
3.alphaAnimation
4.translateAnimation
5.rotateAnimation
6.scaleAnimation
7.animationSet

一.帧动画

(1)正常使用

1.在drawable里面新建资源目录,里面存放将要播放的图片
1
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)
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值