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

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

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

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

index.html

  1. <!doctype html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Pulse</title>
  6.     <link rel="stylesheet" href="../include/style.css">
  7.   </head>
  8.   <body>
  9.     <header>
  10.       Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
  11.     </header>
  12.     <canvas id="canvas" width="400" height="400"></canvas>
  13.  
  14.     <script src="../include/utils.js"></script>
  15.     <script src="./classes/ball.js"></script>
  16.     <script>
  17.     window.onload = function () {
  18.       var canvas = document.getElementById('canvas'),
  19.           context = canvas.getContext('2d'),
  20.           ball = new Ball(),
  21.           angle = 0,
  22.           centerScale = 1,
  23.           range = 0.5,
  24.           speed = 0.05;
  25.  
  26.       ball.x = canvas.width / 2;
  27.       ball.y = canvas.height / 2;
  28.  
  29.       (function drawFrame () {
  30.         window.requestAnimationFrame(drawFrame, canvas);
  31.         context.clearRect(0, 0, canvas.width, canvas.height);
  32.         //利用正弦设置放大的倍数
  33.         ball.scaleX = ball.scaleY = centerScale + Math.sin(angle) * range;
  34.         angle += speed;
  35.         ball.draw(context);
  36.       }());
  37.     };
  38.     </script>
  39.   </body>
  40. </html>

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

仍然只是index.html

  1. <!doctype html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Random</title>
  6.     <link rel="stylesheet" href="../include/style.css">
  7.   </head>
  8.   <body>
  9.     <header>
  10.       Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
  11.     </header>
  12.     <canvas id="canvas" width="400" height="400"></canvas>
  13.  
  14.     <script src="../include/utils.js"></script>
  15.     <script src="./classes/ball.js"></script>
  16.     <script>
  17.     window.onload = function () {
  18.       var canvas = document.getElementById('canvas'),
  19.           context = canvas.getContext('2d'),
  20.           ball = new Ball(),
  21.           angleX = 0,
  22.           angleY = 0,
  23.           range = 50,
  24.           centerX = canvas.width / 2,
  25.           centerY = canvas.height / 2,
  26.           xspeed = 0.07,
  27.           yspeed = 0.11;
  28.  
  29.       (function drawFrame () {
  30.         window.requestAnimationFrame(drawFrame, canvas);
  31.         context.clearRect(0, 0, canvas.width, canvas.height);
  32.  
  33.         ball.x = centerX + Math.sin(angleX) * range;
  34.         ball.y = centerY + Math.sin(angleY) * range;
  35.         angleX += xspeed;
  36.         angleY += yspeed;
  37.         ball.draw(context);
  38.       }());
  39.     };
  40.     </script>
  41.   </body>
  42. </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. intro

    懒得自己折腾wordpress又很想写博客. 作为一名把自己当成programmer的data scientist,毅然选择了博客园. 这里我想内容就是平时学到/使用的各种心得,更新频率不定. 兴趣范 ...

  2. index seek与index scan

    原文地址:http://blog.csdn.net/pumaadamsjack/article/details/6597357 低效Index Scan(索引扫描):就全扫描索引(包括根页,中间页和叶 ...

  3. python sqlite 查询表的字段名 列名

    获得查询结果表的列名: [python]  view plain copy print ?   db = sqlite.connect('data.db') cur = db.cursor() cur ...

  4. Linux下的sudo及其配置文件/etc/sudoers的详细配置说明

    http://www.osedu.net/article/linux/2011-01-03/178.html Linux下的sudo及其配置文件/etc/sudoers的详细配置说明 1.sudo介绍 ...

  5. PHP出现Notice: unserialize() [function.unserialize]: Error at offset问题的解决方案

    有两个原因(据我所知)会导致这个问题: (1) 字符串本身的问题 (2)字符编码的问题. 你unserialize的字符串的编码和文件本身的编码不一致.将文件编码改成和字符串一样的编码.这种问题比较隐 ...

  6. 【简单项目框架一】Fragment实现的底部导航

    流行的应用的导航一般分为两种,一种是底部导航,一种是侧边栏. 我所做的项目涉及到比较多的是底部导航,今天我就把项目中使用的一种实现方式分享一下. 主要实现思路是:在一个Activity里面底部添加四个 ...

  7. Javascript自由拖拽类

    基本拖拽配置 new Dragdrop({target 拖拽元素 HTMLElemnt 必选bridge 指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到 dragable 是否可拖拽 (true ...

  8. mysql启动报错:Fatal error: Can’t open and lock privilege tables: Table ‘mysql.host’ doesn’t exist

    mysql在首次启动的时候可能会报错:Can’t open and lock privilege tables: Table ‘mysql.host’ doesn’t exist 这时候可以执行脚本 ...

  9. 用ul、li做横向导航

    /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: ...

  10. GetProcessIdOfThread在WinXP及之前操作系统的替代实现

    还是学习VLD2.X版本看到的: 在Windows XP及之前的操作系统没有提供GetProcessIdOfThread的API,这里给出了一个替代的实现方式: 头文件: #if _WIN32_WIN ...