You have to believe in yourself. That's the secret of success.

之前的QQ版本里面有个大表情的动画很炫酷，之前就想着怎么实现的。最近看了DynamicAnimation，发现利用它很容易实现类似效果，自己最近也在看Kotlin，因此就用Kotlin写个demo练练手。

实现效果

等我实现了效果，发现QQ已经把该功能去掉了T_T。原版的效果看不到了，直接放我实现的效果。

在这里插入图片描述

实现原理

窗口的左右抖动效果

借助SpringAnimation 可以实现，顾名思义该动画库能实现弹簧般的抖动效果。与弹簧相关的两个重要物理属性分别是Damping ratio(阻尼比)和Stiffness(刚性)。

Damping ratio(阻尼比)

阻尼比描述了弹簧振荡过程中逐渐减小的速度。 通过阻尼比，可以调整振荡从一次反弹到下一次反弹的衰减速度。

官方用法示例：

findViewById(R.id.imageView).also { img ->

SpringAnimation(img, DynamicAnimation.TRANSLATION_Y).apply {

…

//Setting the damping ratio to create a low bouncing effect.

spring.dampingRatio = SpringForce.DAMPING_RATIO_LOW_BOUNCY

…

}

}

动画库已经提供了四种类型的阻尼比，官方也提供了相对应的效果图

DAMPING_RATIO_HIGH_BOUNCY

在这里插入图片描述

DAMPING_RATIO_MEDIUM_BOUNCY

在这里插入图片描述

DAMPING_RATIO_LOW_BOUNCY

在这里插入图片描述

DAMPING_RATIO_NO_BOUNCY

在这里插入图片描述

Stiffness(刚性)

刚性指弹簧产生形变时，产生的弹力大小。相应的系统也提供了四种值。

STIFFNESS_HIGH

STIFFNESS_MEDIUM

STIFFNESS_LOW

STIFFNESS_VERY_LOW

Stiffness的值越大，弹簧动画看起来的抖动也就越不明显，就像我们施加相同的力给粗细不同的铁丝弹簧，施加的力取消后，越粗的弹簧刚性越大，它的抖动就没有细的弹簧明显。

官方用法示例：

findViewById(R.id.imageView).also { img ->

SpringAnimation(img, DynamicAnimation.TRANSLATION_Y).apply {

…

//Setting the spring with a low stiffness.

spring.stiffness = SpringForce.STIFFNESS_LOW

…

}

}

SpringForce自定义弹簧动画属性

如果想将Damping ratio/Stiffness 应用在多个弹簧动画中，可以通过SpringForce 来设置。

SpringForce force = new SpringForce();

force.setDampingRatio(DAMPING_RATIO_LOW_BOUNCY).setStiffness(STIFFNESS_LOW);

setSpring(force);

有了上面的知识，可以很容易的实现窗口左右抖动的效果。

private fun startWindowAnimation() {

val springAnimation = createSpringAnimation(window.decorView, SpringAnimation.TRANSLATION_X);

springAnimation.start();

}

fun createSpringAnimation(view: View, property: DynamicAnimation.ViewProperty): SpringAnimation {

val animation = SpringAnimation(view, property)

animation.setStartVelocity(4000f);

val spring = SpringForce(0f)

spring.stiffness = SpringForce.STIFFNESS_MEDIUM

spring.dampingRatio = SpringForce.DAMPING_RATIO_HIGH_BOUNCY

animation.spring = spring

animation.setMinimumVisibleChange(DynamicAnimation.MIN_VISIBLE_CHANGE_PIXELS)

return animation

}

在这里插入图片描述

弹球动画

弹球动画比较麻烦点，拆分成三个步骤。

动态添加view

每点击一次button，就动态添加一个弹球view，然后在表情下落时我们添加一个变淡的动画，在动画结束时在将该view删除掉。

X轴上的动画

