【canvas】简单物理运动

原创 老姚 随笔 思路 1829阅读 2018-03-12 13:31:10 举报

canvas 的动画原理非常简单,使用 requestAnimationFrame 定期清除画布,重新画。只要画的内容的位置或形状发生变化,即可形成动画。这里给出简单的物理动画。

1.匀速运动

位置信息线性增加,即可。

2.匀加速运动

常见的匀加速运动如重力,速度逐步线性增加。

3.平抛物运动

水平匀速运动与垂直方向匀加速运动的组合。

4.抛射运动

垂直方向初始速度为负的抛物运动。

5.匀速圆周运动

canvas 实现旋转,需要使用 rotate 方法。注意 translaterotate 是对坐标系的操作。saverestore 方法是对绘图环境状态保存(压栈)和恢复(出栈)。状态包括 fillStyle 和坐标系变换等操作等状态。

6.无重力钟摆运动

不考虑重力因素的钟摆运动,只是匀速圆周运动的一部分。

7.钟摆运动

现实中,钟摆是与重力有关的,在最高点的速度为 0,在最低点速度最快。根据力学知识,有如下公式:

角度 = 初始角度*cos(sqrt(g/摆长)*t)

简单起便,我们取 sqrt(g/摆长) 为常数,比如 0.007。公式变成:

角度 = 初始角度*cos(0.007*t)

现在,只与时间有关系了,但是 t 怎么取得呢?还好!requestAnimationFrame 的回调函数的参数就是 t,其含义与 performance.now() 一样,可以认为是第一次调用 requestAnimationFrame 所经过的时间。

本文完。

评论 ( 9 )
最新评论
lawrence 2018-09-03 14:18:11 9F

楼主平时项目经常用Canvas么?

1460374910 2018-03-16 18:24:00 8F

配色不好,看到眼睛不舒服

老姚 6F 2018-03-12 21:56:31 7F

有道理,可以专门写一篇文章。

两栖猎手 4F 2018-03-12 20:22:57 6F

准确的说,那样会有误差,因为 Math.cos(6 * time / 1000) 的值总是得不到 1 和 -1 这两个极值

琢磨着这样应该可以

老姚 3F 2018-03-12 17:47:48 5F

嗯!

老姚 1F 2018-03-12 17:47:32 4F

钟摆运动已添加。

hugeannex 2018-03-12 16:44:02 3F

我就看看,我不说话。。。

老姚 1F 2018-03-12 16:30:15 2F

你说的有道理,哈哈哈。我想表达的是,角速度只是简单反向而已,真实情况应该是,越往下速度约快,越往上速度越慢。

PiNgFan826 2018-03-12 16:20:11 1F

最后一个,无重力为啥会回摆?哈哈哈