动画与过渡（一）、视图动画概述与使用

Android动画与概述主要涵盖了以下内容:

• 动画与过渡（一）、视图动画概述与使用
• 动画与过渡（二）、视图动画进阶：对Animation进行定义扩展
• 动画与过渡（三）、插值器和估值器概述与使用
• 动画与过渡（四）、使用Layout、offset、layoutParam实现位移动画
• 动画与过渡（五）、使用scrollTo、scrollBy、Scroller实现滚动动画
• 动画与过渡（六）、使用ViewDragHelper实现平滑拖动动画
• 动画与过渡（七）、为ViewGroup添加入场动画，LayoutAnimation使用概述
• 动画与过渡（八）、为Viewgroup提供删除、新增平滑动画效果，LayoutTransition使用概述
• 动画与过渡（九）、Svg动画使用概述，Vector Drawable使用，三方SVGA框架使用
• 动画与过渡（十）、Property Animation动画使用概述
• 动画与过渡（十一）、使用Fling动画移动视图，FlingAnimation动画使用概述
• 动画与过渡（十二）、使用物理弹簧动画为视图添加动画，SpringAnimation动画使用概述
• 动画与过渡（十三）、视图、Activity过渡转场动画使用概述
• 动画与过渡（十四）、Lottie动画使用概述
• 动画与过渡实战（十五）、仿今日头条栏目拖动排序效果
• 动画与过渡实战（十六）、仿IOS侧滑删除效果
• 动画与过渡实战（十七）、仿探探卡片翻牌效果

1、android坐标系 & 视图坐标系

这两个图自己懒得画了，直接从别人博客引用过来了。
https://blog.csdn.net/tst116/article/details/112979388

• Android坐标系
  
• 视图坐标系
  

2、视图动画标签和代码实现

视图动画Animation共用属性

属性名称	描述
android:duration	完成一次动画需要的执行时间
android:repeatCount	动画重复执行次数，如果取值为infinite，则无限循环
android:repeatMode	动画重复类型，如果是restart，表示表示重放，如果是reverse，则表示倒放
android:fillAfter	控制动画执行结束之后，是否保持最后的状态，为true则表示保持
android:fillBefore	控制动画执行结束之后，是否还原为初始化状态，为true则还原
android:fillEnabled	作用与android:fillBefore一致
android:interpolater	设置动画执行差值器

2-1、scale标签和ScaleAnimation

2-1-1、概述

scale标签和ScaleAnimation用来实现缩放视图动画

属性名称	描述
android:fromXScale	控件动画开始时候，在x轴缩放比例，1.0表示自身无变化，0.5表示缩小了1倍，2表示扩大了一倍
android:toXScale	动画结束时候，相对于控件自身的缩放比例
android:fromYScale	动画开始时候，在y轴相对控件自身的缩放比例
android:toYScale	动画结束时候，在y轴相对控件自身的缩放比例
android:pivotX	缩放起始点x轴坐标，支持数值、百分数、百分数p三种格式。（具体介绍见下面介绍）
android:pivotY	缩放起始点y轴坐标，支持数值、百分数、百分数p三种格式。

缩放pivot接收类型介绍：

数值：表示相对视图左上角原点坐标+上xxPx值，注意这里值是pixel。
百分数：取原点+自身宽度/高度的百分比，如果是50%，则表示自己中心点为缩放x/y轴坐标起始点。
百分比p：取父控件的自身宽度/高度百分比，加上当前控件原点，作为缩放x/y轴的坐标起始点。

2-1-2、代码实现

下面分别使用xml和代码实现一个相同的缩放效果

• 使用xml方式实现动画

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:fromXScale="0.5"
    android:fromYScale="0.5"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="5"
    android:repeatMode="reverse"
    android:toXScale="1.5"
    android:toYScale="1.5" />

在代码中调用

val animation = AnimationUtils.loadAnimation(
    this@ScaleAnimationActivity,
    R.anim.view_animation_scale
)
vScaleWithXml.startAnimation(animation)

• 使用代码方式实现动画