弹球的动画拆分成X轴跟Y轴，在分别实现以此来降低处理难度。弹球在X轴没有重力影响，只有空气阻力跟碰撞引起的速度衰减，因此很容易通过FlingAnimation动画来模拟，为了进一步简化操作，当弹球碰撞到左右屏幕边缘时，只是将速度取反，不考虑碰撞损失的速度。

FlingAnimation动画可以通过setFriction方法设置一个速度衰减因子，通过该值就可以模拟处X轴受到的空气阻力。

private fun startBallAnimation(movingView: View) {

val flingXAnimation = createFlingAnimation(movingView, DynamicAnimation.TRANSLATION_X);

flingXAnimation.addUpdateListener { animation, value, velocity ->

if (velocity > 0 && movingView.x > screenW - movingView.width) {

flingXAnimation.setStartVelocity(-Math.abs(velocity))

} else if (velocity < 0 && movingView.x < 0) {

flingXAnimation.setStartVelocity(Math.abs(velocity))

}

animation.start()

}

flingXAnimation.setFriction(0.2f)

flingXAnimation.start();

}

fun createFlingAnimation(view: View, property: DynamicAnimation.ViewProperty): FlingAnimation {

val animation = FlingAnimation(view, property)

animation.setStartVelocity(-3000f).setFriction(0.01f)

animation.setMinimumVisibleChange(DynamicAnimation.MIN_VISIBLE_CHANGE_PIXELS)

return animation

}

在这里插入图片描述

Y轴上的动画

Y轴上的动画继续分成两个部分，初次上抛时通过FlingAnimation来模拟，当弹球碰到屏幕的顶端后，转换成属性动画，先取消掉Y轴上的FlingAnimation，在通过给属性动画设置BounceInterpolator插值器来模拟，同时也设置上变淡的动画。在属性动画结束时移除掉弹球。

private fun startBallAnimation(movingView: View) {

//X轴方向的动画

val flingXAnimation = createFlingAnimation(movingView, DynamicAnimation.TRANSLATION_X);

flingXAnimation.addUpdateListener { animation, value, velocity ->

if (velocity > 0 && movingView.x > screenW - movingView.width) {

flingXAnimation.setStartVelocity(-Math.abs(velocity))

} else if (velocity < 0 && movingView.x < 0) {

flingXAnimation.setStartVelocity(Math.abs(velocity))

}

animation.start()

}

flingXAnimation.setFriction(0.2f)

flingXAnimation.start();

//Y轴方向的动画

val flingYAnimation = createFlingAnimation(movingView, DynamicAnimation.TRANSLATION_Y);

flingYAnimation.addUpdateListener { animation, value, velocity ->

if (velocity < 0 && movingView.y < 0) {

flingYAnimation.setStartVelocity(Math.abs(velocity)).setFriction(0.3f)

} else if (velocity > 0) {

flingYAnimation.cancel();

val holder1 = PropertyValuesHolder.ofFloat(View.ALPHA, 1f, 1f, 0f)

val holder2 = PropertyValuesHolder.ofFloat(

View.Y,

movingView.getY(),

(getScreenHeight(this) - 200 - movingView.height).toFloat()

)

val animator = ObjectAnimator.ofPropertyValuesHolder(movingView, holder1, holder2)

animator.setDuration(3000);

val bounceInterpolator = BounceInterpolator()

animator.setInterpolator(bounceInterpolator);

animator.addListener(object : AnimatorListenerAdapter() {

override fun onAnimationEnd(animation: Animator?) {

super.onAnimationEnd(animation)

rootView?.removeView(movingView)

}

})

animator.start()

}

}

flingYAnimation.start();

}

fun createFlingAnimation(view: View, property: DynamicAnimation.ViewProperty): FlingAnimation {

val animation = FlingAnimation(view, property)

animation.setStartVelocity(-3000f).setFriction(0.01f)

animation.setMinimumVisibleChange(DynamicAnimation.MIN_VISIBLE_CHANGE_PIXELS)

return animation

}

通过以上步骤，就实现了弹球效果。

完整代码点击这里

总结

最近刚在学习kotlin，demo代码看起来结构不太清晰，有疑问或者更好的实现方案欢迎交流。