效果展示
原理分析
抛物线效果最主要的难点和原理在于贝塞尔曲线动画的生成，我们通过图片主要讲解贝塞尔曲线动画，这里用到的是二级贝塞尔曲线
1、需要找到贝塞尔曲线的三个点，开启点、结束点、控制点
2、通过二级贝塞尔曲线的公式计算，获取贝塞尔曲线的轨迹路径点
3、通过设置点赞图片X，Y坐标，从而形成点赞的效果
实现步骤
1、初始化变量
class Bezier2Layout : RelativeLayout, View.OnClickListener {private var startPoint = Point(0, 0)private var endPoint = Point(0, 0)private var controlPoint = Point(0, 0)private var currentPoint = Point(0, 0)private var valueAnimator: ValueAnimator? = nullprivate var imageView: ImageView? = nullprivate var layoutParams: RelativeLayout.LayoutParams =RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)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) {initView()initPoint()setOnClickListener(this)}/*** 初始化视图*/private fun initView() {imageView = ImageView(context)imageView?.layoutParams = layoutParamsimageView?.visibility = View.INVISIBLEimageView?.setBackgroundResource(R.drawable.christmas05)addView(imageView)}/*** 初始化三个点*/fun initPoint() {this.startPoint = Point(0, 0)this.endPoint = Point(dp2px(context, 200f), dp2px(context, 200f))this.controlPoint = Point(dp2px(context, 100f), 0)}override fun onDetachedFromWindow() {super.onDetachedFromWindow()valueAnimator?.cancel()}/*** 点击开始动画*/override fun onClick(v: View?) {startAnimation()}fun dp2px(context: Context, dpVal: Float): Int {return TypedValue.applyDimension(PLEX_UNIT_DIP,dpVal, context.resources.displayMetrics).toInt()}}
2、点赞效果的实现
fun startAnimation() {valueAnimator?.cancel()valueAnimator = ValueAnimator.ofObject(BezierEvaluator(controlPoint), startPoint, endPoint).apply {addUpdateListener {currentPoint = it.animatedValue as PointimageView?.x = currentPoint.x.toFloat()imageView?.y = currentPoint.y.toFloat()}addListener(object : Animator.AnimatorListener {override fun onAnimationRepeat(animation: Animator?) {}override fun onAnimationEnd(animation: Animator?) {imageView?.visibility = View.INVISIBLE}override fun onAnimationCancel(animation: Animator?) {imageView?.visibility = View.INVISIBLE}override fun onAnimationStart(animation: Animator?) {imageView?.visibility = View.VISIBLE}})interpolator = AccelerateInterpolator()duration = 1000start()}}
3、贝塞尔曲线动画
它需要一个估值器，不断的计算它的运行轨迹，从起始点到终点开始计算，当中也一个支撑点进行辅助计算，这些都是由贝塞尔曲线的公式所决定的
open class BezierEvaluator : TypeEvaluator<Point> {var controlPoint: Pointconstructor(controlPoint: Point) {this.controlPoint = controlPoint}override fun evaluate(t: Float, startValue: Point, endValue: Point): Point {var x = (1 - t) * (1 - t) * startValue.x + 2 * t * (1 - t) * controlPoint.x + t * t * endValue.xvar y = (1 - t) * (1 - t) * startValue.y + 2 * t * (1 - t) * controlPoint.y + t * t * endValue.yreturn Point(x.toInt(), y.toInt())}}
在不断的计算过程中，我们就可以一直获取它的轨迹点，从而执行我们的属性动画，实现贝塞尔曲线动画
addUpdateListener {currentPoint = it.animatedValue as PointimageView?.x = currentPoint.x.toFloat()imageView?.y = currentPoint.y.toFloat()}
5、View的使用
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><com.example.test.customView.Bezier2Layoutandroid:layout_width="match_parent"android:layout_height="match_parent" /></RelativeLayout>
