摘要:在上一节我们介绍了动画中有关三角函数的内容,以及一个跟随鼠标旋转的箭头动画。这一节主要介绍三角函数的波形运动。我们用函数模仿的第一个运动,就是这种类似水草摆动的运动。脉冲运动便是将函数运用于物体大小的变化中。
在上一节我们介绍了canvas动画中有关三角函数的内容,以及一个跟随鼠标旋转的箭头动画。这一节主要介绍三角函数的波形运动。包括:
平滑运动
线性运动
脉冲运动
1.Sin函数的波形sin函数的波形想必骚年们不会感到陌生,其图形如下所示:
如果想要取得sin函数在[0, 2π]之间的值,非连续的情况下,可以这样估算。
for(var angle=0; angle1.平滑运动 首先介绍Math.sin(angle)的第一个应用——平滑运动。
平滑是指物体一种流畅的运动状态,与之相反的是机械式的简单的从0到1再到-1和0的这么一种状态。平滑的运动更加趋近与自然的运动状态,类似水草在水流中的左右摇摆,在摆动的过程中是有速度的变化的。
我们用Math.sin函数模仿的第一个运动,就是这种类似水草摆动的运动。另外,因为sin函数的值介于[-1,1]之间。所以在实际代码中需要乘以一个较大的值(也就是振幅,你懂得),使其的摆动看起来明显一些。水草摆动的如下图所示,在线演示地址。
具体代码如下
//水草类 function Aqu(color, num, amp){ this.startPoint = []; this.endPointX = []; this.endPointY = []; this.amp = []; this.beta = 0; this.color = (color == undefined)?"#3b154e":color; this.num = (num == undefined)?80:num; } Aqu.prototype.init = function(){ for(var i=0; i相比于机械的加减是不是更加的流畅呢?当然,你也通过改变Math.sin(this.beta)中的递增角度值,控制摆动的速度。
2.线性运动线性运动是最简单的一种运动,物体匀速朝某个方向运动,就是线性运动。
原理很简单,具体代码请查看linear-vertical-motion.html
其实,这里如果你把angle += 0.05的注释取消,你会发现球的运动轨迹就与sin函数的图像一致了。
3.脉冲运动除了作用于物体的速度,sin函数仍然可以作用于物体的大小变化。脉冲运动便是将sin函数运用于物体大小的变化中。
具体代码如下,详细代码请查看plusing-motion.html
window.onload = function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var angle = 0, range = 0.5, speed = 0.05, centerScale = 1; var ball = new Ball(); ball.x = canvas.width/2; ball.y = canvas.height/2; (function drawFrame(){ window.requestAnimationFrame(drawFrame,canvas); context.clearRect(0,0,canvas.width,canvas.height); //sin值的变化,导致 ball.scaleX , ball.scaleY属性变化 ball.scaleX = ball.scaleY = centerScale + Math.sin(angle)*range; angle += speed; ball.draw(context); })(); }由此你应该知道,除了位置属性,我们还可以将sin函数与其他的属性相结合,来形成不同的运动形式。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/79227.html
摘要:在上一节我们介绍了动画中有关三角函数的内容,以及一个跟随鼠标旋转的箭头动画。这一节主要介绍三角函数的波形运动。我们用函数模仿的第一个运动,就是这种类似水草摆动的运动。脉冲运动便是将函数运用于物体大小的变化中。 在上一节我们介绍了canvas动画中有关三角函数的内容,以及一个跟随鼠标旋转的箭头动画。这一节主要介绍三角函数的波形运动。包括: 平滑运动 线性运动 脉冲运动 1.Sin函数...
摘要:注以下所有代码托管到动画的数理分析有了前面的基础知识,现在我们就会想如果我们能够在每秒帧,内渲染张图像,并且每一张图像的内容发生微调,那么在秒钟整个画面就会产生动画效果了。 什么是动画? 就像思考哲学问题无法回避思维和存在的关系一样,制作动画同样无法逃避的问题是动画的原理是什么?这里提一句题外话,任何原理的东西通常难以让你短期拾掇成果,但在隐约的未来会起到难以置信的效果,不信就看接下来...
摘要:接每周一点动画波形运动圆周运动可以分为两种基本的形式正圆运动和椭圆运动。上图展示了从圆的函数表达式到圆的参数方程之间的转换过程。而圆的参数方程就表示的是一个圆。三两点之间的距离按理来说,连点之间的距离是不会用到三角函数的。 接《每周一点canvas动画》——波形运动 圆周运动可以分为两种基本的形式:正圆运动和椭圆运动。在讲解圆周运动之前,必不可少的数学公式即将袭来。so,各位骚年们,请...
阅读 733·2021-11-23 09:51
阅读 2430·2021-10-11 11:10
阅读 1299·2021-09-23 11:21
阅读 1091·2021-09-10 10:50
阅读 882·2019-08-30 15:54
阅读 3326·2019-08-30 15:53
阅读 3287·2019-08-30 15:53
阅读 3186·2019-08-29 17:23