Android开发（11）——帧动画和补间动画

本节内容

1.使用xml配置帧动画

2.代码构建帧动画

3.Animation简介

4.xml创建淡出淡入效果

5.代码创建alpha动画

6.xml创建Translate动画

7.代码创建Translate动画

8.rotate动画

9.scale动画

10.animationSet动画

一、使用xml配置帧动画

1.我们利用很多张连续的图片来完成火焰燃烧的一个动画。先拖动准备好的17张火焰燃烧的图片到drawable下。

2.在drawable中新建一个resourcefile，使用animation-list，把这些图片都加进去。

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <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>

• onset属性的意思是，是否只播放一次，选择false，即我们想让它不断播放下去，永不停止。

• 中间就是图片资源，duration是每张图片出现后停留的事件，100即100ms，也就是0.1s。

3.在layout的xml中，添加一个ImageView，宽高都设置为0dp，scaleType为fitXY。然后background设为drawable下的file_animation.xml。

• 要想让这个动画动起来，需要在MainActivity里面实现onStart（）方法。

• 找到imageView 对应的src的drawable 资源 AnimationDrawable,启动图片的动画，(animationView.drawable as AnimationDrawable).start()。

override fun onStart() {
        super.onStart()
        //找到imageView 对应的src的drawable 资源  AnimationDrawable
        //启动图片的动画
         (animationView.drawable as AnimationDrawable).start()
    }

4.这样这个动画就可以启动了。

二、代码构建帧动画

1.代码创建火焰燃烧的动画

 fun manulFireAnim() {
        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
        )
         frameAnim=    AnimationDrawable().apply {
            //添加每一帧对应的资源和时间
            for (item in fires) {
                addFrame(getDrawable(item)!!, 100)
            }
            //关联帧动画和图片
            animationView.setImageDrawable(this)
            //启动动画
            start()
        }
    }

• R.drawable.campfire01 获取图片对应的id，getDrawable(id) 获取图片对应的图片资源

• 用一个变量来记录动画效果

private lateinit var frameAnim:AnimationDrawable

2.给动画设置监听事件，点击一下就暂停动画，再点击一下又重新动起来。这个在onCreate方法里面实现。

animationView.setOnClickListener{
           if(frameAnim.isRunning){
               frameAnim.stop()
           }else{
               frameAnim.start()
           }
        }

三、Animation简介

1.所有的动画都继承于Animation这个类，它是没有具体实现的。

2.它的子类有：AlphaAnimation、TranslateAnimation、RotateAnimation、ScaleAnimation、AnimationSet。

3.Animation有一些属性:

• duaration：动画时长

• repeatCount：重复次数，无限是INFINITE

• repeatMode：重复方式，restart从头开始，reverse，从结束回到起始。

• reset()：重新设置动画

• start()：启动动画

• cancel()：取消动画

• fillAfter()：是否停留在结束状态

• fillBefore()：回到起始状态

• setAnimationListener：设置监听事件

四、xml创建淡入淡出效果

1.创建动画的两种方式：①xml配置 ：res /anim/xxx.xml ② 代码创建

2.如果要xml配置，那么先在res下创建一个AndroidDirectory，resourcetype选择anim。创好了文件夹之后，就可以在里面创建对应的资源文件了。

3.在anim文件夹下创建一个名为fade_out的resource file。

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1.0"
    android:toAlpha="0.0"
    android:fillAfter= "true"
    android:duration = "1000"
    />

• fromAlpha：开始的透明度

• toAlpha：结束的透明度

• fillAfter：停留在结束的状态

• android:repeatCount = "-1"，表示一直从开始到结束，一直反复。

4.在首页配置一下，设置六个不同的按钮。

image.png

5.然后在MainActivity添加点击事件

mAlphaOut.setOnClickListener{
          testAlphaXml(R.anim.fade_out_anim)
      }

6.将xml配置的动画解析出来

  private fun testAlphaXml(id:Int){
    val alphaAnimation = AnimationUtils.loadAnimation(this,id) as AlphaAnimation
       //将这个动画添加到视图上
      view.startAnimation(alphaAnimation)
    }

