效果展示
原理分析
抛物线效果最主要的难点和原理在于贝塞尔曲线动画的生成,我们通过图片主要讲解贝塞尔曲线动画,这里用到的是二级贝塞尔曲线
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<Point> {
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的使用
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.test.customView.Bezier2Layout
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>