湖南广源建设工程有限公司网站,网页设计作品分析案例,开发大型网站,深圳城市更新或提速刷抖音的时候,无意间刷到 心形函数的动画,觉得很有意思, 就简单的用Android的方式实现了一下.心形函数公式公式 :心形公式X的取值范围#xff1a;[-1.81,1.81]#xff0c;该取值范围是保证正弦函数有效取值范围。我们可以通过参数 a 的取值, 来形成不同的心形轮廓, 进而形成动…刷抖音的时候,无意间刷到 心形函数的动画,觉得很有意思, 就简单的用Android的方式实现了一下.心形函数公式公式 :心形公式X的取值范围[-1.81,1.81]该取值范围是保证正弦函数有效取值范围。我们可以通过参数 a 的取值, 来形成不同的心形轮廓, 进而形成动画效果.有了以上的认识,我们就是可开始编写Android代码了.Android实现代码使用 Kotlin来编写自定义View.个人觉得 只有心还不够, 动画结束需要逐渐显示文字,来达到表白的效果.先看动画效果:heart.gif然后贴上代码实现:class HeartView(context: Context, attrs: AttributeSet) : BaseView(context, attrs),ValueAnimator.AnimatorUpdateListener, Animator.AnimatorListener {var text Hello Androidprivate val animator ValueAnimator.ofInt(3_000)private val path Path()private var heartDrawing falseprivate var heart 0.1fprivate var pct 0finit {paint.strokeWidth 4 * dppaint.textSize 30 * dppaint.textAlign Paint.Align.CENTERanimator.interpolator LinearInterpolator()animator.addUpdateListener(this)animator.addListener(this)}fun startHeart() {heartDrawing trueanimator.cancel()animator.duration 3_000animator.start()}override fun onDraw(canvas: Canvas) {path.reset()paint.color Color.REDpaint.style Paint.Style.STROKEval padding 20val halfWidth width / 2 - paddingval halfHeight height / 2// 根据X坐标,计算出Y坐标, 将其映射到屏幕坐标后,用path连接for (index in 0..(width - padding * 2)) {val x (index - halfWidth) * 1.81 / halfWidthval y -getHeartY(x, heart) * height / 6 halfHeightif (index 0) {path.moveTo(index.toFloat() padding, y.toFloat())} else {path.lineTo(index.toFloat() padding, y.toFloat())}}canvas.drawPath(path, paint)// 结束后写文字if (!heartDrawing) {val textWidth paint.measureText(text)val left width / 2f - textWidth / 2fval top height * 0.4f - 0.9f * paint.textSizecanvas.clipRect(left, top, left textWidth * pct, top 1.2f * paint.textSize)paint.color Color.WHITEpaint.style Paint.Style.FILLcanvas.drawText(text, width / 2f, height * 0.4f, paint)}}private fun getHeartY(x: Double, a: Float): Double {return Math.pow(x * x, 1.0 / 3) 0.9 * Math.sqrt(3.3 - x * x) * Math.sin(a * Math.PI * x)}override fun onAnimationUpdate(animation: ValueAnimator) {val value animation.animatedValue as Intif (value 0) returnif (heartDrawing) heart value * 0.01felse {pct value / 3000f}invalidate()}override fun onDetachedFromWindow() {animator.cancel()animator.removeAllUpdateListeners()animator.removeAllListeners()super.onDetachedFromWindow()}override fun onAnimationEnd(animation: Animator?) {if (heartDrawing) {heartDrawing falseanimation?.duration 3_000animation?.start()}}override fun onAnimationStart(animation: Animator?) {}override fun onAnimationRepeat(animation: Animator?) {}override fun onAnimationCancel(animation: Animator?) {}}这样就实现了, 是不是觉得很简单.