• view是上面那个橙色框框的id

7.淡入效果和淡出差不多，只不过把fromAlpha和toAlpha的值交换一下即可

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:fillAfter= "true"
    android:duration = "1000"
    />

mAlphaIn.setOnClickListener{
          testAlphaXml(R.anim.fade_in_anim)
        }

五、代码创建Alpha动画

private fun testAlphaCode(from:Float,to:Float){
       AlphaAnimation(from,to).apply {
           duration = 1000
           fillAfter= true
           repeatCount = Animation.INFINITE
           repeatMode = Animation.REVERSE
           setAnimationListener(object :Animation.AnimationListener{
               override fun onAnimationRepeat(animation: Animation?) {

               }

               override fun onAnimationEnd(animation: Animation?) {

               }

               override fun onAnimationStart(animation: Animation?) {

               }

           })
       }.also {
           view.startAnimation(it)
       }
   }

1.函数的两个参数为fromAlpha和toAlpha

2.然后在里面设置一下动画的属性

3.调用的时候传递一下两个参数即可

 mAlphaOut.setOnClickListener{
          testAlphaCode(1.0f,0.0f)
      }

4.淡入就修改一下参数即可。

 mAlphaIn.setOnClickListener{
            testAlphaCode(0.0f,1.0f)
        }

5. setAnimationListener是监听事件，需要实现一下对象里面对应的方法。

六、xml创建Translate动画

1.先在anim包里面创建一个名为move_anim的资源文件，然后把<>改为<translate>

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0%"
    android:toXDelta="100%"
    android:fromYDelta="0"
    android:toYDelta = "50%p"
    android:fillAfter = "true"
    android:duration ="1000"
    />

• fromXDelta：X的起始位置，toXDelta：X的重点位置。同理，y也是同样的意思。

• fromXDelta的值有两种类型，一种是float类型，一种是fraction的类型。

• 如果是固定值，就是相对于自己的起始点x或者起始点y移动的距离。

• 如果是100%，相对于自身的比例，移动的距离是自身宽高的一个比例。

• 如果是100%p，相对于父容器的比例，移动的距离是父容器宽高的一个比例。

2.配置好以上的内容以后，在MainActivity中实现一下xml创建的函数。

private fun testMoveXml(){
        val translateAnimation = AnimationUtils.loadAnimation(this,R.anim.move_anim) as TranslateAnimation
        view.startAnimation(translateAnimation)
    }

七、代码创建Translate动画

1.写一个函数，表示用代码创建动画。这个就是写死的，表示横向移动200个像素，不管你手机多大。

 private fun testMoveCode(){
    TranslateAnimation(0f,200f,0f,0f).apply {
                duration = 1000
                fillAfter = true
            }.also {
                view.startAnimation(it)
            }
}

2.移动一定的比例，按照相对于控件的比例移动。这种用的一般比较少。

private fun testMoveCode(){
TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,
            Animation.RELATIVE_TO_SELF,1f,
            Animation.RELATIVE_TO_SELF,0f,
            Animation.RELATIVE_TO_SELF,1f
            ).apply {
            duration = 1000
            fillAfter = true
        }.also {
            view.startAnimation(it)
        }
}

• Animation.RELATIVE_TO_SELF，相对于自身的比例。后面的1f就相当于100%，平移相对于自身一倍的距离。

• Animation.RELATIVE_TO_PARENT，相对于父容器的比例。

八、rotate动画

1.xml创建，在anim里面配置一个资源文件

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="0%"
    android:pivotY="0%"
    android:duration = "1000"
    android:repeatCount = "infinite"
    />

• fromDegrees，toDegrees：从多少度旋转到多少度。

• pivotX，pivotY：旋转的位置。都是0相当于旋转点为控件的左上角。

2.在MainActivity实现xml创建的函数。

