动画与过渡（一）、视图动画概述与使用
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坐标系 & 视图坐标系
- 2、视图动画标签和代码实现
-
- 2-1、scale标签和ScaleAnimation
-
- 2-1-1、概述
- 2-1-2、代码实现
- 2-2、alpha标签和AlphaAnimation
-
- 2-2-1、概述
- 2-2-2、代码实现
- 2-3、rotate标签和RotateAnimation
-
- 2-3-1、概述
- 2-3-2、代码实现
- 2-4、translate标签和TranslateAnimation
-
- 2-4-1、概述
- 2-4-2、代码实现
- 2-5、set标签和AnimationSet
-
- 2-5-1、概述
- 2-5-2、代码实现
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是没有作用的，需要对于动画单独设置才能生效。