Android自定义View之点赞撒花（三阶贝塞尔曲线应用）

前言

本文参考辉哥的贝塞尔曲线 - 花束直播点赞效果，是对三阶贝塞尔曲线和对属性动画的运用，十分适合学习自定义View。

最终效果

实现思路

• 刚开始，爱心位于整个View的最底部中间位置，我们可以继承RelativeLayout并在其底部中间位置添加ImageView，设置ImageView为爱心图片即可；
• 爱心生成时伴随着透明度和放大动画，这个比较简单，通过属性动画实现即可；
• 然后爱心上升的运动轨迹整体是一个三阶的贝塞尔曲线，对于三阶贝塞尔曲线我们知道存在起始位置p0、终止位置p3以及两个控制点：p1以及p2，如下图：
  
  我们只要计算出p0、p1、p2、p3的坐标即可绘制出爱心上升轨迹；各个点坐标如图上，其中layoutWidth、layoutHeight为整体布局的宽高，ivWidth、ivHeight为爱心背景图片的宽高；
  1. 对于p0点，取爱心背景对应的左上角坐标，横坐标为layoutWidth / 2 - ivWidth / 2,纵坐标为layoutHeight - ivHeight;
  2. 对于p1点，横坐标为可以取layoutWidth任意值 - ivWidth,纵坐标对应区间应该为【layoutHeight/2,layoutHeight】;
  3. 对于p2点，横坐标为可以取layoutWidth任意值 - ivWidth,纵坐标对应区间应该为【0,layoutHeight/2】;
  4. 对于p3点，横坐标为可以取layoutWidth任意值 - ivWidth,纵坐标对应区间应该为0;
• 当我们计算出爱心上升轨迹后，不断的去更新爱心的x,y坐标，同时伴随着透明度的变化，当动画执行结束，移除此爱心，自此，整个效果便可以实现。

相关源码

自定义鲜花点赞效果FlowersLayout

package com.crystal.view.animation

import android.animation.*
import android.content.Context
import android.graphics.PointF
import android.util.AttributeSet
import android.view.ViewGroup
import android.view.animation.*
import android.widget.ImageView
import android.widget.RelativeLayout
import androidx.appcompat.content.res.AppCompatResources
import com.crystal.view.R


/**
 * 自定义鲜花点赞效果【三阶贝塞尔曲线使用】
 * on 2022/11/11
 */
class FlowersLayout : RelativeLayout {
    /**
     * 资源文件
     */
    private val imageRes = intArrayOf(R.drawable.pl_blue, R.drawable.pl_red, R.drawable.pl_yellow)

    /**
     * 差值器集合，用于贝塞尔随机设置差值器
     */
    private val interpolator = arrayListOf<Interpolator>(
        AccelerateDecelerateInterpolator(),
        AccelerateInterpolator(), DecelerateInterpolator(), LinearInterpolator()
    )

    /**
     * 布局宽高
     */
    private var layoutWidth = 0
    private var layoutHeight = 0

    /**
     * 鲜花宽高
     */
    private var ivWidth = 0f
    private var ivHeight = 0f

    private var random = java.util.Random()

    private var layoutParams: LayoutParams


