android 抛物线轨迹,Android自定义View——贝塞尔曲线实现抛物线效果

效果展示

5411d01a0a7ef77f31addc6bea6252cc.png

原理分析

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

1、需要找到贝塞尔曲线的三个点,开启点、结束点、控制点

2、通过二级贝塞尔曲线的公式计算,获取贝塞尔曲线的轨迹路径点

3、通过设置点赞图片X,Y坐标,从而形成点赞的效果

947af44639ad557eddc62ecdfd836b21.png

实现步骤

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值