效果展示

原理分析

抛物线效果最主要的难点和原理在于贝塞尔曲线动画的生成，我们通过图片主要讲解贝塞尔曲线动画，这里用到的是二级贝塞尔曲线

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? = null

private var imageView: ImageView? = null

private 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 = layoutParams

imageView?.visibility = View.INVISIBLE

imageView?.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(TypedValue.COMPLEX_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 Point

imageView?.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 = 1000

start()

}

}

3、贝塞尔曲线动画

它需要一个估值器，不断的计算它的运行轨迹，从起始点到终点开始计算，当中也一个支撑点进行辅助计算，这些都是由贝塞尔曲线的公式所决定的

open class BezierEvaluator : TypeEvaluator {

var controlPoint: Point

constructor(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.x

var y = (1 - t) * (1 - t) * startValue.y + 2 * t * (1 - t) * controlPoint.y + t * t * endValue.y

return Point(x.toInt(), y.toInt())

}

}

在不断的计算过程中，我们就可以一直获取它的轨迹点，从而执行我们的属性动画，实现贝塞尔曲线动画

addUpdateListener {

currentPoint = it.animatedValue as Point

imageView?.x = currentPoint.x.toFloat()

imageView?.y = currentPoint.y.toFloat()

}

5、View的使用

android:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="match_parent" />

标签：自定义,Point,贝塞尔,var,context,fun,imageView,Android,View

来源： https://blog.csdn.net/qq_30379689/article/details/97937220