利用Android實現(xiàn)一種點贊動畫效果的全過程

更新時間：2022年12月06日 10:22:30 作者：ChenYhong

最近做項目需要實現(xiàn)點贊動畫,下面這篇文章主要給大家介紹了關(guān)于利用Android實現(xiàn)一種點贊動畫效果的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

最近有個需求，需要仿照公司的H5實現(xiàn)一個游戲助手，其中一個點贊的按鈕有動畫效果，如下圖:

分析一下這個動畫，點擊按鈕后，拇指首先有個縮放的效果，然后有5個拇指朝不同的方向移動，其中部分有放大的效果。

點擊后的縮放效果

本文通過ScaleAnimation 實現(xiàn)縮放效果，代碼如下：

private fun playThumbUpScaleAnimator() {
    // x、y軸方向都從1倍放大到2倍，以控件的中心為原點進行縮放
    ScaleAnimation(1f, 2f, 1f, 2f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f).run {
        // 先取消控件當(dāng)前的動畫效果（重復(fù)點擊時）
        view.clearAnimation()
        // 設(shè)置動畫的持續(xù)時間
        duration = 300
        // 開始播放動畫
        view.startAnimation(this)
    }
}

拇指的散開效果

有5個拇指分別往不同的方向移動，本文通過動態(tài)添加View，并對View設(shè)置動畫來實現(xiàn)。可以看到在移動的同時還有縮放的效果，所以需要同時播放幾個動畫。

本文通過ValueAnimator和AnimatorSet來實現(xiàn)該效果，代碼如圖：

// 此數(shù)組控制動畫的效果
// 第一個參數(shù)控制X軸移動距離
// 第二個參數(shù)控制Y軸移動距離
// 第三個參數(shù)控制縮放的倍數(shù)（基于原大?。?
val animatorConfig: ArrayList<ArrayList<Float>> = arrayListOf(
    arrayListOf(-160f, 150f, 1f),
    arrayListOf(80f, 130f, 1.1f),
    arrayListOf(-120f, -170f, 1.3f),
    arrayListOf(80f, -130f, 1f),
    arrayListOf(-20f, -80f, 0.8f))

private fun playDiffusionAnimator() {
    for (index in 0 until 5) {
        binding.root.run {
            if (this is ViewGroup) {
                // 創(chuàng)建控件
                val ivThumbUp = AppCompatImageView(context)
                ivThumbUp.setImageResource(R.drawable.icon_thumb_up)
                // 設(shè)置與原控件一樣的大小
                ivThumbUp.layoutParams = FrameLayout.LayoutParams(DensityUtil.dp2Px(25), DensityUtil.dp2Px(25))
                // 先設(shè)置為全透明
                ivThumbUp.alpha = 0f
                addView(ivThumbUp)
                // 設(shè)置與原控件一樣的位置
                ivThumbUp.x = binding.ivThumbUp.x
                ivThumbUp.y = binding.ivThumbUp.y
                AnimatorSet().apply {
                    // 設(shè)置動畫集開始播放前的延遲
                    startDelay = 330L + index * 50L
                    // 設(shè)置動畫監(jiān)聽
                    addListener(object : Animator.AnimatorListener {
                        override fun onAnimationStart(animation: Animator) {
                            // 開始播放時把控件設(shè)置為不透明
                            ivThumbUp.alpha = 1f
                        }

                        override fun onAnimationEnd(animation: Animator) {
                            // 播放結(jié)束后再次設(shè)置為透明，并從根布局中移除
                            ivThumbUp.alpha = 0f
                            ivThumbUp.clearAnimation()
                            ivThumbUp.post { removeView(ivThumbUp) }
                        }

                        override fun onAnimationCancel(animation: Animator) {}

                        override fun onAnimationRepeat(animation: Animator) {}
                    })
                    // 設(shè)置三個動畫同時播放
                    playTogether(
                        // 縮放動畫
                        ValueAnimator.ofFloat(1f, animatorConfig[index][2]).apply {
                            duration = 700
                            // 設(shè)置插值器，速度一開始快，快結(jié)束時減慢
                            interpolator = DecelerateInterpolator()
                            addUpdateListener { values ->
                                 (values.animatedValue as Float).let { value ->
                                    ivThumbUp.scaleX = value
                                    ivThumbUp.scaleY = value
                                }
                            }
                        },
                        // X軸的移動動畫
                        ValueAnimator.ofFloat(ivThumbUp.x, ivThumbUp.x + animatorConfig[index][0]).apply {
                            duration = 700
                            interpolator = DecelerateInterpolator()
                            addUpdateListener { values ->
                                ivThumbUp.x = values.animatedValue as Float
                            }
                        },
                        // Y軸的移動動畫
                        ValueAnimator.ofFloat(ivThumbUp.y, ivThumbUp.y + animatorConfig[index][1]).apply {
                            duration = 700
                            interpolator = DecelerateInterpolator()
                            addUpdateListener { values ->
                                ivThumbUp.y = values.animatedValue as Float
                            }
                        })
                }.start()
            }
        }
    }
}

