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.animationimport 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 = 0private var layoutHeight = 0/*** 鲜花宽高*/private var ivWidth = 0fprivate var ivHeight = 0fprivate var random = java.util.Random()private var layoutParams: LayoutParamsconstructor(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 = layoutParamsaddView(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 = 300allAnimator.playSequentially(initAnimator, constructBezierAnimator(ivFlower))allAnimator.addListener(object : AnimatorListenerAdapter() {override fun onAnimationEnd(animation: Animator?) {//动画执行完毕，移除鲜花viewremoveView(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 = 3000bezierAnimator.addUpdateListener {val point = it.animatedValue as PointF//设置三阶贝塞尔曲线获取的数据，不断移动鲜花的位置ivFlower.x = point.xivFlower.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 * tpoint.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 * treturn point}}
}

总结

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

结语

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