缩放可以通过控制scaleX
和scaleY
分别在X轴和Y轴上进行缩放,如下图在X轴中进行两次两倍缩放。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9vOqlzcN-1637832535058)(https://user-gold-cdn.xitu.io/2020/6/29/172fde94ad951a0d?imageslim)]
代码如下:
tvText.setOnClickListener {
val objectAnimation =ObjectAnimator.ofFloat(tvText, “scaleX”, 1f,2f)
objectAnimation.duration=3000
objectAnimation.repeatCount=2
objectAnimation.repeatMode=ValueAnimator.REVERSE
objectAnimation.start()
}
ofFloat()
方法传入参数属性为scaleX
和scaleY
时,动态参数表示缩放的倍数。设置ObjectAnimator
对象的repeatCount
属性来控制动画执行的次数,设置为ValueAnimator.INFINITE
表示无限循环播放动画;通过repeatMode
属性设置动画重复执行的效果,取值为:ValueAnimator.RESTART
和ValueAnimator.REVERSE
。
ValueAnimator.RESTART
效果:(即每次都重头开始)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OYg6rNjU-1637832535102)(https://user-gold-cdn.xitu.io/2020/6/29/172fdf6ceb7ae6d6?imageslim)]
ValueAnimator.REVERSE
效果:(即和上一次效果反着来)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tWumD1h8-1637832535103)(https://user-gold-cdn.xitu.io/2020/6/29/172fdfa9ee28bd65?imageslim)]
4、旋转属性动画
旋转动画也比较简单,将一个View进行顺时针或逆时针旋转。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GtezVmbh-1637832535104)(https://user-gold-cdn.xitu.io/2020/6/29/172fe00c11c2cf64?imageslim)]
代码如下:
tvText.setOnClickListener {
val objectAnimation =
ObjectAnimator.ofFloat(tvText, “rotation”, 0f,180f,0f)
objectAnimation.duration=3000
objectAnimation.start()
}
ofFloat()
方法的可变长参数,如果后者的值大于前者,那么顺时针旋转,小于前者,则逆时针旋转。
三、AnimatorSet
如果想要一个动画结束后播放另外一个动画,或者同时播放,可以通过AnimatorSet
来编排。
val aAnimator=ObjectAnimator.ofInt(1)
val bAnimator=ObjectAnimator.ofInt(1)
val cAnimator=ObjectAnimator.ofInt(1)
val dAnimator=ObjectAnimator.ofInt(1)
AnimatorSet().apply {
play(aAnimator).before(bAnimator)//a 在b之前播放
play(bAnimator).with(cAnimator)//b和c同时播放动画效果
play(dAnimator).after(cAnimator)//d 在c播放结束之后播放
start()
}
或者
AnimatorSet().apply {
playSequentially(aAnimator,bAnimator,cAnimator,dAnimator) //顺序播放
start()
}
AnimatorSet().apply {
playTogether(animator,bAnimator,cAnimator,dAnimator) //同时播放
start()
}
另有:
AnimatorSet ().apply {
play(aAnimator).after(1000) //1秒后播放a动画
start()
}
四、ViewPropertyAnimator
如果只是针对View对象的特定属性同时播放动画,我们也可以采用ViewPropertyAnimator
。
例如:
tvText.animate().translationX(100f).translationY(100f).start()
支持属性:
- translationX、translationY、translationZ
- x、y、z
- alpha
- scaleX、scaleY
注意到ViewPropertyAnimator
对象具有property(Float)
和propertyBy(Float)
方法,其中property(Float)
是指属性变化多少(可以理解一次有效),而propertyBy(Float)
每次变化多少(可以理解多次有效)。
举例说明:
translationX
tvText.setOnClickListener {
val animator = tvText.animate()
animator.duration=1000
animator.translationX(100f)//点击一次会向右偏移,再点击没效果
animator.start()
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-24bAhzt9-1637832535105)(https://user-gold-cdn.xitu.io/2020/7/6/17322746c2d768c8?imageslim)]
translationXBy
tvText.setOnClickListener {
val animator = tvText.animate()
animator.duration=1000
animator.translationXBy(100f)//每次点击都会向右偏移
animator.start()
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AMgwckz8-1637832535106)(https://user-gold-cdn.xitu.io/2020/7/6/17322764d03ec113?imageslim)]
五、ValueAnimator与ObjectAnimator
ValueAnimator
作为ObjectAnimator
的父类,主要动态计算目标对象属性的值,然后设置给对象属性,达到动画效果,而ObjectAnimator
则在ValueAnimator
的基础上极大地简化对目标对象的属性值的计算和添加效果,融合了 ValueAnimator 的计时引擎和值计算以及为目标对象的命名属性添加动画效果这一功能。
举个栗子,通过ValueAnimator
的工厂方法ofFloat
、ofInt
、ofArgb
、ofObject
来实现动画效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FquirRSi-1637832535106)(https://user-gold-cdn.xitu.io/2020/6/30/1730466b7456f374?imageslim)]
代码如下:
//ValueAnimator实现
tvText.setOnClickListener {
val valueAnimator = ValueAnimator.ofFloat(0f, 180f)
valueAnimator.addUpdateListener {
tvText.rotationY = it.animatedValue as Float //手动赋值
}
valueAnimator.start()
}
//ObjectAnimator实现
ObjectAnimator.ofFloat(tvText, “rotationY”, 0f, 180f).apply { start() }
从上面代码可以看出,使用ValueAnimator
实现动画,需要手动赋值给目标对象tvText
的rotationY
,而ObjectAnimator
则是自动赋值,不需要手动赋值就可以达到效果。
动画过程可以通过AnimatorUpdateListener
和AnimatorListener
来监听。
ObjectAnimator.ofFloat(tvText, “translationX”, 0f, 780f, 0f).apply {
duration=3000//完成动画所需要时间
repeatCount=ValueAnimator.INFINITE //重复次数:无限循环
repeatMode=ValueAnimator.RESTART //重复模式:重头开始
addUpdateListener { //监听值变化
tvText.translationX= it.animatedValue as Float
}
addListener(object:Animator.AnimatorListener{
override fun onAnimationRepeat(animation: Animator?) {
//动画重复
}
override fun onAnimationEnd(animation: Animator?) {
//动画结束
}
override fun onAnimationCancel(animation: Animator?) {
//动画取消
}
override fun onAnimationStart(animation: Animator?) {
//动画开始
}
})
}
动画可调用start()
方法开始,也可调用cancel()
方法取消。
那么,要正确使属性动画实现动画效果,那么目标对象应该注意什么?
- 属性必须具有
set<PropertyName>()
形式的setter
函数(采用驼峰式大小写形式),例如,如果属性名称为text
,则需要使用setText()
方法。 - 如果
ObjectAnimator
的一个工厂方法中仅为values...
参数指定了一个值,那么该参数需要提供初始值和getPropertyName()
方法。 - 属性的初始值和结束值之间必须保持类型相同。
- 可能需要在
UpdateListener
对象中调用invalidate()
方法,来刷新属性作用后的效果。
六、XML实现
本文一开始介绍位移属性动画时,有提到通过XML文件来实现动画效果,在这里进一步细讲。
在res/animator文件夹下,创建animator_translation.xml文件。XML文件有四个标签可用,要注意到propertyValuesHolder标签的Android 版本适配。
<?xml version="1.0" encoding="utf-8"?> =>AnimatorSet
=>ValueAnimator
=>ObjectAnimator
=>PropertyValuesHolder
set
标签对应代码的AnimatorSet
,只有一个属性可以设置:android:ordering
,取值:同时播放together
、顺序播放sequentially
。
animator
标签对应代码的ValueAnimator
,可以设置如下属性:
android:duration
:动画时长android:valueType
:属性类型,intType
、floatType
、colorType
、pathType
android:valueFrom
:属性初始值android:valueTo
:属性结束值android:repeatCount
:重复次数android:repeatMode
:重复模式android:interpolator
:插值器,可看下一节默认插值器。android:startOffset
:延迟,对应startOffset()
延迟多少毫秒执行
示例:
objectAnimator
属性对应代码ObjectAnimator
,由于继承自ValueAnimator
,所以属性相对多了` android:propertyName。
七、估值器与插值器
看到这里,不知道小伙伴们有没有这个疑问,属性动画是如何计算属性的值的?
这份工作由类型估值器TypeEvaluator
与时间插值器TimeInterpolator
来完成的。
插值器:根据时间流逝的百分比计算出当前属性值改变的百分比。
估值器:根据当前属性改变的百分比来计算改变后的属性值。
从它两的已定义,也可以看出它们之间的协调关系,先由插值器根据时间流逝的百分比计算出目标对象的属性改变的百分比,再由估值器根据插值器计算出来的属性改变的百分比计算出目标对象属性对应类型的值。
从估值器和插值器可以看出属性动画的工作原理,下面看看官方对工作原理的解析:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mcCzlJZH-1637832535107)(https://user-gold-cdn.xitu.io/2020/7/3/1731255307aece87?imageView2/0/w/1280/h/960/ignore-error/1)]
更多的原理可以看看链接
估值器
SDK中默认带有的估值器有: IntEvaluator
、FloatEvaluator
、ArgbEvaluator
,他们分别对应前面我们调用 ValueAnimator
对象所有对应的ofInt
、ofFloat
、ofArgb
函数的估值器,分别用在Int类型,Float,颜色值类型之间计算。而ofObject
函数则对应我们自定义类型的属性计算。
当估值器的类型不满足需求,就需要自定义类型估值器。例如我们要实现下面效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7KF5gs5B-1637832535108)(https://user-gold-cdn.xitu.io/2020/7/3/1731287bb334a8fd?imageslim)]
这个效果可以通过AnimatorSet来实现,但我们这里采用自定义TypeEvaluator来实现TextView从屏幕左上角斜线滑到屏幕右下角。
- 定义Point类,我们操作的对象。
data class Point(var x: Float, var y: Float)
- 定义
PointEvaluator
估值器,继承自TypeEvaluator
,泛型参数为Point
类型。通过实现evaluate()
方法,可以实现很多复制的动画效果,我们这里实现上面简单算法。
class PointEvaluator : TypeEvaluator {
/**
- 根据插值器计算出当前对象的属性的百分比fraction,估算去属性当前具体的值
- @param fraction 属性改变的百分比
- @param startValue 对象开始的位置,例如这里点坐标开始位置:屏幕左上角位置
- @param endValue 对象结束的位置,例如这里点坐标结束的位置:屏幕右下角位置
*/
override fun evaluate(fraction: Float, startValue: Point?, endValue: Point?): Point {
if (startValue == null || endValue == null) {
return Point(0f, 0f)
}
return Point(
fraction * (endValue.x - startValue.x),
fraction * (endValue.y - startValue.y)
)
}
}
- 使用
val animator= ValueAnimator.ofObject(
PointEvaluator(),
Point(0f, 0f),//动画开始属性值
Point(
ScreenUtils.getScreenWidth(this).toFloat(),
ScreenUtils.getScreenHeight(this).toFloat()
)//动画结束值
)
animator.addUpdateListener {//手动更新TextView的x和y 属性
val point = it.animatedValue as Point
tvText.x = point.x
tvText.y = point.y
logError(“point:${point}”)
}
animator.duration = 5000
btnStart.setOnClickListener {
animator.start()
}
一个简单的自定义估值器就算完成了。数学学的好,任何复杂效果都不是问题。
插值器
TypeEvaluator
对象的evaluate()
方法的fraction
参数就是插值器计算得来,SDK中默认的时间插值器有:
- LinearInterpolator 线性(匀速)
- AccelerateInterpolator 持续加速
- DecelerateInterpolator 持续减速
- AccelerateDecelerateInterpolator 先加速后减速
- OvershootInterpolator 结束时回弹一下
- AnticipateInterpolator 开始回拉一下
- BounceInterpolator 结束时Q弹一下
- CycleInterpolator 来回循环
看看效果:
LinearInterpolator
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1CzqSKHD-1637832535109)(https://user-gold-cdn.xitu.io/2020/7/6/1732203721262352?imageslim)]
AccelerateInterpolator
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-unT5YzQh-1637832535109)(https://user-gold-cdn.xitu.io/2020/7/6/1732205f5fa67f1e?imageslim)]
DecelerateInterpolator
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TEu0QWH3-1637832535110)(https://user-gold-cdn.xitu.io/2020/7/6/1732206dfc7c9614?imageslim)]
AccelerateDecelerateInterpolator
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HfvmxjiY-1637832535110)(https://user-gold-cdn.xitu.io/2020/7/6/17322087594bf864?imageslim)]
OvershootInterpolator
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l2D3eMCW-1637832535111)(https://user-gold-cdn.xitu.io/2020/7/6/173220a94609485c?imageslim)]
AnticipateInterpolator
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8AlSBEGO-1637832535111)(https://user-gold-cdn.xitu.io/2020/7/6/1732209d6da31b9c?imageslim)]
BounceInterpolator
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WAYbx9Jj-1637832535112)(https://user-gold-cdn.xitu.io/2020/7/6/173220c1180e5d9d?imageslim)]
CycleInterpolator
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wWihCFsW-1637832535112)(https://user-gold-cdn.xitu.io/2020/7/6/173220df3d59503a?imageslim)]
正常情况下,默认的插值器已经够用,如果自己数学厉害,想显摆一下,也是通过实现TimeInterpolator
接口的getInterpolation()
自定义的。
/**
- A time interpolator defines the rate of change of an animation. This allows animations
- to have non-linear motion, such as acceleration and deceleration.
*/
public interface TimeInterpolator {
/**
- Maps a value representing the elapsed fraction of an animation to a value that represents
- the interpolated fraction. This interpolated value is then multiplied by the change in
- value of an animation to derive the animated value at the current elapsed animation time.
- @param input A value between 0 and 1.0 indicating our current point
-
in the animation where 0 represents the start and 1.0 represents
-
the end
- @return The interpolation val
《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享
ue. This value can be more than 1.0 for
-
interpolators which overshoot their targets, or less than 0 for
-
interpolators that undershoot their targets.
*/
in the animation where 0 represents the start and 1.0 represents
-
the end
- @return The interpolation val
《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享
ue. This value can be more than 1.0 for
-
interpolators which overshoot their targets, or less than 0 for
-
interpolators that undershoot their targets.
*/