示例

整合之后做了個示例Demo，完整代碼如下：

class AnimatorSetExampleActivity : BaseGestureDetectorActivity() {

    private lateinit var binding: LayoutAnimatorsetExampleActivityBinding

    private val animatorConfig: ArrayList<java.util.ArrayList<Float>> = arrayListOf(
        arrayListOf(-160f, 150f, 1f),
        arrayListOf(80f, 130f, 1.1f),
        arrayListOf(-120f, -170f, 1.3f),
        arrayListOf(80f, -130f, 1f),
        arrayListOf(-20f, -80f, 0.8f))


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.layout_animatorset_example_activity)
        binding.ivThumbUp.setOnClickListener {
            playThumbUpScaleAnimator()
            playDiffusionAnimator()
        }
    }

    private fun playThumbUpScaleAnimator() {
        // x，y軸方向都從1倍放大到2倍，以控件的中心為原點進行縮放
        ScaleAnimation(1f, 2f, 1f, 2f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f).run {
            // 先取消控件當(dāng)前的動畫效果（重復(fù)點擊時）
            binding.ivThumbUp.clearAnimation()
            // 設(shè)置動畫的持續(xù)時間
            duration = 300
            // 開始播放動畫
            binding.ivThumbUp.startAnimation(this)
        }
    }

    private fun playDiffusionAnimator() {
        for (index in 0 until 5) {
            binding.root.run {
                if (this is ViewGroup) {
                    // 創(chuàng)建控件
                    val ivThumbUp = AppCompatImageView(context)
                    ivThumbUp.setImageResource(R.drawable.icon_thumb_up)
                    // 設(shè)置與原控件一樣的大小
                    ivThumbUp.layoutParams = FrameLayout.LayoutParams(DensityUtil.dp2Px(25), DensityUtil.dp2Px(25))
                    // 先設(shè)置為全透明
                    ivThumbUp.alpha = 0f
                    addView(ivThumbUp)
                    // 設(shè)置與原控件一樣的位置
                    ivThumbUp.x = binding.ivThumbUp.x
                    ivThumbUp.y = binding.ivThumbUp.y
                    AnimatorSet().apply {
                        // 設(shè)置動畫集開始播放前的延遲
                        startDelay = 330L + index * 50L
                        // 設(shè)置動畫監(jiān)聽
                        addListener(object : Animator.AnimatorListener {
                            override fun onAnimationStart(animation: Animator) {
                                // 開始播放時把控件設(shè)置為不透明
                                ivThumbUp.alpha = 1f
                            }

                            override fun onAnimationEnd(animation: Animator) {
                                // 播放結(jié)束后再次設(shè)置為透明，并從根布局中移除
                                ivThumbUp.alpha = 0f
                                ivThumbUp.clearAnimation()
                                ivThumbUp.post { removeView(ivThumbUp) }
                            }

                            override fun onAnimationCancel(animation: Animator) {}

                            override fun onAnimationRepeat(animation: Animator) {}
                        })
                        // 設(shè)置三個動畫同時播放
                        playTogether(
                            // 縮放動畫
                            ValueAnimator.ofFloat(1f, animatorConfig[index][2]).apply {
                                duration = 700
                                // 設(shè)置插值器，速度一開始快，快結(jié)束時減緩
                                interpolator = DecelerateInterpolator()
                                addUpdateListener { values ->
                                    (values.animatedValue as Float).let { value ->
                                        ivThumbUp.scaleX = value
                                        ivThumbUp.scaleY = value
                                    }
                                }
                            },
                            // Y軸的移動動畫
                            ValueAnimator.ofFloat(ivThumbUp.x, ivThumbUp.x + animatorConfig[index][0]).apply {
                                duration = 700
                                interpolator = DecelerateInterpolator()
                                addUpdateListener { values ->
                                    ivThumbUp.x = values.animatedValue as Float
                                }
                            },
                            // X軸的移動動畫
                            ValueAnimator.ofFloat(ivThumbUp.y, ivThumbUp.y + animatorConfig[index][1]).apply {
                                duration = 700
                                interpolator = DecelerateInterpolator()
                                addUpdateListener { values ->
                                    ivThumbUp.y = values.animatedValue as Float
                                }
                            })
                    }.start()
                }
            }
        }
    }
}

效果如圖：