Android:仿“某音”APP 多头像跳动动画+轮播动画+心跳动画+输入框抖动动画

序言

• 仿“某音”APP 多头像跳动动画+轮播动画+心跳动画+输入框抖动动画
  GitHub源码地址：https://github.com/sange93/CoolAnimator/
  实现逻辑比较简单，主要是细微之处调整比较费时间，有需要的童鞋可以拿去用。

效果一：多头像动画

效果展示

1、跳动动画

	/*** 启动多头像跳动动画*/private fun startPetHeadJumpAnim(animSet: ArrayList<ObjectAnimator>, imageViews: ArrayList<ImageView>, handler: Handler) {for (i in imageViews.lastIndex downTo 0) {val anim = ObjectAnimator.ofFloat(imageViews[i], "translationY", 0f, -30f, 0f)animSet.add(anim)anim.duration = 600when (i) {imageViews.lastIndex - 1 -> {anim.startDelay = 200}imageViews.lastIndex - 2 -> {anim.startDelay = 400}}if (i == imageViews.lastIndex) {anim.addListener(object : Animator.AnimatorListener {override fun onAnimationRepeat(animation: Animator?) {}override fun onAnimationEnd(animation: Animator?) {handler.postDelayed({for (an in animSet) {an.start()}}, 2000)}override fun onAnimationCancel(animation: Animator?) {}override fun onAnimationStart(animation: Animator?) {}})}anim.start()}}

