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

最新推荐文章于 2025-04-02 07:51:43 发布

两块三刀

最新推荐文章于 2025-04-02 07:51:43 发布

阅读量3.4k

点赞数 3

分类专栏： Android进阶文章标签：头像动画跳动动画心跳动画抖动动画

本文链接：https://blog.youkuaiyun.com/sange77/article/details/102597074

版权

Android进阶专栏收录该内容

16 篇文章

订阅专栏

文章目录

序言
效果一：多头像动画
效果二：(单头像)心跳动画——放大&缩小
- 效果展示
- Code
效果三：(输入框)抖动动画
- 效果展示
- Code
GitHub

序言

仿“某音”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 = 600
            when (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 = 0f
        var endX = 0f
        for ((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//-150f
                            endX = animPetPositionEnd//-180f
                            val xA = PropertyValuesHolder.ofFloat("translationX", startX, endX)
                            val alphaA = PropertyValuesHolder.ofFloat("alpha", 1f, 0f)
                            ObjectAnimator.ofPropertyValuesHolder(imageViews[j], xA, alphaA)
                        }
                        v + 2 -> {
                            startX = animPetPositionMiddle//-80f
                            endX = animPetPositionLeft//-150f
                            ObjectAnimator.ofFloat(imageViews[j], "translationX", startX, endX)
                        }
                        v + 1 -> {
                            startX = animPetPositionRight//-10f
                            endX = animPetPositionMiddle//-80f
                            ObjectAnimator.ofFloat(imageViews[j], "translationX", startX, endX)
                        }
                        else -> null
                    }
                    if (anim != null) {
                        animSet.add(anim)
                        anim.duration = 900
                        anim.startDelay = i * 600L
                        anim.start()
                    }
                }
            }
            // 依次显示View
            when (i) {
                0 -> {
                    startX = animPetPositionMiddle//-80f
                    endX = animPetPositionLeft//-150f
                }
                1 -> {
                    startX = animPetPositionRight//-10f
                    endX = animPetPositionMiddle//-80f
                }
                in 2..imageViews.lastIndex -> {
                    startX = 0f
                    endX = 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//300
            anim.startDelay = i * 600L// 200
            anim.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 <= 3
        for (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 = 1f
                when (i) {
                    0 -> iv.translationX = AnimatorUtil.animPetPositionLeft//-150f
                    1 -> iv.translationX = AnimatorUtil.animPetPositionMiddle//-80f
                    2 -> iv.translationX = AnimatorUtil.animPetPositionRight//-10f
                }
            } else {
                iv.alpha = 0f
            }
            iv.layoutParams = lp
            iv.scaleType = ImageView.ScaleType.CENTER_CROP
            iv.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 = true
                    override 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/