val scaleAnimation = ScaleAnimation(
        0.5F,
        1.5F,
        0.5F,
        1.5F,
        Animation.RELATIVE_TO_SELF,
        0.5F,
        Animation.RELATIVE_TO_SELF,
        0.5F
    )
scaleAnimation.duration = 1000
scaleAnimation.fillAfter = true
scaleAnimation.repeatCount = 5
scaleAnimation.repeatMode = ScaleAnimation.REVERSE
vScaleWithCode.startAnimation(scaleAnimation)

2-2、alpha标签和AlphaAnimation

2-2-1、概述

alpha故名思意，是用来实现透明度变化的动画

属性名称	描述
android:fromAlpha	透明度变化开始值，取值区间为0-1
android:toAlpha	透明度变化结束值，取值区间为0-1

2-2-2、代码实现

透明度变化的效果过于简单了，所以就不展示图片了（，偷个懒，做一次gif好麻烦的）

• xml方式实现

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:fromAlpha="0"
    android:repeatCount="5"
    android:repeatMode="reverse"
    android:toAlpha="1" />

代码中引用

val animation = AnimationUtils.loadAnimation(
    this@AlphaAnimationActivity,
    R.anim.view_animation_alpha
)
vAlphaWithXml.startAnimation(animation)

• 代码方式实现

val alphaAnimation = AlphaAnimation(0F, 1F)
alphaAnimation.fillAfter = true
alphaAnimation.repeatCount = 5
alphaAnimation.repeatMode = Animation.REVERSE
alphaAnimation.duration = 1000
vAlphaWithCode.startAnimation(alphaAnimation)

2-3、rotate标签和RotateAnimation

2-3-1、概述

rotate是用来实现旋转效果的动画

属性名称	描述
android:fromDegrees	动画开始的旋转角度位置，正值表示顺时针方向，负值表示逆时针方向
android:toDegrees	动画结束的旋转角度位置，正值表示顺时针方向，负值表示逆时针方向
android:pivotX	前面介绍过很多次了，不再赘述
android:pivotY	前面介绍过很多次了，不再赘述

2-3-2、代码实现

• xml方式实现

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="5"
    android:repeatMode="reverse"
    android:toDegrees="359" />

代码中调用

 val animation = AnimationUtils.loadAnimation(
  this@RotateAnimationActivity,
     R.anim.view_animation_rotate
 )
 vRotateWithXml.startAnimation(animation)

• 代码方式实现

val rotateAnimation = RotateAnimation(
    0F,
    359F,
    Animation.RELATIVE_TO_SELF,
    0.5F,
    Animation.RELATIVE_TO_SELF,
    0.5F
)
rotateAnimation.fillAfter = true
rotateAnimation.repeatCount = 5
rotateAnimation.repeatMode = Animation.REVERSE
rotateAnimation.duration = 1000
vRotateWithCode.startAnimation(rotateAnimation)

使用RotateAnimation实现的旋转，只能支持平面效果，不能支持沿X或者Y轴线进行旋转，如果需要实现沿轴线旋转效果，需要自己对Animation进行扩展实现，后续文章会专门介绍。

2-4、translate标签和TranslateAnimation

2-4-1、概述

translate是用来实现位移效果的动画

属性名称	描述
android:fromXDelta	位移起始点x坐标，可以使用三种数据，数值，百分数，百分数p（具体说明与之前scale一致）
android:toXDelta	位移结束点x坐标，可以使用三种数据，数值，百分数，百分数p（具体说明与之前scale一致）
android:fromYDelta	位移起始点y坐标，可以使用三种数据，数值，百分数，百分数p（具体说明与之前scale一致）
android:toYDelta	位移结束点y坐标，可以使用三种数据，数值，百分数，百分数p（具体说明与之前scale一致）

2-4-2、代码实现

• xml方式实现

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:fromXDelta="-100%"
    android:fromYDelta="-100%"
    android:repeatCount="5"
    android:repeatMode="reverse"
    android:toXDelta="100%"
    android:toYDelta="100%" />