2、轮播动画

	/*** 启动多头像位移动画*/private fun startPetHeadAlphaAnim(animSet: ArrayList<ObjectAnimator>, imageViews: ArrayList<ImageView>, handler: Handler) {var startX = 0fvar endX = 0ffor ((i, v) in (imageViews.lastIndex downTo 0).withIndex()) {// 第4个以后,把（显示的）第一个隐藏，后两个向前移动if (i > 2) {for (j in v + 3 downTo v + 1) {val anim = when (j) {v + 3 -> {startX = animPetPositionLeft//-150fendX = animPetPositionEnd//-180fval xA = PropertyValuesHolder.ofFloat("translationX", startX, endX)val alphaA = PropertyValuesHolder.ofFloat("alpha", 1f, 0f)ObjectAnimator.ofPropertyValuesHolder(imageViews[j], xA, alphaA)}v + 2 -> {startX = animPetPositionMiddle//-80fendX = animPetPositionLeft//-150fObjectAnimator.ofFloat(imageViews[j], "translationX", startX, endX)}v + 1 -> {startX = animPetPositionRight//-10fendX = animPetPositionMiddle//-80fObjectAnimator.ofFloat(imageViews[j], "translationX", startX, endX)}else -> null}if (anim != null) {animSet.add(anim)anim.duration = 900anim.startDelay = i * 600Lanim.start()}}}// 依次显示Viewwhen (i) {0 -> {startX = animPetPositionMiddle//-80fendX = animPetPositionLeft//-150f}1 -> {startX = animPetPositionRight//-10fendX = animPetPositionMiddle//-80f}in 2..imageViews.lastIndex -> {startX = 0fendX = animPetPositionRight//-10f}}val xA = PropertyValuesHolder.ofFloat("translationX", startX, endX)val alphaA = PropertyValuesHolder.ofFloat("alpha", 0f, 1f)val anim = ObjectAnimator.ofPropertyValuesHolder(imageViews[v], xA, alphaA)animSet.add(anim)anim.duration = 900//300anim.startDelay = i * 600L// 200anim.start()if (v == 0) {anim.addListener(object : Animator.AnimatorListener {override fun onAnimationRepeat(animation: Animator?) {}override fun onAnimationEnd(animation: Animator?) {handler.postDelayed({for (view in imageViews) {view.alpha = 0f}for (an in animSet) {an.start()}}, 2000)}override fun onAnimationCancel(animation: Animator?) {}override fun onAnimationStart(animation: Animator?) {}})}}}

多头像效果的使用

	override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_head_anim)// 三个头像val image3 = arrayListOf<Int>()image3.add(R.drawable.pic_1)image3.add(R.drawable.pic_2)image3.add(R.drawable.pic_3)val animSet3 = arrayListOf<ObjectAnimator>()val handler3 = Handler()initAnim(this, rlHead3, image3, animSet3, handler3)// 五个头像val image5 = arrayListOf<Int>()image5.addAll(image3)image5.add(R.drawable.pic_4)image5.add(R.drawable.pic_5)val animSet5 = arrayListOf<ObjectAnimator>()val handler5 = Handler()initAnim(this, rlHead5, image5, animSet5, handler5)}/*** 初始化动画*/private fun initAnim(context: Context,layout: RelativeLayout,images: ArrayList<Int>,animSet: ArrayList<ObjectAnimator>,handler: Handler) {layout.removeAllViews()animSet.clear()val ivList = arrayListOf<ImageView>()val isJumpAnim = images.size <= 3for (i in images.lastIndex downTo 0) {val iv = CircleImageView(context)val width = ConvertUtils.dp2px(30f)val lp = RelativeLayout.LayoutParams(width, width)// 是否为跳动 动画if (isJumpAnim) {iv.alpha = 1fwhen (i) {0 -> iv.translationX = AnimatorUtil.animPetPositionLeft//-150f1 -> iv.translationX = AnimatorUtil.animPetPositionMiddle//-80f2 -> iv.translationX = AnimatorUtil.animPetPositionRight//-10f}} else {iv.alpha = 0f}iv.layoutParams = lpiv.scaleType = ImageView.ScaleType.CENTER_CROPiv.borderColor = ContextCompat.getColor(context, R.color.colorPrimaryDark)iv.borderWidth = ConvertUtils.dp2px(1f)iv.setImageResource(images[i])layout.addView(iv)ivList.add(iv)}AnimatorUtil.startPetHeadAnim(animSet, ivList, handler)}

如果动画用于RecycleView 列表，适配item复用机制，可以在Adapter中增加以下代码，通过handler和animSet控制动画的开启和取消。

override fun onViewAttachedToWindow(holder: MyViewHolder) {super.onViewAttachedToWindow(holder)for (anim in holder.animSet) {anim.start()// 启动动画}}override fun onViewDetachedFromWindow(holder: MyViewHolder) {clearAnimSet(holder)}override fun onViewRecycled(holder: MyViewHolder) {// 清除动画clearAnimSet(holder)super.onViewRecycled(holder)}/*** 清空动画集*/private fun clearAnimSet(holder: MyViewHolder) {holder.handler.removeCallbacksAndMessages(null)for (anim in holder.animSet) {anim.pause()}}

效果二：(单头像)心跳动画——放大&缩小

效果展示

Code

	/*** 启动放大的心跳动画*/fun startEnlargeHeart(imageView: ImageView) {val anim = imageView.animate()anim.scaleX(2.0f).scaleY(2.0f).setInterpolator(AccelerateInterpolator()).setDuration(200).setListener(object : Animator.AnimatorListener {var tag = trueoverride fun onAnimationRepeat(animation: Animator?) {}override fun onAnimationEnd(animation: Animator?) {if (tag) {anim.scaleX(1.0f).scaleY(1.0f).setInterpolator(DecelerateInterpolator()).setDuration(400).startDelay = 0} else {anim.scaleX(2.0f).scaleY(2.0f).setInterpolator(AccelerateInterpolator()).setDuration(400).startDelay = 2000}tag = !tag}override fun onAnimationCancel(animation: Animator?) {}override fun onAnimationStart(animation: Animator?) {}}).startDelay = 1000}

效果三：(输入框)抖动动画

效果展示

Code

	/*** 启动抖动提示动画（如 EditText为空时 抖动效果）*/fun startErrorAnim(view: View){view.startAnimation(AnimationUtils.loadAnimation(App.instance, R.anim.shake_anim))}

shake_anim.xml

<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"android:fromXDelta="0"android:toXDelta="10"android:duration="300"android:interpolator="@anim/cycles_anim" />

cycles_anim.xml

<?xml version="1.0" encoding="utf-8"?><cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android"android:cycles="2" />

GitHub

• 仿“某音”APP 多头像跳动动画+轮播动画+心跳动画+输入框抖动动画
  GitHub源码地址：https://github.com/sange93/CoolAnimator/