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

书籍名称：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

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

Blender摄像机环绕运动、动画渲染、视频合成
用blender为自己的模型做一个展示动画一.环绕运动添加一个摄像机和一个圆环--把圆环缩放到调好的摄像机处选中摄像机,添加约束--跟随路径--路径选择圆环约束后,摄像机的坐标跑到很远的地方, ...
简单的canvas动画原理
简单的canvas动画原理一般就是如下步骤: setInterval( function(){ draw(ctx); update(canvas.width,canv ...
游戏引擎的动画系统及骨骼动画原理
一.<游戏引擎架构>动画系统动画的几种分类 <游戏引擎架构>中简单介绍了几种动画种类.用途以及优劣,在<计算机动画算法与技术>中详细介绍了各种动画的算法原理: 精 ...
骨骼动画原理与Cocos2d骨骼动画
骨骼动画原理与Cocos2d骨骼动画声明:本文使用的是cocos2d-x-3.17的代码文章中的提到的测试代码下载地址https://gitee.com/Kyle12/Cocos2dRenderS ...
bada 2D游戏编程之十——关键帧动画原理
bada 2D游戏编程之十--关键帧动画原理前面提到的逐帧动画有一个关键的缺点就是需要为动画中的每一帧都提供一张单独的图片,由于每一帧的图片都需要单独提供,制作起来比较麻烦,图片量也比较大.用关键帧 ...
Android动画原理
一.前言 Android动画包含三种:补间动画(Tween Animation),帧动画(Frame Animation),属性动画 (Property Animation).其中属性动画是从Andr ...
怎么用计算机画正弦函数图像,几何画板如何绘制正弦函数图象
考虑到三角函数问题描点的实际困难,教材表述时借助正弦线利用几何法利用三角函数线作正弦函数图象,但由此带来的困难是如何实现这种效果.如果能让三角函数线动起来,那将会更加直观易懂.几何画板作为使用专业的几 ...
HTML5: 利用SVG动画动态绘制文字轮廓边框线条
DEMO: 点击这里看效果简要教程这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效.SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单.精美的图标和文字.关于使用S ...
立体图形3D动画和绘制
做了一个关于立体图形3D动画和绘制图形的例子,效果如下: 这个是参照苹果官方文档和例子来写的,其中茶壶是根据点.颜色渲染.网格结构和灯光效果来绘制出来的. 再说实现步骤前我们需要了解一下概念: GLK ...

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

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

最新文章

热门文章