欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 >

动画原理——绘制正弦函数环绕运动椭圆运动

发布时间：2023/12/2 48 豆豆
生活随笔 收集整理的这篇文章主要介绍了 动画原理——绘制正弦函数环绕运动椭圆运动 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

书籍名称：HTML5-Animation-with-JavaScript

书籍源码：https://github.com/lamberta/html5-animation

 1.正弦函数。x位置递增，y位置用sin生成。

这段代码是不需要ball.js的。

代码如下：

<!doctype html> <html><head><meta charset="utf-8"><title>Wave 2</title><link rel="stylesheet" href="../include/style.css"></head> <body><header>Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a></header><canvas id="canvas" width="400" height="400"></canvas><script src="../include/utils.js"></script><script>window.onload = function () {var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),angle = 0,range = 50,centerY = canvas.height / 2,xspeed = 1,yspeed = 0.05,xpos = 0,ypos = centerY;context.lineWidth = 2;(function drawFrame () {window.requestAnimationFrame(drawFrame, canvas);context.beginPath();context.moveTo(xpos, ypos);//Calculate the new position. xpos += xspeed;angle += yspeed;ypos = centerY + Math.sin(angle) * range;context.lineTo(xpos, ypos);context.stroke();}());};</script></body> </html>

2.做环绕运动，就是求旋转角度对应在圆上的坐标，由下图可以看出x的值是半径r*cos（angle）,而y则为r*sin(angle)，由于canvas的坐标不同于传统的坐标系，大家自行与传统坐标系区别开。

椭圆运动则是某方向值偏大。

上代码：08-circle.html

<!doctype html> <html><head><meta charset="utf-8"><title>Circle</title><link rel="stylesheet" href="../include/style.css"></head><body><header>Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a></header><canvas id="canvas" width="400" height="400"></canvas><script src="../include/utils.js"></script><script src="./classes/ball.js"></script><script>window.onload = function () {var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),ball = new Ball(),angle = 0,centerX = canvas.width / 2,centerY = canvas.height / 2,radius = 50,speed = 0.05;(function drawFrame () {window.requestAnimationFrame(drawFrame, canvas);context.clearRect(0, 0, canvas.width, canvas.height);ball.x = centerX + Math.cos(angle) * radius;ball.y = centerY + Math.sin(angle) * radius;angle += speed;ball.draw(context);}());};</script></body> </html>

09-oval.html

<!doctype html> <html><head><meta charset="utf-8"><title>Oval</title><link rel="stylesheet" href="../include/style.css"></head><body><header>Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a></header><canvas id="canvas" width="400" height="400"></canvas><script src="../include/utils.js"></script><script src="./classes/ball.js"></script><script>window.onload = function () {var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),ball = new Ball(),angle = 0,centerX = canvas.width / 2,centerY = canvas.height / 2,radiusX = 150,radiusY = 100,speed = 0.05;(function drawFrame () {window.requestAnimationFrame(drawFrame, canvas);context.clearRect(0, 0, canvas.width, canvas.height);ball.x = centerX + Math.cos(angle) * radiusX;ball.y = centerY + Math.sin(angle) * radiusY;angle += speed;ball.draw(context);}());};</script></body> </html>

 

转载于:https://www.cnblogs.com/winderby/p/4243568.html

总结

以上是生活随笔为你收集整理的动画原理——绘制正弦函数环绕运动椭圆运动的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。