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 点击: ...
随机推荐
- [C#]C#中ToString()和Convert.ToString()的区别
一.一般用法说明 ToString()是Object的扩展方法,所以都有ToString()方法;而Convert.ToString(param)(其中param参数的数据类型可以是各种基本数据类型, ...
- Python验证实现登陆功能以及用户锁定（文件存储）
废话不多说先交代码(只是一个简单的验证):#!/usr/bin/env python #-*- coding:utf8 -*- # Structured program ‘#’是注释 # Functi ...
- C#大数据循环
随笔 - 记录 在数据量超大的情况下使用多线程循环List,而且List不异常,一般是上锁. 不过今天发现其实内置了List的循环操作 一般情况下 用List.Foreach 数据量超大的情况下 推荐 ...
- Android ImageView，ImageButton 与 Button
1. ImageButton 继承自 ImageView.两者具备甚小,因为 ImageView 同样可以点击相应,同样有点击的阴影效果.实际上他们的区别在于默认 style.比如同样放一个背景和一个 ...
- Docker 修改镜像源地址
Docker 官方中国区 https://registry.docker-cn.com 网易 http://hub-mirror.c.163.com ustc https://docker.mirro ...
- python网络编程--粘包解决方案 和 subprocess模块
1.缓冲区:作用:将程序和网络解耦分为输入缓冲区, 输出缓冲区 每个 socket 被创建后,都会分配两个缓冲区,输入缓冲区和输出缓冲区.write()/send() 并不立即向网络中传输数据,而是先 ...
- 数据库访问接口(ODBC、OLE DB、ADO)
最近在学C#的数据库编程,对于数据库接口技术这块的知识一直比较模糊,网上查了不少资料,看了几天还是朦朦胧胧的,只能做些笔记再研究了. 我们都知道,“数据库”是指一组相关信息的集合,最早的计算机应用之一 ...
- IdHTTPServer使用注意问题
如果在同一电脑上运行多个IdHTTPServer实例,IdHTTPServer使用时候,一定要注意“DefaultPort”属性,其实真正绑定端口是这个属性决定的,所以希望IdHTTPServer绑定 ...
- Cannot modify header information问题的解决方法【新浪云经常遇到的错误】
我做了一个统一的出错提示函数,在函数执行里面,先处理出错的地址写入cookie以方便用户登陆以后可以直接跳转到要执行的这个页面,可是发现在服务器上测试时,竟然提示本地没有出现的错误: Warning: ...
- python 使用eval() 可以将json格式的数据,转换为原始数据
使用python 自带的函数可以将json 格式的数据(也就是字符串)转换为原始格式的数据, 当使用json.loads()无法将json格式的数据转换为原始数据(存在多层各种格式类型数据的嵌套), ...