Canvas学习笔记——缓动

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Canvas学习笔记——缓动相关的知识,希望对你有一定的参考价值。

当你驾车在高速公路上行驶时,速度是很快的,而快到收费站时,则开始减速直到停下。将这个例子转换成物理模型就是当物体向终点运动时,开始速度会很快,而在快要到达终点时,速度会逐渐放缓直至0,整个运动过程就是缓动。距离越远,速度就越大,距离越近,速度就越慢,也就是距离和速度是成正比关系的。

技术分享

如果t为1,则

技术分享

也就是速度等于距离乘以一个0到1的小数。

v = (target - currentPosition) * k;     //  k(0,1]

 

 

然而这样物体是永远无法到达目标点的,因为存在很多小数,所以不能达到target === x。为了解决这个问题,需要加上一段限制避免冗余的运算:

if(Math.abs(targetX - ball.x) < 0.1 && Math.abs(targetY - ball.y) < 0.1) {
        ball.x = targetX;
        ball.y = targetY;
        window.cancelRequestAnimationFrame(requestId);
}

 

以上是关于Canvas学习笔记——缓动的主要内容,如果未能解决你的问题,请参考以下文章

canvas缓动3

Canvas 练习及学习笔记

canvas学习笔记

HarmonyOS鸿蒙学习笔记(16)Canvas入门使用

HarmonyOS鸿蒙学习笔记(16)Canvas入门使用

HarmonyOS鸿蒙学习笔记(16)Canvas入门使用