Html5 序列帧动画
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>物联网金融</title>
<style>
* {
margin: 0;
padding: 0;
} html, body {
height: 100%;
width: 100%;
} canvas {
display: block;
}
</style>
</head>
<body>
<audio id="myBJAudio" controls preload="auto" autoplay loop style="display: none" src="SceneTwo/BJ.mp3">
Your browser does not support the audio element.
</audio>
<audio id="myLockAudio" controls preload="auto" style="display: none" src="SceneTwo/LOCK.wav">
Your browser does not support the audio element.
</audio>
<canvas id="canvas">
<p>Your browser does not support the canvas element!</p>
</canvas>
<script type="text/javascript">
var canvas;//画布 var SceneSwitch = 1;//动画选择
var FrameSecond = 60;//更新时间（毫秒）
var AnimController;//动画控制 //定义5个动画
var Anim1,Anim2,Anim3,Anim4,Anim5; //动画控制函数
function Controller(){
switch(SceneSwitch){
case 1:
Anim3.Draw();
break;
case 2:
Anim3.Draw();
Anim1.Draw();
break;
case 3:
Anim3.Draw();
Anim1.Draw();
Anim2.Draw();
break;
case 4:
Anim1.Draw();
Anim2.Draw();
Anim3.Draw();
Anim4.Draw();
break;
default:
Anim5.Draw();
break;
} //不断刷新
AnimController = setTimeout("Controller()",FrameSecond);
} window.onload = function () {
canvas = document.getElementById("canvas");
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight; //绘制背景
DrawBackground(); //实例化动画对象
Anim1 = new PicAnim("SceneOne/ShangHai/",1,74,20,0,2720,canvas.height);
//初始化+启用循环（24帧到74帧循环）
Anim1.Init().SetLoop(true,24,74); Anim2 = new PicAnim("SceneOne/Dollor/",1,64,Anim1.X+Anim1.Width,0,1000,canvas.height);
Anim2.Init().SetLoop(false); //设置下一个动画
Anim1.Next = Anim2; Anim3 = new PicAnim("SceneOne/BallX/",1,161,Anim2.X+Anim2.Width,0,3200,canvas.height);
Anim3.Init().SetLoop(false); Anim4 = new PicAnim("SceneOne/Map/",1,52,Anim3.X+Anim3.Width,0,2600,canvas.height);
Anim4.Init().SetLoop(false); Anim5 = new PicAnim("SceneTwo/Pictures/IMG",1,2500,0,0,canvas.width,canvas.height);
Anim5.Init().SetLoop(true,2200,2500);
Anim5.LoopType = 2;//循环方式，1双向循环，2单向循环
Anim5.Width = canvas.width;//设置画面宽度
Anim5.HasBack = true;//是否有背景，如果有则不会调用背景绘制函数
Anim5.Format=2;//设置文件命名格式
Anim5.Extenes = ".jpg";//序列帧后缀名
Anim5.Keys.push(250);//关键帧，到帧停止，S键再次启动 //启动动画控制
AnimController = setTimeout("Controller()",FrameSecond);
} //动画对象，路径、第一张图片名，最后一张图片名，x轴，y轴，宽度，高度
//*图片都是通过数字进行顺序命名
function PicAnim(path,min,max,x,y,w,h){
this.Path = path;
this.Index = min;
this.MinIndex = min;
this.MaxIndex = max;
this.X = x;
this.Y = y;
this.Width = w;
this.Height = h;
this.Extenes = ".png";
this.Format = 1;
this.Picture = new Image();
this.Loading = false;
this.Drawed = true;
this.HasBack = false;
this.IsLoop = false;
this.LoopBegin = min;
this.LoopEnd = max;
this.LoopType = 1;
this.Keys = new Array();
var loopDir = 1; var obj = this; this.Init = function(){
obj.Height = canvas.height;
obj.Width = canvas.width/10240*obj.Width;
return obj;
} this.SetLoop = function(loop,loopBegin,loopEnd){
obj.IsLoop = loop;
obj.LoopBegin = loopBegin;
obj.LoopEnd = loopEnd;
return obj;
} this.Next = null;
var isNextStart = false; this.Draw = function(){
if(obj.Drawed){
obj.Drawed = false;
if(obj.Format!=1){
obj.Picture.src = obj.Path+obj.Index+obj.Extenes;
}else{
obj.Picture.src = obj.Path+"("+obj.Index+")"+obj.Extenes;
}
obj.Picture.onload = function(){
var context = canvas.getContext("2d"); if(!obj.HasBack)
DrawAreaBack(obj.X,obj.Y,obj.Width,obj.Height); context.drawImage(obj.Picture,obj.X,obj.Y,obj.Width,obj.Height); if(false==isNextStart&&null!=obj.Next&&obj.Index>=obj.MaxIndex){
isNextStart=true;
SceneSwitch++;
} if(obj.IsLoop){
obj.Index+=loopDir; //Begin 场景2 跳帧专用
if (obj.Index == 1160)
document.getElementById("myLockAudio").play();
if(obj.Index>1360&&obj.Index<2490)
obj.Index+=2;
//End if(obj.Index>=obj.LoopEnd){
if(obj.LoopType==1)
loopDir = -1;
else
obj.Index=obj.LoopBegin;
}
else if(obj.Index<=obj.LoopBegin)
loopDir = 1;
}else{
obj.Index++; if(obj.Index>obj.MaxIndex){
obj.Index = obj.MaxIndex;
}
} if(obj.Keys.length>0){
var i=0;
for(;i<obj.Keys.length;i++){
if(obj.Keys[i]==obj.Index)
break;
} if(i<obj.Keys.length)
obj.Drawed=false;
else
obj.Drawed=true;
}else{
obj.Drawed = true;
}
}
}
}
} function DrawBackground() {
DrawAreaBack(0,0,canvas.width,canvas.height);
} function DrawAreaBack(x,y,w,h){
var context = canvas.getContext("2d");
var linearGradient1 = context.createLinearGradient(0, canvas.height, 0, 0);
linearGradient1.addColorStop(0, 'rgb(0, 7, 17)');
linearGradient1.addColorStop(0.5, 'rgb( 3, 26, 60)');
context.fillStyle = linearGradient1;
context.fillRect(x, y, w, h);
} window.onkeydown = disableRefresh;
function disableRefresh(evt) {
evt = (evt) ? evt : window.event
if (evt.keyCode) {
if (evt.keyCode == 83) {
if(SceneSwitch<5)
SceneSwitch++;
else{
Anim5.Index = Anim5.Keys[0]+1;
Anim5.Drawed = true;
}
}
}
}
</script>
</body>
</html>
Html5 序列帧动画的更多相关文章
- 7 个顶级的 HTML5 Canvas 动画赏析
HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...
- 时光煮雨 Unity3D实现2D人物动画① UGUI&Native2D序列帧动画
系列目录 [Unity3D基础]让物体动起来①--基于UGUI的鼠标点击移动 [Unity3D基础]让物体动起来②--UGUI鼠标点击逐帧移动 时光煮雨 Unity3D让物体动起来③—UGUI DoT ...
- 【转】15个无比华丽的HTML5/CSS3动画应用
原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心 ...
- html5网页动画总结--jQuery旋转插件jqueryrotate
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- 8个经典炫酷的HTML5 Canvas动画欣赏
HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...
- 8个经典HTML5 3D动画赏析
HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效.本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片.3D图表.3D按钮等方面,一起来看看. 1.HTM ...
- 7个惊艳的HTML5 Canvas动画效果及源码
HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...
- iOS-动画效果（首尾式动画，代码快动画，核心动画，序列帧动画）
一.各个动画的优缺点 1.首尾动画:如果只是修改空间的属性,使用首尾动画比较方便,如果在动画结束后做后续处理,就不是那么方面了. 2.核心动画:有点在于对后续的处理方便. 3.块动画: (1)在实际的 ...
- HTML5 3D动画效果
对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...
随机推荐
- NOIp2017D2T2(luogu3959) 宝藏 (状压dp)
时隔多年终于把这道题锅过了 数据范围显然用搜索剪枝状压dp. 可以记还有哪些点没到(或者已到了哪些点).我们最深已到的是哪些点.这些点的深度是多少,然后一层一层地往下推. 但其实是没必要记最深的那一层 ...
- 【洛谷P3792】由乃与大母神原型和偶像崇拜
题目大意:维护一个序列,支持单点修改和查询一段区间能不能组成连续的一段数. 题解:查询区间能不能组成一段连续的数这个操作较为复杂,很难在较小时间复杂度内直接维护.这里采用线段树维护区间哈希的策略,即: ...
- windows & gcc & mingw & mysy 编译 openssl
今天有一个项目需要使用到 https, 以前一直用的都是http请求, 用 socket() 实现 https 请求我还真是头一回遇到. 先网上搜索了一下相关资料,明白了 https 相比较 http ...
- PowerDesigner使用（设置继承，实现）
1.File—New Mode 2添加4个class,1个接口(基本的添加工具都在这里面) 3.class1的设置名字,设置方法 3.设置继承,实现 4.编辑class2,class3继承父类的属性. ...
- 重新打开Eclipse出现“An internal error has occurred. java.lang.NullPointerException”
如果出现了上述的错误按照如下的3个步骤解决:1.首先关闭MyEclipse工作空间.2.然后删除工作空间下的. “/.metadata/.plugins/org.eclipse.core.runtim ...
- pageisELIgnored作用
在page指令中有一个isELIgnored属性,其值为true则忽略EL表达式,为false则解析表达式
- Feature Selection Can Reduce Overfitting And RF Show Feature Importance
一.特征选择可以减少过拟合代码实例 该实例来自机器学习实战第四章 #coding=utf-8 ''' We use KNN to show that feature selection maybe r ...
- 用Java实现几种常见的排序算法
用Java语言实现的各种排序,包括插入排序.冒泡排序.选择排序.Shell排序.快速排序.归并排序.堆排序.SortUtil等. 插入排序: package org.rut.util.algorith ...
- 通过 LPeg 介绍解析表达式语法(Parsing Expression Grammars)
通过 LPeg 介绍解析表达式语法(Parsing Expression Grammars) 译者: FreeBlues 修订版本: 1.00 最新链接: http://www.cnblogs.com ...
- QT_文本编辑器_源码下载
源码下载: 链接: http://pan.baidu.com/s/1c21EVRy 密码: qub8 实现主要的功能有:新建,打开,保存,另存为,查找(查找的时候需要先将光标放到最下面位置才能查全,不 ...