private fun testRotateXml(){
    val rotateAnimation=  AnimationUtils.loadAnimation(this,R.anim.rotate_anim) as RotateAnimation
        view.startAnimation(rotateAnimation)
    }

3.代码创建rotate动画。如果只写两个参数，也就是只有旋转的起始和结束度数，那么它就会默认旋转中心为控件的左上角。但是下方，我们添加了旋转点的坐标，也就是以控件的中心点作为旋转点。

private fun testRotateCode(){
    RotateAnimation(0f,360f,0.5f*view.width,0.5f*view.height).apply {
             duration = 1000
         }.also {
             view.startAnimation(it)
         }
}

4.使用相对的方式设置中心点，如果把0.5改为1，那就是以右下角为旋转中心点。这个更适用。

 private fun testRotateCode(){
RotateAnimation(0f,360f,
          Animation.RELATIVE_TO_SELF,0.5f,
          Animation.RELATIVE_TO_SELF,0.5f).apply {
          duration = 1000
      }.also {
          view.startAnimation(it)
      }
}

九、scale动画（缩放动画）

1.xml创建，先创建一个资源文件

<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%"
    android:duration = "1000"
    />

• fromXScale，toXScale：从多大到多大，上面的意思是从原本的大小放大到1.5倍，Y同理。

• pivotX，pivotY：缩放的中心点的坐标。

2.在MainActivity中实现一下xml创建的方法

 private fun testScaleXml(){
      val scaleAnimation=  AnimationUtils.loadAnimation(this,R.anim.scale_anim) as ScaleAnimation
        view.startAnimation(scaleAnimation)
    }

3.代码创建scale动画，这里没有设置缩放的中心点，所以会默认以原点作为缩放点。也就是控件的左上角那个点。

private fun testScaleCode(){
    ScaleAnimation(0.8f,1.5f,0.8f,1.5f).apply {
            duration = 1000
        }.also {
            view.startAnimation(it)
        }
}

4.缩放中心点的参数类型为float，这里设置的是控件中心点为缩放点。

private fun testScaleCode(){
ScaleAnimation(0.8f,1.5f,0.8f,1.5f,0.5f*view.width,0.5f*view.height).apply {
            duration =1000
        }.also {
            view.startAnimation(it)
        }
}

5.缩放中心点的参数类型为fraction，这里是相对于自身进行缩放。

private fun testScaleCode(){
   ScaleAnimation(0.8f,1.5f,0.8f,1.5f,
            Animation.RELATIVE_TO_SELF,0.5f,
            Animation.RELATIVE_TO_SELF,0.5f).apply {
            duration =1000
            repeatCount = Animation.INFINITE
        }.also {
            view.startAnimation(it)
        }
}

十、animationSet动画

1.几个动画同时进行，综合的动画。

2.xml方式创建，先在anim中配置一下资源文件。这里设置的是旋转加缩放的动画。

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000">
    <rotate android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"/>
    <scale android:fromXScale="10%"  android:toXScale="150%"
        android:fromYScale="10%"  android:toYScale="150%"
        android:pivotX="50%" android:pivotY="50%"/>
</set>

3.然后实现一下MainActivity中的方法

 private fun testAnimationSetXml(){
        val animationSet =   AnimationUtils.loadAnimation(this,R.anim.set_anim) as AnimationSet
        view.startAnimation(animationSet)
    }

4.代码创建animationSet动画

 private fun testAnimationSetCode(){
      val scaleAnimation=  ScaleAnimation(0.1f,1.5f,0.1f,1.5f,
            Animation.RELATIVE_TO_SELF,0.5f,
            Animation.RELATIVE_TO_SELF,0.5f)

      val rotateAnimation=  RotateAnimation(0f,360f,
            Animation.RELATIVE_TO_SELF,0.5f,
            Animation.RELATIVE_TO_SELF,0.5f)

        AnimationSet(true).apply {
          addAnimation(scaleAnimation)
            addAnimation(rotateAnimation)
            duration = 1500
            view.startAnimation(this)
        }
    }