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 点击: ...
随机推荐
- 【转】Sql Server去除所有空格
详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak 1.普通空格: 前后的空格,使用LT ...
- “全栈2019”Java多线程第七章：等待线程死亡join()方法详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- BZOJ3210: 花神的浇花集会（坐标系变换）
题面 传送门 题解 坐标系变换把切比雪夫距离转化为曼哈顿距离 那么对于所有的\(x\)坐标中,肯定是中位数最优了,\(y\)坐标同理 然而有可能这个新的点不合法,也就是说不存在\((x+y,x-y)\ ...
- 抓包工具Fiddler使用教程
一.基本原理 Fiddler 是以代理web服务器的形式工作的,它使用代理地址:127.0.0.1,端口:8888 二.Fiddler抓取https设置 1.启动Fiddler,打开菜单栏中的 Too ...
- eclipse打包jar文件
论文仿真做线性回归分类在人脸识别中应用与研究,在单机下实现LRC算法后,又在Hadoop云平台下实现了该算法.在比较实验结果时候需要放在相同硬件条件下比较.但是LRC单机算法是在windows下的ec ...
- sql语句中group by使用
group by分组函数,group by name 将查询结果按照name进行分组,相同name的记录一组,配合聚合函数,显示每个name的情况. 1,数据源 表A结构如下: CREATE TA ...
- lucene3.0_IndexSearcher排序
系列汇总: lucene3.0_基础使用及注意事项汇总 IndexSearcher排序 本文主要讲解: 1.IndexSearcher中和排序相关的方法及sort类.SortField类(api级别) ...
- jquery源码解析：addClass，toggleClass，hasClass详解
这一课,我们将继续讲解jQuery对元素属性操作的方法. 首先,我们先看一下这几个方法是如何使用的: $("#div1").addClass("box1 box2&quo ...
- 解决 sublime text 3 there are no packages available for installation 错误
重装win7 系统后,使用sublime text 3 出现下面的错误提示: 经过摸索,解决方案如下: 第一种方法: 是因为 ipv6 的问题,导致无法访问 sublime 官网,解决方法: 在 ho ...
- [Bootstrap-Table] 中的事件用例
[Bootstrap-Table] 中的事件 -------------------------------------------------- <div class="alert ...