html制作小车,HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
当前位置:编程学习 > html/css >>
HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
HTML5正在变得越来越流行。在这个移动设备日益增长的时代,对来自Adobe的Flash插件的改造需求也正在快速增长。因为就在最近,Adobe宣布Flash将不再支持移动设备。这意味着,Adobe自身也认为对移动设备来讲HTML5是一项重要的技术。而桌面系统的改变也是迟早的事。
HTML的一大劣势就是对于多媒体技术支持的缺乏。在HTML中,你无法直接显示一个视频或在屏幕上绘画。在HTML5中,随着与元素的引进。这些元素给予开发者直接使用“纯粹的”HTML来实现多媒体技术的可能性——仅需要写一些Javascript代码来配合HTML。在多媒体技术中,有一个基本的技术应该被支持——动画。在HTML5中,有不少方式能够实现该功能。
在这篇文章中,我仅将最新的元素与即将到来的CSS3动画技术进行比较。其他的可能性包括DOM元素或SVG元素的创建和动画。这些可能性将不在本文中进行讨论。从开始就应该注意到canvas技术在当前发布的大部分主流浏览器都给予了支持,而CSS3动画仅在最新的FireFox与Chrome浏览器中才有实现的可能,下一个版本的IE也将提供对CSS3动画的支持。(所以本文中所有演示代码的效果,在Win 7系统下当前最新版的Chrome浏览器中都可实现,但在其他操作系统与其他浏览器中,并不一定能看到所有演示代码的效果)。
这里我选择了一个比较简单的动画:
PS:由于显卡、录制的帧间隔,以及可能你电脑处理器的原因,播放过程可能有些不太流畅或者失真!
分三种方式实现:
(1) canvas元素结合JS
(2) 纯粹的CSS3动画(暂不被所有主流浏览器支持,比如IE)
(3) CSS3结合Jquery实现
知道如何使用CSS3动画比知道如何使用元素更重要:因为浏览器能够优化那些元素的性能(通常是他们的样式,比如CSS),而我们使用canvas自定义画出来的效果却不能被优化。原因又在于,浏览器使用的硬件主要取决于显卡的能力。目前,浏览器没有给予我们直接访问显卡的权力,比如,每一个绘画操作都不得不在浏览器中先调用某些函数。
让我们从Canvas开始
HTML代码:
[html]
Animation in HTML5 using the canvas element
Your browser does not support the -element.Please think about updating your brower!
Slower
Play
Faster
JS代码:
定义一些变量:
var dx=5, //当前速率
rate=1, //当前播放速度
ani, //当前动画循环
c, //画图(Canvas Context)
w, //汽车[隐藏的](Canvas Context)
grassHeight=130, //背景高度
carAlpha=0, //轮胎的旋转角度
carX=-400, //x轴方向上汽车的位置(将被改变)
carY=300, //y轴方向上汽车的位置(将保持为常量)
carWidth=400, //汽车的宽度
carHeight=130, //汽车的高度
tiresDelta=15, //从一个轮胎到最接近的汽车底盘的距离
axisDelta=20, //汽车底部底盘的轴与轮胎的距离
radius=60; //轮胎的半径 www.zzzyk.com
为了实例化汽车canvas(初始时被隐藏),我们使用下面的自执行的匿名函数
(function(){
var car=document.createElement('canvas'); //创建元素
car.height=carHeight+axisDelta+radius; //设置高度
car.width=carWidth; //设置宽度
w=car.getContext('2d');
})();
点击“Play”按钮,通过定时重复执行“画汽车”操作,来模拟“帧播放”功能:
function play(s){ //参数s是一个button
if(ani){ //如果ani不为null,则代表我们当前已经有了一个动画
clearInterval(ani); //所以我们需要清除它(停止动画)
ani=null;
s.innerHTML='Play'; //重命名该按钮为“播放”
}else{
ani=setInterval(drawCanvas,40); //我们将设置动画为25fps[帧每秒],40/1000,即为二十五分之一
s.innerHTML='Pause'; &nbs补充:web前端 , HTML 5 ,
html制作小车,HTML5 实现小车动画效果(Canvas/CSS3/JQuery)相关推荐
- [置顶] HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
HTML5正在变得越来越流行.在这个移动设备日益增长的时代,对来自Adobe的Flash插件的改造需求也正在快速增长.因为就在最近,Adobe宣布Flash将不再支持移动设备.这意味着,Adobe自身 ...
- HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
HTML5正在变得越来越流行.在这个移动设备日益增长的时代,对来自Adobe的Flash插件的改造需求也正在快速增长.因为就在最近,Adobe宣布Flash将不再支持移动设备.这意味着,Adobe自身 ...
- html制作小车,HTML5 实现小车动画效果(Canvas/CSS3/JQuery) 付完整源码
[实例简介] 分三种方式实现: (1) canvas元素结合JS (2) 纯粹的CSS3动画(暂不被所有主流浏览器支持,比如IE) (3) CSS3结合Jquery实现 知道如何使用CSS ...
- html5鱼游动动画,CSS和D3制作小鱼游动的交互动画效果
CSS和D3制作小鱼游动的交互动画效果 发布时间:2020-05-13 13:54:35 来源:亿速云 阅读:118 作者:Leah 本篇文章主要探讨如何用CSS和D3制作小鱼游动的交互动画效果.有一 ...
- css3+jQuery制作导航菜单(带动画效果)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
- HTML+CSS制作七夕跳动的红心动画效果
HTML+CSS制作七夕跳动的红心动画效果 效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
- html卷轴展开动画,MAYA制作北京奥运卷轴展开动画效果
本教程是向脚本之家的朋友介绍利用MAYA制作北京奥运卷轴展开动画效果.教程难度一般.希望脚本之家的朋友们喜欢这篇教程.先看看最终的效果图: 具体制作步骤如下: 1.建一个nurbs面片,u轴向增加一定 ...
- php magic模版插件,magic-带64种动画效果的CSS3动画库
magic.css是一款带64种动画效果的CSS3动画库.magic.css中的动画分为12大类,全部使用CSS3 animation动画来完成.各种效果使用非常简单,只需要为元素添加和移除相应的cl ...
- animation动画效果 1002 css3
animation动画效果 1002 css3 什么是动画 使用步骤 如何定义动画 @keyframes 动画名称{from{属性:值}percentage{属性:值}to{属性:值} } 或者 @k ...
最新文章
- 编程能力如何突飞猛进?
- 学习新技术的10个建议
- git cherry-pick
- 程序员修神之路--容器技术为什么会这么流行(记得去抽奖)
- 2.Idea分支的merge
- Python把类当做字典来访问
- unity, itween, closed path
- atitit.信息系统方案规划 p71.doc
- julia: 如何序列化和反序列化?
- ev3编码软件linux,机器人编程软件下载 乐高ev3机器人编程软件(LEGO MINDSTORMS EV3 Home Edition)V1.3.1 中文安装版 下载-脚本之家...
- h5(html5)+css3+移动端前端
- 如何下载四川省卫星地图高清版大图
- 用户帐户控制---为了对电脑进行保护,已经阻止此应用。---管理员已阻止你运行此应。有关详细信息,请与管理员联系。
- 如何把字幕文件转换成txt文件或word文档,.ass文件内容怎么提取出来txt文件
- 杭州地铁首末站周边停车场正酝酿停车收费优惠
- 三维实景建模如何进行?有哪些作用
- Virtualbox源码分析4:VMM虚拟化实现源码分析1
- JavaScript知识点复习总结
- 微众AI产品经理熊猫杨:AI产品设计的6点心得体会
- 嵌入式系统的软件看门狗和硬件看门狗
热门文章
- java获取文件名【不带后缀】
- 记一次 .NET某家装ERP 内存暴涨分析
- 冒泡排序法c语言实验报告,微机原理实验报告-冒泡排序
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器解决方案之Grunt的使用简介...
- MySQL 查询 并集、交集、差集
- [Apple Push] 【苹果推】Appletexter
- JavaScript 将html中空格(nbsp;)转成JavaScript中的空格
- **《彩色宝石项链》
- 东软实训心得:用正能量去学习和交流
- 英镑兑美元汇率跌至1985年以来的最低水平 英镑危机临近