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
        }

    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

总结

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

结语

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