动画原理——脉动(膨胀缩小)&&无规则运动
书籍名称: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>
动画原理——脉动(膨胀缩小)&&无规则运动的更多相关文章
- Atitit 视频编码与动画原理attilax总结
Atitit 视频编码与动画原理attilax总结 1.1. 第一步:实现有损图像压缩和解压1 1.2. 接着将其量化,所谓量化,就是信号采样的步长,1 1.3. 第二步:实现宏块误差计算2 1.4. ...
- SVG描边动画原理
SVG描边动画原理其实很简单,主要利用以下两个属性 stroke-dasharray 制作虚线,使得黑白相间, stroke-dashoffset 使得虚线向开头偏移,这里的1500不精确,是我随便取 ...
- JS实现动画原理一(闭包方式)
前提: 你必须了解js的闭包(否则你看不懂滴) 我们就来做一个js实现jq animate的动画效果来简单探索一下,js动画实现的简单原理: html代码 <div id=&q ...
- iOS动画原理
1. iOS动画原理 本质:动画对象(这里是UIView)的状态,基于时间变化的反应 分类:可以分为显式动画(关键帧动画和逐帧动画)和隐式动画 关键帧和逐帧总结:关键帧动画的实现方式,只需要修改某个属 ...
- Unity3D 骨骼动画原理学习笔记
最近研究了一下游戏中模型的骨骼动画的原理,做一个学习笔记,便于大家共同学习探讨. ps:最近改bug改的要死要活,博客写的吭哧吭哧的~ 首先列出学习参考的前人的文章,本文较多的参考了其中的表述: 1. ...
- JS 实现无缝滚动动画原理(初学者入)
这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...
- OpenGL10-骨骼动画原理篇(3)-Shader版本代码已经上传
视频教程请关注 http://edu.csdn.net/lecturer/lecturer_detail?lecturer_id=440 接上一个例程OpenGL10-骨骼动画原理篇(2),对骨骼动画 ...
- OpenGL10-骨骼动画原理篇(2)
接上一篇的内容,上一篇,简单的介绍了,骨骼动画的原理,给出来一个 简单的例程,这一例程将给展示一个最初级的人物动画,具备多细节内容 以人走路为例子,当人走路的从一个站立开始,到迈出一步,这个过程是 一 ...
- js中动画原理
现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...
随机推荐
- 动态可视化库Vis.js:社交关系谱
Form Here:http://code.csdn.net/news/2819345 Vis.js 是一个动态的.基于浏览器的可视化库,可处理大量的动态数据并能与这些数据进行交互操作.该项目是由Al ...
- hdu1258Sum It Up (DFS)
Description Given a specified total t and a list of n integers, find all distinct sums using numbers ...
- User has no SELECT privilege on V$SESSION
今天是2013-09-20,最近心情一直很差,但是也不能不学习啊,无论怎么样,自己学到 的东西永远都是自己的.加油! 使用dbms_xplan.display_cursor function ...
- 【IPC通信】基于管道的popen和pclose函数
http://my.oschina.net/renhc/blog/35116 [IPC通信]基于管道的popen和pclose函数 恋恋美食 恋恋美食 发布时间: 2011/11/12 23:20 ...
- Dictionary到List转换中的性能问题 转
本文来自:http://www.cnblogs.com/353373440qq/p/3488367.html 在应用泛型中,我们经常使用Dictionary,经常会用到Dictionary到List的 ...
- CXF interceptor拦截顺序
CXF Interceptor中Phase的先后顺序 org.apache.cxf.phase.PhaseManagerImpl中 final void createInPhases() { int ...
- 使用bat批处理命令打包maven项目
使用批处理命令打包java项目,给我们发布war或jar包带来了很大的便利,附上代码,以作留存. ::huap-parent ::common-parent ::market-parent ::cus ...
- for练习--侦察兵
static void Main21侦察兵(string[] args) { //某侦察队接到一项紧急任务,要求在A.B.C.D.E.F六个队员中尽可能多地挑若干人,但有以下限制条件: //侦察兵A和 ...
- ASP.NET后台自定义导出Excel
关于导出,属于老生常谈了,下面就总结下我自己遇到的一些导出吧. 1.使用Excel组件进行导出(需要安装Microsoft Office Excel). 下面为代码,希望可以帮助别人. 1)准备数据源 ...
- UIButton, KVC, KVO
按钮 自定义按钮:调整内部子控件的frame 方式1:实现titleRectForContentRect:和imageRectForContentRect:方法,分别返回titleLabel和imag ...