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

动画原理——绘制正弦函数&环绕运动&椭圆运动的更多相关文章

  1. iOS动画原理

    1. iOS动画原理 本质:动画对象(这里是UIView)的状态,基于时间变化的反应 分类:可以分为显式动画(关键帧动画和逐帧动画)和隐式动画 关键帧和逐帧总结:关键帧动画的实现方式,只需要修改某个属 ...

  2. OpenGL10-骨骼动画原理篇(2)

    接上一篇的内容,上一篇,简单的介绍了,骨骼动画的原理,给出来一个 简单的例程,这一例程将给展示一个最初级的人物动画,具备多细节内容 以人走路为例子,当人走路的从一个站立开始,到迈出一步,这个过程是 一 ...

  3. js中动画原理

    现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...

  4. Atitit 视频编码与动画原理attilax总结

    Atitit 视频编码与动画原理attilax总结 1.1. 第一步:实现有损图像压缩和解压1 1.2. 接着将其量化,所谓量化,就是信号采样的步长,1 1.3. 第二步:实现宏块误差计算2 1.4. ...

  5. Unity3D 骨骼动画原理学习笔记

    最近研究了一下游戏中模型的骨骼动画的原理,做一个学习笔记,便于大家共同学习探讨. ps:最近改bug改的要死要活,博客写的吭哧吭哧的~ 首先列出学习参考的前人的文章,本文较多的参考了其中的表述: 1. ...

  6. SVG描边动画原理

    SVG描边动画原理其实很简单,主要利用以下两个属性 stroke-dasharray 制作虚线,使得黑白相间, stroke-dashoffset 使得虚线向开头偏移,这里的1500不精确,是我随便取 ...

  7. JS实现动画原理一（闭包方式）

    前提:      你必须了解js的闭包(否则你看不懂滴)     我们就来做一个js实现jq animate的动画效果来简单探索一下,js动画实现的简单原理: html代码 <div id=&q ...

  8. JS 实现无缝滚动动画原理（初学者入）

    这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...

  9. OpenGL10-骨骼动画原理篇(3)-Shader版本代码已经上传

    视频教程请关注 http://edu.csdn.net/lecturer/lecturer_detail?lecturer_id=440 接上一个例程OpenGL10-骨骼动画原理篇(2),对骨骼动画 ...

随机推荐

  1. 我(webabcd)的文章索引

    [最后更新:2014.08.28] 重新想象 Windows Store Apps 系列文章 重新想象 Windows 8 Store Apps 系列文章 重新想象 Windows 8 Store A ...

  2. Windows去掉桌面SVN文件或文件夹问号

    将版本库 的内容检出 到桌面,后才发现桌面上的文件 都变成了问号,本来也以为没有多大问题,删除 .svn 即可,可是删除所有的.svn后,桌面上还是显示问号,刷新了很多次,还重启电脑 了,问号也没有消 ...

  3. centos curl web站点监控实践

    1,监控给定web站点的状态--站点请求返回代码,下载整个web站点页面文本到-o 指定的文本 curl -o /dev/null -s-silent -w--wirte-out "%{ht ...

  4. 高龄“潮男”优衣库老板柳井正_榜样_奢华主义_YOKA时尚网

    高龄"潮男"优衣库老板柳井正_榜样_奢华主义_YOKA时尚网 高龄"潮男"优衣库老板柳井正

  5. ACM学习-POJ-1003-Hangover

    菜鸟学习ACM,纪录自己成长过程中的点滴. 学习的路上,与君共勉. ACM学习-POJ-1003-Hangover Hangover Time Limit: 1000MS   Memory Limit ...

  6. C语言 EOF是什么？

    Linux中,在新的一行的开头,按下Ctrl-D,就代表EOF(如果在一行的中间按下Ctrl-D,则表示输出"标准输入"的缓存区,所以这时必须按两次Ctrl-D):Windows中 ...

  7. SQL Server中的临时表和表变量

    SQL Server中的临时表和表变量 作者:DrillChina出处:blog2008-07-08 10:05 在SQL Server的性能调优中,有一个不可比拟的问题:那就是如何在一段需要长时间的 ...

  8. Codeforces 551C GukiZ hates Boxes 二分答案

    题目链接 题意:  一共同拥有n个空地(是一个数轴,从x=1 到 x=n),每一个空地上有a[i]块石头  有m个学生  目标是删除全部石头  一開始全部学生都站在 x=0的地方  每秒钟每一个学生都 ...

  9. Linux之旅(1): diff, patch和quilt （下）

    Linux之旅(1): diff, patch和quilt (下) 2 quilt 我们自己的项目能够用cvs或svn管理所有代码.但有时我们要使用其它开发人员维护的项目.我们须要改动一些文件,但又不 ...

  10. huffman 编码

    huffman压缩是一种压缩算法,其中经典的部分就是根据字符出现的频率建立huffman树,然后根据huffman树的构建结果标示每个字符.huffman编码也称为前缀编码,就是每个字符的表示形式不是 ...