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 点击: ...
随机推荐
- EF框架下的双表查询
最近想使用ef做一些开发但是遇到了一些小问题就是如何实现多表的查询然后经过查资料终于找出了结果 我们知道ef中表的关系是一对一 一对多 多对多 接下来就讲一下一对一的关系下的栗子 先编写两个表 第 ...
- MVC页面移除HTTP Header中服务器信息
默认情况下,每一个MVC请求的HTTP Header中都会包含着当前服务器的一些信息,出于安全还是性能还是处女座的强迫症等等,都想把这些信息移除掉,增加一些应用程序的神秘感,如下,默认情况下Chrom ...
- Oracle.DataAccess.dll方式操作oracle数据库
Oracle.DataAccess.dll方式操作oracle数据库 一.查询语句: using (OracleConnection conn = new OracleConnection(Syste ...
- 在Windows子系统（WSL）中配置开机启动服务
在WSL中跑了一些测试服务 比如 mysql nginx等,但关机后每次都要手动开启甚是吃力,本想着用rc.local来编辑开机启动 ,无奈不支持啊!先看看非WSL环境中是怎么实现的. 在 Ubunt ...
- NOIP2012BLOCKADE贪心思想证明
NOIP2012BLOCKADE贪心思想证明 这道题的做法是二分时间并检验这个时间是否可行.检验的方法要用到贪心思想. 对于不能到根结点的军队应该尽量向根结点走. 如果军队A能走到根结点但到根结点后剩 ...
- 1087 1 10 100 1000（打表 set 数学）
1087 1 10 100 1000 题目来源: Ural 1209 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 收藏 关注 1,10,100,1000... ...
- 腾讯云服务器部署 django项目整个流程
CentOS7下部署Django项目详细操作步骤 前记:购买腾讯云服务器,配置自选,当然新用户免费体验半个月,我选择的系统是centos7系统版本, 接下来我们来看整个配置项目流程. 部署是基于:ce ...
- C语言 一些算法
1,斐波那契数列 ①递归 时间复杂度O(2^n)#include <stdio.h> int fib(int n){ ||n==) ; ) + fib(n-); } int main(){ ...
- Azure 部署K8S(二)
在"China Azure中部署Kubernetes(K8S)集群"一文中,我们使用的ACS Version及Kubernete Version版本都比较低,ACS Version ...
- 在IDEA中 SFTP 进行发布操作
1, 2, 3, 4, 成功了 补充:] 也可以使用手动写配置文件的方式来的