在代码中调用

val animation = AnimationUtils.loadAnimation(
   this@TranslateAnimationActivity,
    R.anim.view_animation_translate
)
vTranslateWithXml.startAnimation(animation)

• 代码方式实现

 val translateAnimation = TranslateAnimation(
    Animation.RELATIVE_TO_SELF,
     -1F,
     Animation.RELATIVE_TO_SELF,
     1F,
     Animation.RELATIVE_TO_SELF,
     -1F,
     Animation.RELATIVE_TO_SELF,
     1F
 )
 translateAnimation.duration = 1000
 translateAnimation.fillAfter = true
 translateAnimation.repeatCount = 5
 translateAnimation.repeatMode = Animation.REVERSE
 vTranslateWithCode.startAnimation(translateAnimation)

上面使用的方法public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)中，需要说明下fromXType。该参数支持三个类型，分别是:

• Animation.RELATIVE_TO_SELF 相对于自己
• Animation.RELATIVE_TO_PARENT 相对于父容器
• Animation.ABSOLUTE 设置具体的数值

如果是设置了Animation.ABSOLUTE，则设置具体的位置移动pixel即可，其他参数的话，取值范围在0~1，也就0%~100% 。

2-5、set标签和AnimationSet

2-5-1、概述

对于以上的四种动画，如果想要多种组合实现一个动画效果的时候，就需要用到set进行组装。
代码拼装，要使用addAnimation方法添加。

2-5-2、代码实现

• xml方式

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:repeatMode="reverse">

    <alpha
        android:fromAlpha="0"
        android:repeatCount="5"
        android:toAlpha="1" />
    <scale
        android:fromXScale="0.5"
        android:fromYScale="0.5"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="5"
        android:toXScale="2"
        android:toYScale="2" />
    <rotate
        android:fromDegrees="359"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="5"
        android:toDegrees="0" />
    <translate
        android:fromXDelta="-100"
        android:fromYDelta="-100%"
        android:repeatCount="5"
        android:toXDelta="100%"
        android:toYDelta="100%" />
set>

代码调用

val animation =
    AnimationUtils.loadAnimation(this@AnimationSetActivity, R.anim.view_animation_set)
vSetWithXml.startAnimation(animation)

• 代码方式

val animatorSet = AnimationSet(true)
animatorSet.fillAfter = true
animatorSet.duration = 1000
val alphaAnimation = AlphaAnimation(0F, 1F)
alphaAnimation.repeatCount = 5
alphaAnimation.repeatMode = Animation.REVERSE
animatorSet.addAnimation(alphaAnimation)
val scaleAnimation = ScaleAnimation(
    0.5F,
    2F,
    0.5F,
    2F,
    Animation.RELATIVE_TO_SELF,
    0.5F,
    Animation.RELATIVE_TO_SELF,
    0.5F
)
scaleAnimation.repeatCount = 5
scaleAnimation.repeatMode = Animation.REVERSE
animatorSet.addAnimation(scaleAnimation)
val rotateAnimation = RotateAnimation(
    0F,
    359F,
    Animation.RELATIVE_TO_SELF,
    0.5F,
    Animation.RELATIVE_TO_SELF,
    0.5F
)
rotateAnimation.repeatCount = 5
rotateAnimation.repeatMode = Animation.REVERSE
animatorSet.addAnimation(rotateAnimation)
val translateAnimation = TranslateAnimation(
    Animation.RELATIVE_TO_SELF,
    -1F,
    Animation.RELATIVE_TO_SELF,
    1F,
    Animation.RELATIVE_TO_SELF,
    -1F,
    Animation.RELATIVE_TO_SELF,
    1F
)
translateAnimation.repeatCount = 5
translateAnimation.repeatMode = Animation.REVERSE
animatorSet.addAnimation(translateAnimation)
vSetWithCode.startAnimation(animatorSet)

需要注意的一点是，使用AnimationSet设置的animatorSet.repeatMode = 5是没有作用的，需要对于动画单独设置才能生效。