动画原理——线性来回运动&&波动
书籍名称：HTML5-Animation-with-JavaScript
书籍源码：https://github.com/lamberta/html5-animation
1.在正选函数中，随角度的增大，sin的值徘徊在正一和负一之间。如下图。这可以用做物体的来回运动。
2.动画源码
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bobbing 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 src="./classes/ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
ball = new Ball(),
angle = 0,
centerY = 200,
range = 50,
speed = 0.05; ball.x = canvas.width / 2; (function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height); ball.y = centerY + Math.sin(angle) * range;
angle += speed;
ball.draw(context);
}());
};
</script>
</body>
</html>
style.css
/* Some HTML5 Tags
*/ aside, footer, header, nav, section {
display: block;
} /* Examples
*/ body {
background-color: #bbb;
color: #383838;
} #canvas {
background-color: #fff;
} header {
padding-bottom: 10px;
} header a {
color: #30f;
text-decoration: none;
} aside {
padding-top: 6px;
} /* Index page
*/ #index-body {
background-color: #fdeba1;
font-family: "Vollkorn", serif;
color: #000;
} #index-body a {
text-decoration: none;
color: #b30300;
} #index-body #description, #index-body #exercises {
overflow: auto;
max-width: 900px;
margin: 0px auto 20px auto;
padding-left: 15px;
padding-bottom: 15px;
background-color: #fff;
border-radius: 15px;
} #index-body #description {
margin-top: 40px;
} #index-body h1 {
color: #b30300;
} #index-body #description h2 {
margin-bottom:;
} #index-body h1 a {
text-decoration: underline;
color: #b30300;
} #index-body li h2, #index-body li h3, #index-body li h4 {
color: #000;
} #index-body li h3 {
margin-bottom: 0px;
} #index-body #description ul {
margin:;
padding:;
list-style-type: none;
} #index-body #description ul li {
padding-bottom: 0.6em;
}
.container {
display: table;
width: 100%;
height: auto;
}
.container .text {
display:table-cell;
height:100%;
vertical-align:middle;
}
.container img {
padding: 0 20px;
display: block;
float: right;
}
.container .clear {
clear: both;
} #exercises ul {
margin:;
padding: 4px 20px 10px 20px;
} #exercises ol {
margin: 0 20px 10px 0;
padding:;
list-style-type: none;
} #exercises ol li {
padding-top: 5px;
} #exercises ol ol ol {
padding-left: 60px;
list-style-type: decimal-leading-zero;
} #exercises ol ol ol li img, #exercises ol ol li img {
margin-left: 4px;
margin-bottom: -10;
} #exercises h2 {
margin: 10px 0 0 0;
}
utils.js
/**
* Normalize the browser animation API across implementations. This requests
* the browser to schedule a repaint of the window for the next animation frame.
* Checks for cross-browser support, and, failing to find it, falls back to setTimeout.
* @param {function} callback Function to call when it's time to update your animation for the next repaint.
* @param {HTMLElement} element Optional parameter specifying the element that visually bounds the entire animation.
* @return {number} Animation frame request.
*/
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function (callback) {
return window.setTimeout(callback, 17 /*~ 1000/60*/);
});
} /**
* ERRATA: 'cancelRequestAnimationFrame' renamed to 'cancelAnimationFrame' to reflect an update to the W3C Animation-Timing Spec.
*
* Cancels an animation frame request.
* Checks for cross-browser support, falls back to clearTimeout.
* @param {number} Animation frame request.
*/
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = (window.cancelRequestAnimationFrame ||
window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame ||
window.mozCancelAnimationFrame || window.mozCancelRequestAnimationFrame ||
window.msCancelAnimationFrame || window.msCancelRequestAnimationFrame ||
window.oCancelAnimationFrame || window.oCancelRequestAnimationFrame ||
window.clearTimeout);
} /* Object that contains our utility functions.
* Attached to the window object which acts as the global namespace.
*/
window.utils = {}; /**
* Keeps track of the current mouse position, relative to an element.
* @param {HTMLElement} element
* @return {object} Contains properties: x, y, event
*/
window.utils.captureMouse = function (element) {
var mouse = {x: 0, y: 0, event: null},
body_scrollLeft = document.body.scrollLeft,
element_scrollLeft = document.documentElement.scrollLeft,
body_scrollTop = document.body.scrollTop,
element_scrollTop = document.documentElement.scrollTop,
offsetLeft = element.offsetLeft,
offsetTop = element.offsetTop; element.addEventListener('mousemove', function (event) {
var x, y; if (event.pageX || event.pageY) { x = event.pageX;
y = event.pageY;
} else {
x = event.clientX + body_scrollLeft + element_scrollLeft;
y = event.clientY + body_scrollTop + element_scrollTop;
}
x -= offsetLeft;
y -= offsetTop; mouse.x = x;
mouse.y = y;
mouse.event = event;
}, false); return mouse;
}; /**
* Keeps track of the current (first) touch position, relative to an element.
* @param {HTMLElement} element
* @return {object} Contains properties: x, y, isPressed, event
*/
window.utils.captureTouch = function (element) {
var touch = {x: null, y: null, isPressed: false, event: null},
body_scrollLeft = document.body.scrollLeft,
element_scrollLeft = document.documentElement.scrollLeft,
body_scrollTop = document.body.scrollTop,
element_scrollTop = document.documentElement.scrollTop,
offsetLeft = element.offsetLeft,
offsetTop = element.offsetTop; element.addEventListener('touchstart', function (event) {
touch.isPressed = true;
touch.event = event;
}, false); element.addEventListener('touchend', function (event) {
touch.isPressed = false;
touch.x = null;
touch.y = null;
touch.event = event;
}, false); element.addEventListener('touchmove', function (event) {
var x, y,
touch_event = event.touches[0]; //first touch if (touch_event.pageX || touch_event.pageY) {
x = touch_event.pageX;
y = touch_event.pageY;
} else {
x = touch_event.clientX + body_scrollLeft + element_scrollLeft;
y = touch_event.clientY + body_scrollTop + element_scrollTop;
}
x -= offsetLeft;
y -= offsetTop; touch.x = x;
touch.y = y;
touch.event = event;
}, false); return touch;
}; /**
* Returns a color in the format: '#RRGGBB', or as a hex number if specified.
* @param {number|string} color
* @param {boolean=} toNumber=false Return color as a hex number.
* @return {string|number}
*/
window.utils.parseColor = function (color, toNumber) {
if (toNumber === true) {
if (typeof color === 'number') {
return (color | 0); //chop off decimal
}
if (typeof color === 'string' && color[0] === '#') {
color = color.slice(1);
}
return window.parseInt(color, 16);
} else {
if (typeof color === 'number') {
color = '#' + ('00000' + (color | 0).toString(16)).substr(-6); //pad
}
return color;
}
}; /**
* Converts a color to the RGB string format: 'rgb(r,g,b)' or 'rgba(r,g,b,a)'
* @param {number|string} color
* @param {number} alpha
* @return {string}
*/
window.utils.colorToRGB = function (color, alpha) {
//number in octal format or string prefixed with #
if (typeof color === 'string' && color[0] === '#') {
color = window.parseInt(color.slice(1), 16);
}
alpha = (alpha === undefined) ? 1 : alpha;
//parse hex values
var r = color >> 16 & 0xff,
g = color >> 8 & 0xff,
b = color & 0xff,
a = (alpha < 0) ? 0 : ((alpha > 1) ? 1 : alpha);
//only use 'rgba' if needed
if (a === 1) {
return "rgb("+ r +","+ g +","+ b +")";
} else {
return "rgba("+ r +","+ g +","+ b +","+ a +")";
}
}; /**
* Determine if a rectangle contains the coordinates (x,y) within it's boundaries.
* @param {object} rect Object with properties: x, y, width, height.
* @param {number} x Coordinate position x.
* @param {number} y Coordinate position y.
* @return {boolean}
*/
window.utils.containsPoint = function (rect, x, y) {
return !(x < rect.x ||
x > rect.x + rect.width ||
y < rect.y ||
y > rect.y + rect.height);
}; /**
* Determine if two rectangles overlap.
* @param {object} rectA Object with properties: x, y, width, height.
* @param {object} rectB Object with properties: x, y, width, height.
* @return {boolean}
*/
window.utils.intersects = function (rectA, rectB) {
return !(rectA.x + rectA.width < rectB.x ||
rectB.x + rectB.width < rectA.x ||
rectA.y + rectA.height < rectB.y ||
rectB.y + rectB.height < rectA.y);
};
ball.js
function Ball (radius, color) {
if (radius === undefined) { radius = 40; }
if (color === undefined) { color = "#ff0000"; }
this.x = 0;
this.y = 0;
this.radius = radius;
this.rotation = 0;
this.scaleX = 1;
this.scaleY = 1;
this.color = utils.parseColor(color);
this.lineWidth = 1;
}
Ball.prototype.draw = function (context) {
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.scale(this.scaleX, this.scaleY);
context.lineWidth = this.lineWidth;
context.fillStyle = this.color;
context.beginPath();
//x, y, radius, start_angle, end_angle, anti-clockwise
context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
context.closePath();
context.fill();
if (this.lineWidth > 0) {
context.stroke();
}
context.restore();
};
3.波动实际是在上下移动的基础上x一直递增。
在原页面index.html的基础上简单修改一下就可以
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bobbing 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 src="./classes/ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
ball = new Ball(),
angle = 0,
centerY = 200,
range = 50,
xspeed = 1,
speed = 0.05; ball.x = canvas.width / 2; (function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
ball.x += xspeed;
ball.y = centerY + Math.sin(angle) * range;
angle += speed;
ball.draw(context);
}());
};
</script>
</body>
</html>
动画原理——线性来回运动&&波动的更多相关文章
- Atitit 视频编码与动画原理attilax总结
Atitit 视频编码与动画原理attilax总结 1.1. 第一步:实现有损图像压缩和解压1 1.2. 接着将其量化,所谓量化,就是信号采样的步长,1 1.3. 第二步:实现宏块误差计算2 1.4. ...
- iOS动画原理
1. iOS动画原理 本质:动画对象(这里是UIView)的状态,基于时间变化的反应 分类:可以分为显式动画(关键帧动画和逐帧动画)和隐式动画 关键帧和逐帧总结:关键帧动画的实现方式,只需要修改某个属 ...
- Unity3D 骨骼动画原理学习笔记
最近研究了一下游戏中模型的骨骼动画的原理,做一个学习笔记,便于大家共同学习探讨. ps:最近改bug改的要死要活,博客写的吭哧吭哧的~ 首先列出学习参考的前人的文章,本文较多的参考了其中的表述: 1. ...
- OpenGL10-骨骼动画原理篇(2)
接上一篇的内容,上一篇,简单的介绍了,骨骼动画的原理,给出来一个 简单的例程,这一例程将给展示一个最初级的人物动画,具备多细节内容 以人走路为例子,当人走路的从一个站立开始,到迈出一步,这个过程是 一 ...
- js中动画原理
现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...
- SVG描边动画原理
SVG描边动画原理其实很简单,主要利用以下两个属性 stroke-dasharray 制作虚线,使得黑白相间, stroke-dashoffset 使得虚线向开头偏移,这里的1500不精确,是我随便取 ...
- JS实现动画原理一（闭包方式）
前提: 你必须了解js的闭包(否则你看不懂滴) 我们就来做一个js实现jq animate的动画效果来简单探索一下,js动画实现的简单原理: html代码 <div id=&q ...
- JS 实现无缝滚动动画原理（初学者入）
这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...
- OpenGL10-骨骼动画原理篇(3)-Shader版本代码已经上传
视频教程请关注 http://edu.csdn.net/lecturer/lecturer_detail?lecturer_id=440 接上一个例程OpenGL10-骨骼动画原理篇(2),对骨骼动画 ...
随机推荐
- linux之SQL语句简明教程---IN
在 SQL 中,在两个情况下会用到 IN 这个指令:这一页将介绍其中之一 -- 与 WHERE 有关的那一个情况.在这个用法下,我们事先已知道至少一个我们需要的值,而我们将这些知道的值都放入IN 这个 ...
- hdu4334 Trouble 合并集合可以降低复杂度阿啦啦
我觉得这一题方法很好的,但是之前完全没有碰到过,也没有想到,这么简单直接降低复杂度的方法 先将两个集合合并成1个集合,合并两个(s1,s2),即每个集合里n^2个数,还剩一个n个数的集合 这样还剩超时 ...
- gcc/g++等编译器 编译原理： 预处理，编译，汇编，链接各步骤详解
摘自http://blog.csdn.net/elfprincexu/article/details/45043971 gcc/g++等编译器 编译原理: 预处理,编译,汇编,链接各步骤详解 C和C+ ...
- Dollar Dayz（大数母函数，高低位存取）
Dollar Dayz Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 5655 Accepted: 2125 Descr ...
- DSP TMS320C6000基础学习（1）——介绍
主要内容 1. Why process signals digitally? (1)模拟电路由模拟组件构成:电阻.电容及电感等,这些组件随着电压.温度或机械结构的改变会动态影响到模拟电路的效果: (2 ...
- 泛泰A900 刷4.4专用中文TWRP2.7.1.1版 支持自己主动识别手机版本号（全球首创）
因本人手上的A900S已砖, 所以临时弄不了ROM了, 先上传之前已经弄好的刷4.4专用的新版TWRP recovery 2.7.1.1 这个版本号是我自己定义的,为差别之前公布的2.7.0.0版( ...
- Endian.BIG_ENDIAN和Endian.LITTLE_ENDIAN(http://smartblack.iteye.com/blog/1129097)
Endian.BIG_ENDIAN和Endian.LITTLE_ENDIAN 在ByteArray和Socket中,能看到一个属性endain. endian : String 更改或读取数据的字节顺 ...
- [week1]每周总结与工作计划
实在不想说这句俗话,因为实在太俗了.但是俗话说,“吾日三省吾身”,我虽然难以做到每天反省那么多次,但是每周来一次就很不错了.于是我决定: 从这周开始准备每周都写每周总结与工作计划. 很好,就这样说定了 ...
- 【27前端】CSS Reset
CSS reset就像是一种宁可错杀三千不可放过一个的做法. 一个最简单粗暴的css reset解决方案 *{ margin:0; padding:0; } 多余的话我就不再累赘,想要更多可以参考我的 ...
- maven将jar包安装到本地仓库的命令
进入cmd 执行以下命令: mvn install:install-file -Dfile=E:\sqljdbc4.jar -DgroupId=com.microsoft.sqlserver -Dar ...