自定义控件开发入门与实战(第2章 视图动画)

第二章 视图动画

1. 概述

   • View Animation【视图动画】（Tween Animation(补间动画) Frame Animation(逐帧动画)）

   • Property Animation【属性动画】(ValueAnimator ObjectAnimator)

2. 视图动画标签

   1. 实战

      1. 动画文件放在res/anim文件夹下

         

          

          

          

          

         <?xml version="1.0" encoding="utf-8"?>
         <scale xmlns:android="http://schemas.android.com/apk/res/android"
             android:fromXScale="0"
             android:toXScale="1"
             android:fromYScale="0"
             android:toYScale="1"
             android:duration="700"/>

      2. 使用动画文件

         val loadAnimation1 = AnimationUtils.loadAnimation(this, R.anim.scale_anim)
         img.startAnimation(loadAnimation)

   2. Scale标签

      android:fromXScale   动画起始时，X轴方向上的缩放
      android:toXScale     动画结束时，X轴方向上的缩放
      android:fromYScale   动画起始时，Y轴方向上的缩放
      android:toYScale     动画结束时，Y轴方向上的缩放
      android:pivotX       缩放起始点X轴方向上坐标
      android:pivotY       缩放起始点X轴方向上坐标

   3. Animation继承属性

      android:duration:       动画持续时间
      android:fillAfter:      动画结束时，是否保持动画结束时的状态
      android:fillBefore:     动画结束时，是否还原到初始化状态
      android:fillEnabled:    与fillBefore效果相同
      android:repeatCount:    动画重复次数
      android:repeatMode:     动画重复类型
      android:interpolator:   设定插值器

   4. Alpha标签

      android:fromAlpha:    动画开始时透明度
      android:toAlpha:      动画结束时透明度

   5. Rotate标签

      android:fromDegrees:    动画初始状态角度位置
      android:pivotX:         旋转中心点X轴坐标
      android:pivotY:         旋转中心点Y轴坐标
      android:toDegrees:      旋转角度

   6. Translate标签

      android:fromXDelta:     起始点X轴坐标 
      android:toXDelta:       起始点Y轴坐标
      android:fromYDelta:     终点X轴坐标
      android:toYDelta:       终点Y轴坐标

   7. Set标签

      set标签时一个容器标签，用于定义动画集。

3. 视图动画的代码实现

   1. ScaleAnimation

      val scaleAnimation = ScaleAnimation(0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f)

   2. AlphaAnimation

      val alphaAnimation = AlphaAnimation(0f, 1f)

   3. RotateAnimation

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

   4. TranslateAnimation

      val translateAnimation = TranslateAnimation(Animation.ABSOLUTE, 100f, Animation.ABSOLUTE, 100f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f)

   5. AnimationSet

      val animationSet = AnimationSet(true)
      animationSet.addAnimation(scaleAnimation)
      animationSet.addAnimation(alphaAnimation)
      animationSet.addAnimation(rotateAnimation)

   6. Animation

      • void cancel() 取消动画

      • void reset() 控件重置到动画开始前状态

      • void setAnimationListener(Animation.AnimationListener listener)

        设置动画监听

4. 插值器初探

   1. 实战

      • XML中使用

        <scale xmlns:android="http://schemas.android.com/apk/res/android"
            ......
            android:interpolator="@android:anim/linear_interpolator"/>

      • 代码中使用

        val scaleAnimation = ScaleAnimation(
                    0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f
                )
        scaleAnimation.interpolator = LinearInterpolator()

   2. 简介

      // 加速
      AccelerateInterpolator()
      ​
      // 减速
      DecelerateInterpolator()
      ​
      // 线性
      LinearInterpolator()
      ​
      // 弹跳
      BounceInterpolator()
      ​
      // 初始偏移
      AnticipateInterpolator()
      ​
      // 结束偏移
      OvershootInterpolator()
      ​
      // 初始与结束偏移
      AnticipateOvershootInterpolator()
      ​
      // 循环插值器
      CycleInterpolator(1f)

5. 帧动画

   1. XML实战

      1. 在drawable下添加帧动画所需的图片

      2. 定义XML动画文件

         <?xml version="1.0" encoding="UTF-8"?>
         <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
             android:oneshot="false">
             <item android:drawable="@drawable/list_icon_gif_playing1" android:duration="60"/>
             <item android:drawable="@drawable/list_icon_gif_playing2" android:duration="60"/>
             <item android:drawable="@drawable/list_icon_gif_playing3" android:duration="60"/>
             .........
         </animation-list>

      3. 设置ImageView

         <ImageView
             android:id="@+id/imageView2"
             .......
             android:src="@drawable/playing_ani"/>

      4. 开始动画

         val animationDrawable = img.drawable as AnimationDrawable
         animationDrawable.start()

   2. 代码实战

      val image = findViewById<ImageView>(R.id.imageView2)
      val anim = AnimationDrawable()
      for (i in 1..14) {
          val id = resources.getIdentifier("list_icon_gif_playing$i", "drawable", packageName)
          val drawable = resources.getDrawable(id)
          anim.addFrame(drawable, 60)
      }
      anim.isOneShot = false
      image.setBackgroundDrawable(anim)
      anim.start()