javascript图形动画设计--以简单正弦波轨迹移动
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Wave 1</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,
yspeed = 0.05; ball.x = 0; (function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height); ball.x += xspeed;
ball.y = centerY / 2 + Math.sin(angle) * range;
angle += yspeed;
ball.draw(context);
}());
};
</script>
</body>
</html>
其中util.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*/);
});
} /**
* Cancels an animation frame request.
* Checks for cross-browser support, falls back to clearTimeout.
* @param {number} Animation frame request.
*/
if (!window.cancelRequestAnimationFrame) {
window.cancelRequestAnimationFrame = (window.cancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
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 : ((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();
};
javascript图形动画设计--以简单正弦波轨迹移动的更多相关文章
- javascript图形动画设计--画简单正弦波
<!doctype html> <html> <head> <meta charset="utf-8"> <title ...
- 推荐12个最好的 JavaScript 图形绘制库
众多周知,图形和图表要比文本更具表现力和说服力.图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web ...
- HTML5拓扑图形组件设计之道（一）
HT for Web(http://www.hightopo.com/guide/readme.html)提供了涵盖通用组件.2D拓扑图形组件以及3D引擎的一站式解决方案,正如Hightopo官网所表 ...
- HT图形组件设计之道（一）
HT for Web简称HT提供了涵盖通用组件.2D拓扑图形组件以及3D引擎的一站式解决方案,正如Hightopo官网所表达的我们希望提供:Everything you need to create ...
- javascript帧动画
前面的话 帧动画就是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成的动画.由于是一帧一帧的画,所以帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容. ...
- Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard
上一篇,介绍了Silverlight动画设计基础知识,Silverlight动画是基于时间线的,对于动画的实现,其实也就是对对象属性的修改过程. 而Silverlight动画分类两种类型,From/T ...
- Silverlight & Blend动画设计系列四：倾斜动画（SkewTransform）
Silverlight中的倾斜变化动画(SkewTransform)能够实现对象元素的水平.垂直方向的倾斜变化动画效果.我们现实生活中的倾斜变化效果是非常常见的,比如翻书的纸张效果,关门开门的时候门缝 ...
- HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版
<html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...
- Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard http://silverlightchina.net/html/tips/2010/0329/934.html
Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard 时间:2010-03-29 11:13来源:SilverlightChina.Net 作者:jv9 点击: ...
随机推荐
- 「HNOI 2015」实验比较
\(Description\) 有\(n\)个元素,对于每个元素\(x_i\)最多知道一个形如\(x_j < x_i\)或\(x_j=x_i\)的条件,问有多少合法的序列.合法的序列满足每个元素 ...
- python--变量,常量,用户交互
1.变量 概念:把程序运行过程中产生的中间值保存在内存,方便后面使用 命名规范: 1.字母,数字,下划线组成 2.不能用数字开头,且不能用纯数字 3.不能用python关键字 4.不要用中文 5.要有 ...
- lamp-linux-1
LAMP编程之Linux(1) LAMP:Linux Apache MySQL PHP LNMP:Linux Nginx MySQL PHP WAMP:Windows Apache MySQL PHP ...
- JavaScript求数组Array的并集（javascript面试常见题目）
var Utils = { joinArray:function(source,target){ for(var i = 0;i<source.length;i++){ var oa = sou ...
- linux中python配置tab=4个空格，并显示行号。
vim ~/.vimrc 写入: set ts=4 set nu :wq 保存. source ~/.vimrc 使之生效.
- 2016级算法期末上机-B.简单·ModricWang's Fight with DDLs I
1124 ModricWang's Fight with DDLs I 思路 这道题本质上就是一个多项式求值,题目中的n需要手动算一下,单位复根可以根据复数的性质来求,即\(e^{i\pi}+1=0\ ...
- Access to the path ‘’ is denied
2019/4/29 问题:利用VS实现数据导出,出现Error:Access to the path 'F:\HPYMTotalCode\Web\dd\xmqjd.xls' is denied. 原因 ...
- Android字符串及字符串资源的格式化
为什么要写这一篇随笔呢?最近做项目的过程中,遇到很多页面在要显示文本时,有一部分是固定的文本,有一部分是动态获取的,并且格式各式各样.一开始采取比较笨的办法,把他拆分成一个个文本控件,然后对不同的控件 ...
- (转载)Java中对List集合内的元素进行顺序、倒序、随机排序的示例代码
1 import java.util.Collections; 2 import java.util.LinkedList; 3 import java.util.List; 4 5 public c ...
- 【Vim】Vim学习
1. 三种模式 (1)命令模式:刚启动vim便进入命令模式,此时敲击键盘会被当做命令来处理 以下是常用的几个命令: i 切换到插入模式,以输入字符.x 删除当前光标所在处的字符.: 切换到底线命令模式 ...