    constructor(context: Context) : this(context, null)
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context, attrs, defStyleAttr
    ) {
        val drawable = AppCompatResources.getDrawable(context, R.drawable.pl_blue)!!
        ivWidth = drawable.intrinsicWidth.toFloat()
        ivHeight = drawable.intrinsicHeight.toFloat()

        layoutParams =
            LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
        layoutParams.addRule(ALIGN_PARENT_BOTTOM)
        layoutParams.addRule(CENTER_HORIZONTAL)
    }


    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        layoutWidth = MeasureSpec.getSize(widthMeasureSpec)
        layoutHeight = MeasureSpec.getSize(heightMeasureSpec)
    }

    /**
     * 添加鲜花到布局中
     */
    fun addFlower() {
        val ivFlower = ImageView(context)
        ivFlower.setImageResource(imageRes[random.nextInt(imageRes.size - 1)])
        ivFlower.layoutParams = layoutParams
        addView(ivFlower)
        //执行相关动画
        executeAnimations(ivFlower)

    }

    private fun executeAnimations(ivFlower: ImageView) {
        //所有动画集合
        val allAnimator = AnimatorSet()
        //刚添加进来的时候伴随着透明度和放大效果
        val initAnimator = AnimatorSet()
        val alphaAnimator = ObjectAnimator.ofFloat(ivFlower, "alpha", 0.3f, 1f)
        val scaleXAnimator = ObjectAnimator.ofFloat(ivFlower, "scaleX", 0.3f, 1f)
        val scaleYAnimator = ObjectAnimator.ofFloat(ivFlower, "scaleY", 0.3f, 1f)
        initAnimator.playTogether(alphaAnimator, scaleXAnimator, scaleYAnimator)
        initAnimator.duration = 300
        allAnimator.playSequentially(initAnimator, constructBezierAnimator(ivFlower))
        allAnimator.addListener(object : AnimatorListenerAdapter() {
            override fun onAnimationEnd(animation: Animator?) {
                //动画执行完毕，移除鲜花view
                removeView(ivFlower)
            }
        })
        allAnimator.start()
    }

    /**
     * 构造三阶贝塞尔曲线动画
     */
    private fun constructBezierAnimator(ivFlower: ImageView): Animator {
        //P0点为起始点，坐标应为(width/2 - iv.width/2,height - iv.height)
        val p0 = PointF(
            layoutWidth / 2 - ivWidth / 2,
            layoutHeight - ivHeight
        )

        //P1点为控制点 x坐标在屏幕范围内即可，y坐标范围应该在【height/2 ~ height】之间，这里我们均选随机数
        val p1 = PointF(
            random.nextInt(layoutWidth) - ivWidth,
            (random.nextInt(layoutHeight / 2) + layoutHeight / 2).toFloat()
        )

        //P2点为控制点 x坐标在屏幕范围内即可，y坐标范围应该在【 0 ~ height/2 】之间，这里我们均选随机数
        val p2 = PointF(
            random.nextInt(layoutWidth) - ivWidth,
            random.nextInt(layoutHeight / 2).toFloat()
        )

        //P3点为终点，x坐标在屏幕范围内，y坐标应该为0点
        val p3 = PointF(random.nextInt(layoutWidth) - ivWidth, 0f)

        val typeEvaluator = FlowersTypeEvaluator(p1, p2)
        val bezierAnimator = ObjectAnimator.ofObject(typeEvaluator, p0, p3)
        //随机选取差值器，效果更佳
        bezierAnimator.interpolator = interpolator[random.nextInt(interpolator.size - 1)]
        bezierAnimator.duration = 3000
        bezierAnimator.addUpdateListener {
            val point = it.animatedValue as PointF
            //设置三阶贝塞尔曲线获取的数据，不断移动鲜花的位置
            ivFlower.x = point.x
            ivFlower.y = point.y
            //改变鲜花的透明度
            ivFlower.alpha = (1 - it.animatedFraction + 0.2f)
        }
        return bezierAnimator
    }

    private class FlowersTypeEvaluator(val p1: PointF, val p2: PointF) : TypeEvaluator<PointF> {

        override fun evaluate(t: Float, p0: PointF, p3: PointF): PointF {
            //三阶贝塞尔曲线公式：B(t) = P0 * (1-t)^3 + 3 * P1 * t * (1-t)^2 + 3 * P2 * t^2 * (1-t) + P3 * t^3, t ∈ [0,1]
            val point = PointF()
            point.x =
                p0.x * (1 - t) * (1 - t) * (1 - t) + 3 * p1.x * t * (1 - t) * (1 - t) + 3 * p2.x * t * t * (1 - t) + p3.x * t * t * t

            point.y =
                p0.y * (1 - t) * (1 - t) * (1 - t) + 3 * p1.y * t * (1 - t) * (1 - t) + 3 * p2.y * t * t * (1 - t) + p3.y * t * t * t
            return point
        }

    }
}

总结

通过实现点赞撒花效果，了解了Android中三阶贝塞尔的使用方式，同时对属性动画的使用有了进一步的认知。

结语

如果以上文章对您有一点点帮助，希望您不要吝啬的点个赞加个关注，您每一次小小的举动都是我坚持写作的不懈动力！ღ( ´･ᴗ･` )