當前位置：
首頁 >
动画原理——绘制正弦函数环绕运动椭圆运动
發布時間：2023/12/2
42
豆豆
生活随笔
收集整理的這篇文章主要介紹了
动画原理——绘制正弦函数环绕运动椭圆运动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
書籍名稱：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
總結
以上是生活随笔為你收集整理的动画原理——绘制正弦函数环绕运动椭圆运动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我们的世界
- 下一篇： DATEADD(Day, DATEDIF