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

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

1.脉动是一种半径r来回反复的运动，在canvas中他是对原图形的方法和缩小。可以将sin应用在控制大小的属性scaleX，scaleY。

以下代码在先前的实例中对index.html的进行修改即可。

index.html

<!doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Pulse</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,

          centerScale = 1,

          range = 0.5,

          speed = 0.05;

      ball.x = canvas.width / 2;

      ball.y = canvas.height / 2;

      (function drawFrame () {

        window.requestAnimationFrame(drawFrame, canvas);

        context.clearRect(0, 0, canvas.width, canvas.height);

        //利用正弦设置放大的倍数

        ball.scaleX = ball.scaleY = centerScale + Math.sin(angle) * range;

        angle += speed;

        ball.draw(context);

      }());

    };

    </script>

  </body>

</html>

2.对球体的位置x，y分别用一个sin函数来表示，且角度递增的速度不一样，可以实现无规则运动，代码如下

仍然只是index.html

<!doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Random</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(),

          angleX = 0,

          angleY = 0,

          range = 50,

          centerX = canvas.width / 2,

          centerY = canvas.height / 2,

          xspeed = 0.07,

          yspeed = 0.11;

      (function drawFrame () {

        window.requestAnimationFrame(drawFrame, canvas);

        context.clearRect(0, 0, canvas.width, canvas.height);

        ball.x = centerX + Math.sin(angleX) * range;

        ball.y = centerY + Math.sin(angleY) * range;

        angleX += xspeed;

        angleY += yspeed;

        ball.draw(context);

      }());

    };

    </script>

  </body>

</html>

动画原理——脉动（膨胀缩小）&&无规则运动的更多相关文章

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

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

  2. SVG描边动画原理

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

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

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

  4. iOS动画原理

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

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

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

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

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

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

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

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

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

  9. js中动画原理

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

随机推荐

  1. 如何使用Storyboard创建UIPageViewController

    之前我们已经讲过UIPageViewController,那篇文章演示了如何使用Interface Builder创建UIPageViewController.为了适配iOS7和Xcode5,我们重新 ...

  2. 好用的侧边栏菜单/面板jQuery插件

    我想大家都用过一些APP应用,它们的菜单展示是以侧边栏滑动方式展现,感觉很新鲜,而现在网页设计也是如此,不少网站也效仿这样的方式来设计.使用侧边栏的好处就是可以节约空间,对于一些内容多或者喜欢简约的网 ...

  3. win7启动后报丢失nscmk.dll解决解决方式

    1.根据当前计算机选择下载64位或者32位nscmk.dll 2.拷贝nscmk.dll到相路径(32位:%windir%\system32\:64位:%windir%\SysWOW64\nscmk. ...

  4. 【27前端】base标签带有href属性会让chrome里的svg元素url失效

    一个chrome的问题,但具体原因不明. 触发条件:chrome浏览器base标签里href属性有值的时候 触发问题:svg里面的元素如果有用url的滤镜和模糊,则会失效,在firefox里和IE10 ...

  5. UVA 246 10-20-30

    题意: 给52张的扑克堆,先从左往右发7张牌,之后连续不断从左往右发7张牌,如果有牌堆形成了以下3种情况(按顺序判断):1.头两张+尾一张和为10或20或30.2.头一张+尾两张和为10或20或30. ...

  6. IQueryable与IEnumberable的区别(转)

    转自 http://www.cnblogs.com/fly_dragon/archive/2011/02/21/1959933.html IEnumerable接口 公开枚举器,该枚举器支持在指定类型 ...

  7. Mac下Mysql启动异常["ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)"]

    在mac下使用brew安装mysql,之前没有使用过,今天启动的时候发现启动不了 huijundeMacBook-Pro:bin huijunzhang$ mysql ERROR (HY000): C ...

  8. C# 根据年月获得此月第一天和最后一天，并计算工作日

    string str = "2015年3月"; ); ); , secondIndex - firstIndex - ); , ); DateTime dt = DateTime. ...

  9. oracle查询表信息

    oracle查询表信息(索引,外键,列等) oracle中查询表的信息,包括表名,字段名,字段类型,主键,外键唯一性约束信息,索引信息查询SQL如下: 1.查询出所有的用户表 select * fro ...

  10. iOS 9适配技巧（更新版）

    转自:   http://www.cocoachina.com/ios/20150929/13598.html 中文快速导航: 1.iOS9网络适配_ATS:改用更安全的HTTPS(见Demo1) i ...