前言
本文参考辉哥的贝塞尔曲线 - 花束直播点赞效果,是对三阶贝塞尔曲线
和对属性动画
的运用,十分适合学习自定义View。
最终效果
实现思路
- 刚开始,爱心位于整个View的最底部中间位置,我们可以继承
RelativeLayout
并在其底部中间位置添加ImageView
,设置ImageView
为爱心图片即可; - 爱心生成时伴随着透明度和放大动画,这个比较简单,通过属性动画实现即可;
- 然后爱心上升的运动轨迹整体是一个
三阶的贝塞尔曲线
,对于三阶贝塞尔曲线
我们知道存在起始位置p0
、终止位置p3
以及两个控制点
:p1
以及p2
,如下图:
我们只要计算出p0
、p1
、p2
、p3
的坐标即可绘制出爱心上升轨迹
;各个点坐标如图上,其中layoutWidth
、layoutHeight
为整体布局的宽高,ivWidth
、ivHeight
为爱心背景图片的宽高;- 对于
p0
点,取爱心背景对应的左上角坐标,横坐标为layoutWidth / 2 - ivWidth / 2
,纵坐标为layoutHeight - ivHeight
; - 对于
p1
点,横坐标为可以取layoutWidth任意值 - ivWidth
,纵坐标对应区间应该为【layoutHeight/2,layoutHeight】
; - 对于
p2
点,横坐标为可以取layoutWidth任意值 - ivWidth
,纵坐标对应区间应该为【0,layoutHeight/2】
; - 对于
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中三阶贝塞尔的使用方式
,同时对属性动画的使用有了进一步的认知。
结语
如果以上文章对您有一点点帮助,希望您不要吝啬的点个赞加个关注,您每一次小小的举动都是我坚持写作的不懈动力!ღ( ´・ᴗ・` )