【澳门葡京】HTML动画分类,前端动画大乱炖

前端动画大乱炖

2017/11/29 · 基本功技术 ·
动画

初稿出处: 桂圆_noble   

作为一头前端狗,大家的重任正是在知足产品供给、完毕相互之间设计的根底上,将最好的感受展现给用户阿爸们。在保险质量的同时,我们司空眼惯会给页面加一些动态效果,以提升页面包车型地铁表现力并升级页面包车型地铁相互体验。故将前端完成动作效果的三种常用方式整理成此篇小结,以求温故而知新,如有不当还望多多指正澳门葡京 1

童年.png

作为1头前端狗,我们的重任正是在满足产品需求、完毕互动设计的根底上,将最好的经验呈现给用户阿爹们。在保管质量的还要,我们不以为奇会给页面加一些动态效果,以增长页面包车型大巴表现力并升高页面包车型客车相互体验。故将前端达成动作效果的二种常用格局整理成此篇小结,以求温故而知新,如有不当还望多多指正。

① 、js同盟守旧css属性控制,能够运用setTimeout可能高档的requestAnimationFrame

链接:https://zhuanlan.zhihu.com/p/22704891

卡通即童年

卡通是指由许多帧静止的画面,以一定的进程(如每秒16张)一连播发时,肉眼因视觉残象发生错觉,而误以为画面活动的创作。–
维基百科

如上是维基百科上交给的卡通片的定义。相信每二个像本人如此有小儿的儿女,应该都玩过手翻书,或然尽管你的童年稍微暗淡一点,应该也看过动画片吧…嗯嗯,并没有跑题,其实那和我们明日提及的动画本质上是同一的,只可是正是展现格局恐怕说载体产生了转移。

澳门葡京 2

超人民代表大会战赛亚人.avi

澳门葡京 3

2、css3

HTML 5 是新版 Web 技术的集合,包涵以下五个部分:

多少个基本概念

简短介绍几个关于动画的基本概念:

:在动画进度中,每一幅静止画面即为一“帧”;
帧率:即每分钟播放的稳步画面包车型地铁数目,单位是fps(Frame per
second)或赫兹(Hz);
帧时长:即每一幅静止画面包车型客车停留时间,单位一般是ms(飞秒);
丢帧:在帧率固定的动画中,某一帧的时间长度时间高于平均帧时间长度,导致其持续数帧被挤压而不见的气象;

大家在显示屏上看出的卡通,每一帧变化都以系统绘制出来的(GPU也许CPU)。它的万丈绘制频率受限于显示屏的刷新频率(而非显卡,超过半数是60Hz照旧75Hz)。

帧频越高,荧屏上海教室片闪烁感就越小,稳定性也就越高。人的双眼不便于发现75Hz以上刷新频率带来的闪烁感。

童年.png

3、svg

1.语义升格

落实格局

一般大家在前者达成动画效果的二种重庆大学完结格局如下:

  • JavaScript:通过定时器(setTimeout 和
    setIterval)来间隔来改变成分样式,只怕应用requestAnimationFrame;
  • CSS3:transition 和 animation;
  • HTML5:使用HTML5提供的绘图方式(canvas、svg、webgl);

澳门葡京 4

Animations.png

动画片即童年

动画片是指由许多帧静止的镜头,以自然的进程(如每秒16张)连续播发时,肉眼因视觉残象发生错觉,而误以为画面活动的创作。–
维基百科

如上是维基百科上交给的卡通片的概念。相信每种像本人如此有小儿的子女,应该都玩过手翻书,恐怕就算你的幼时多少暗淡一点,应该也看过动画片吧…嗯嗯,并从未跑题,其实那和大家后天提及的动画片本质上是同样的,只可是就是表现情势或然说载体发生了改动。

澳门葡京 5

超人民代表大会战赛亚人.avi

四 、canvas(当然,那个还是要同盟js)

  • HTML 5 加了比比皆是新的价签,使 HTML 更兼具语义。
  • 晋升了 iframe 标签,使其更安全。
  • 节奏和录制:<audio>和<vedio>成分嵌入
  • 增加产量 MathML,是数学公式能够在 Web 中彰显。

requestAnimationFrame

requestAnimationFrame是浏览器用于定时循环操作的贰个接口,类似于setTimeout,首要用途是按帧对网页举行重绘

设置这一个API的目标是【澳门葡京】HTML动画分类,前端动画大乱炖。为了让种种网页动画效果(DOM动画、Canvas动画、SVG动画、WebGL动画)能够有叁个统一的基础代谢机制,从而省去系统财富,提升系统品质,改革视觉效果。代码中央银行使那个API,正是报告浏览器希望执行1个卡通,让浏览器在下2个动画帧布置3回网页重绘。

requestAnimationFrame行使叁个回调函数作为参数,那些回调函数会在浏览器重绘从前调用,由于效果只是二次性的,所以想完毕连接的动作效果,供给递归调用,示例如下:

JavaScript

<div id=”demo” style=”position:absolute; width:100px; height:100px;
background:#ccc; left:0; top:0;”></div> <script> var
demo = document.getElementById(‘demo’); function render(){
demo.style.left = parseInt(demo.style.left) + 1 + ‘px’;
//每一帧向右移动1px } requestAnimationFrame(function(){ render();
//当超过300px后才打住 if(parseInt(demo.style.left) <= 300)
requestAnimationFrame(arguments.callee); }); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="demo" style="position:absolute; width:100px; height:100px; background:#ccc; left:0; top:0;"></div>
 
<script>
var demo = document.getElementById(‘demo’);
function render(){
    demo.style.left = parseInt(demo.style.left) + 1 + ‘px’; //每一帧向右移动1px
}
requestAnimationFrame(function(){
    render();
    //当超过300px后才停止
    if(parseInt(demo.style.left) <= 300) requestAnimationFrame(arguments.callee);
});
</script>

cancelAnimationFrame方法用于撤除重绘:

JavaScript

澳门葡京,var requestID = requestAnimationFrame(repeatOften);
cancelAnimationFrame(requestID);

1
2
var requestID = requestAnimationFrame(repeatOften);
cancelAnimationFrame(requestID);

使用requestAnimationFrameAPI的优势如下:

  • 会把每一帧中的全部DOM操作集中起来,在3遍重绘或回流中就形成,并且重绘或回流的时刻间隔牢牢跟随荧屏的基础代谢频率(60
    Hz也许75 Hz);
  • 在隐蔽或不可见的要素中,将不会开始展览重绘或回流,那本来就代表更少的的cpu,gpu和内部存款和储蓄器使用量;

近期,首要浏览器Firefox 23 / IE 10 / Chrome /
Safari)都接济这些主意。能够用下边包车型客车主意,检查浏览器是或不是协理那么些API。假使不援救,则自动模拟计划该格局。

JavaScript

window.requestAnimFrame = (function(){ return
window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||
window.msRequestAnimationFrame || function(/* function
FrameRequestCallback */ callback, /* DOMElement Element */ element){
window.setTimeout(callback, 1000 / 60); }; })();

1
2
3
4
5
6
7
8
9
10
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element){
            window.setTimeout(callback, 1000 / 60);
          };
})();

之所以,能够如此说,requestAnimationFrame正是叁本性质优化版、专为动画量身构建的setTimeout,区别的是requestAnimationFrame不是投机钦命回调函数运转的年华,而是随着浏览器内建的刷新频率来举办回调,那当然就能达到浏览器所能完毕动画的特等效果了。

DEMO传送门

几个基本概念

简短介绍多少个有关动画的基本概念:

:在动画进程中,每一幅静止画面即为一“帧”;
帧率:即每秒钟播放的平稳画面包车型地铁数码,单位是fps(Frame per
second)或赫兹(Hz);
帧时长:即每一幅静止画面包车型客车停留时间,单位一般是ms(微秒);
丢帧:在帧率固定的卡通片中,某一帧的时间长度时间高于平均帧时间长度,导致其继承数帧被挤压而丢失的景况;

作者们在显示屏上看看的卡通片,每一帧变化都以系统绘制出来的(GPU可能CPU)。它的万丈绘制频率受限于荧屏的基础代谢频率(而非显卡,半数以上是60Hz只怕75Hz)。

帧频越高,显示器上海体育场面片闪烁感就越小,稳定性也就越高。人的肉眼不简单觉察75Hz之上刷新频率带来的闪烁感。

 

2.服务器增强

Transition

CSS 中的 transition
属性同意块级成分中的属性在钦定的时间内平滑的更改,简单看下其语法规则:

JavaScript

transition: property duration timing-function delay;

1
transition: property duration timing-function delay;

切实属性值介绍如下:

描述
transition-property 规定设置过渡效果的 CSS 属性的名称。(none / all / property)
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。(linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n))
transition-delay 定义过渡效果何时开始。

DEMO传送门

福如东海格局

一般我们在前者完毕动画效果的二种重庆大学达成形式如下:

  • JavaScript:通过定时器(setTimeout 和
    setIterval)来间隔来改变成分样式,恐怕使用requestAnimationFrame;
  • CSS3:transition 和 animation;
  • HTML5:使用HTML5提供的绘图格局(canvas、svg、webgl);

澳门葡京 6

Animations.png

兴许那样分类是畸形的,因为无论如何都须求剧本控制,那么或然应该分为

  • 新增 Web Sockets
  • 新增 EventSource API
  • 新增 WebRTC

Animation

接近的CSS还提供了二个Animation属性,但是差距于Transition,Animation功能于成分本人而不是样式属性,能够运用关键帧的概念,应该说能够兑现更随心所欲的卡通片效果。

requestAnimationFrame

requestAnimationFrame是浏览器用于定时循环操作的二个接口,类似于setTimeout,重要用途是按帧对网页举行重绘

设置那几个API的指标是为了让各类网页动画效果(DOM动画、Canvas动画、SVG动画、WebGL动画)能够有2个统一的刷新机制,从而省去系统财富,升高系统个性,改正视觉效果。代码中采纳这么些API,正是告诉浏览器希望执行2个卡通,让浏览器在下贰个动画帧安顿3遍网页重绘。

requestAnimationFrame动用一个回调函数作为参数,那么些回调函数会在浏览珍视绘此前调用,由于效果只是一遍性的,所以想达成延续的动作效果,需求递归调用,示例如下:

<div id="demo" style="position:absolute; width:100px; height:100px; background:#ccc; left:0; top:0;"></div>

<script>
var demo = document.getElementById('demo');
function render(){
    demo.style.left = parseInt(demo.style.left) + 1 + 'px'; //每一帧向右移动1px
}
requestAnimationFrame(function(){
    render();
    //当超过300px后才停止
    if(parseInt(demo.style.left) <= 300) requestAnimationFrame(arguments.callee);
});
</script>

cancelAnimationFrame方法用于撤除重绘:

var requestID = requestAnimationFrame(repeatOften);
cancelAnimationFrame(requestID);

使用requestAnimationFrameAPI的优势如下:

  • 会把每一帧中的全体DOM操作集中起来,在1次重绘或回流中就到位,并且重绘或回流的时刻间隔牢牢跟随显示屏的刷新频率(60
    Hz只怕75 Hz);
  • 在隐蔽或不可知的要素中,将不会进行重绘或回流,这当然就代表更少的的cpu,gpu和内部存款和储蓄器使用量;

日前,主要浏览器Firefox 23 / IE 10 / Chrome /
Safari)都匡助那么些法子。能够用上边的不二法门,检查浏览器是还是不是协助那个API。假如不援救,则自动模拟铺排该方法。

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame || 
          window.oRequestAnimationFrame || 
          window.msRequestAnimationFrame || 
          function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element){
            window.setTimeout(callback, 1000 / 60);
          };
})();

故而,能够那样说,requestAnimationFrame正是叁性情能优化版、专为动画量身构建的setTimeout,不相同的是requestAnimationFrame不是投机内定回调函数运转的日子,而是随着浏览器内建的基础代谢频率来执行回调,那当然就能完结浏览器所能完成动画的特级效应了。

DEMO传送门

1、js+传统css

3.离线存款和储蓄

语法

JavaScript

animation: name duration timing-function delay iteration-count
direction;

1
animation: name duration timing-function delay iteration-count direction;

实际属性值介绍如下:

描述
animation-name 规定需要绑定到选择器的 keyframe 名称。(keyframename、none)
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。(linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n))
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。 (normal、alternate)

DEMO传送门

Transition

CSS 中的 transition
属性允许块级元素中的属性在钦赐的年华内平滑的更改,不难看下其语法规则:

transition: property duration timing-function delay;

切实属性值介绍如下:

描述
transition-property 规定设置过渡效果的 CSS 属性的名称。(none / all / property)
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。(linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n))
transition-delay 定义过渡效果何时开始。

DEMO传送门

2、css3

  • 新增 AppCache
  • online 与 offline 事件
  • localStorage 和 sessionStorage
  • IndexedDB
  • File API

Canvas

是HTML5新增的因素,作为页面图形绘制的容器,可用来通过使用JavaScript中的脚本来绘制图形。例如,它能够用来绘制图形,制作照片,创制动画,甚至能够展开实时摄像拍卖或渲染,Canvas具有如下特征:

  • 正视分辨率,基于位图;
  • 不辅助事件处理器;
  • 弱的公文渲染能力;
  • 可见以 .png 或 .jpg 格式保存结果图像;
  • 最符合图像密集型的玩乐,当中的洋洋目的会被反复重绘;

绝大部分 Canvas 绘图 API 都尚未定义在

DEMO传送门

Animation

类似的CSS还提供了二个Animation属性,不过分歧于Transition,Animation作用于成分本人而不是样式属性,能够采取关键帧的概念,应该说可以兑现更自由的动画效果。

3、js+svg

4.多媒体

SVG

SVG是英文Scalable Vector
Graphics的缩写,意为可缩放矢量图形,用来定义用于互联网的依据矢量的图样,其接纳XML 格式定义图像,并且存有如下特征:

  • 不倚重分辨率,基于矢量图;
  • 协理事件处理器;
  • 最契合带有大型渲染区域的应用程序(比如谷歌(谷歌)地图);
  • 复杂度高会减慢渲染速度(任何过度施用 DOM 的选用都忧伤);
  • 不切合游戏采纳;

来看一个简短的示范,用SVG画了三个圆:

JavaScript

<svg xmlns=”” version=”1.1″> <rect
x=”50″ y=”20″ rx=”20″ ry=”20″ width=”150″ height=”150″
style=”fill:red;stroke:black;stroke-width:5;opacity:0.5″/>
</svg>

1
2
3
4
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

SVG 代码以 成分初阶,包罗开启标签 和倒闭标签 。那是根成分。width
height 属性可安装此 SVG 文档的小幅度和冲天。version
属性可定义所利用的 SVG 版本,xmlns 属性可定义 SVG 命名空间。

SVG 的 用来创立3个圆。cxcy 属性定义圆中央的 x 和 y
坐标。假使忽略那三个属性,那么圆点会被安装为 (0,
0)。r质量定义圆的半径。

上面重假设介绍SVG中的多少个用于动画的因素,它们分别是:

:日常放置到三个SVG图像成分里面,用来定义那一个图像成分的某部属性的卡通变化进程;
:元素也是放置几个图像成分里面,它可以引用一个先期定义好的卡通片路径,让图像成分按路径定义的不二法门运动;
:成分对图纸的运动和转换有更加多的主宰,它能够钦点图形的变换、缩放、旋转和扭转等;
:成分的用法在下边包车型地铁事例里冒出过,它是3个声援成分,通过它,等成分能够引用二个外部的概念的。让图像成分按那几个轨迹运动;

DEMO传送门

语法

animation: name duration timing-function delay iteration-count direction;

具体属性值介绍如下:

描述
animation-name 规定需要绑定到选择器的 keyframe 名称。(keyframename、none)
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。(linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n))
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。 (normal、alternate)

DEMO传送门

4、js+canvas

  • Web 原生扶助音录像播放
  • Camera API 可控制录像头

WebGL

WebGL使得网页在协理HTML
标签的浏览器中,不需求设置任何插件,便足以接纳基于 OpenGL
ES
2.0 的 API 在 canvas 中进行3D渲染。 WebGL
程序由JavaScript的控制代码,和在计算机的图形处理单元(GPU)中履行的特效代码(shader
code,渲染代码) 组成。

澳门葡京 7

WebGL.png

WebGL 本质上是遵照光栅化的 API,而不是基于 3D 的 API。WebGL
只关怀五个地方,即投影矩阵的坐标和投影矩阵的颜色。使用 WebGL
程序的天职正是促成全体投影矩阵坐标和颜料的 WebGL
对象即可。能够应用“着色器”来完结上述职分。顶点着色器可以提供投影矩阵的坐标,片段着色器能够提供投影矩阵的水彩。

由于WebGL的系统比较庞大,三言两语说不完,所以以下仅提供各样传送门了(不许说本人懒!!):
WebGL
参考资料
WebGL
API

Canvas

<canvas>是HTML5新增的因素,作为页面图形绘制的容器,可用来通过利用JavaScript中的脚本来绘制图形。例如,它能够用来绘制图形,制作照片,成立动画,甚至能够实行实时摄像拍卖或渲染,Canvas具有如下特点:

  • 信赖分辨率,基于位图;
  • 不辅助事件处理器;
  • 弱的文件渲染能力;
  • 能够以 .png 或 .jpg 格式保存结果图像;
  • 最契合图像密集型的游戏,个中的好多对象会被频仍重绘;

大部 Canvas 绘图 API 都没有定义在 <canvas>
元素本身上,而是定义在经过画布的getContext()主意得到的三个“绘图环境”对象上。Canvas
API也使用了路线的表示法。可是,路径由一多元的法子调用来定义,而不是讲述为字母和数字的字符串,比如调用
beginPath()arc() 方法。一旦定义了门道,别的的措施,如
fill(),都以对此路径操作。

DEMO传送门

但鉴于requestAnimationFrame比较新鲜,所以依旧单身出的话呢。

5.图像绘制

几个常用的动画库

Ani.js —
基于CSS动画的人命处理库
Dynamics.js —
创立具有大体位移功效动画的js库
Animate.css —
齐全的CSS3动画库
Three.js —
让用户通过javascript入手进入搭建webgl项目标类库

 

1 赞 1 收藏
评论

澳门葡京 8

SVG

SVG是英文Scalable Vector
Graphics的缩写,意为可缩放矢量图形,用来定义用于互联网的根据矢量的图片,其利用
XML 格式定义图像,并且具有如下特征:

  • 不借助分辨率,基于矢量图;
  • 支撑事件处理器;
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图);
  • 复杂度高会减慢渲染速度(任何过度施用 DOM 的接纳都难过);
  • 不符合游戏使用;

来看三个简约的以身作则,用SVG画了一个圆:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

SVG 代码以 <svg> 成分初始,包罗开启标签 <svg> 和倒闭标签 </svg>
。这是根成分。widthheight 属性可设置此 SVG
文书档案的宽度和可观。version 属性可定义所选择的 SVG 版本,xmlns
属性可定义 SVG 命名空间。

SVG 的 <circle> 用来创立二个圆。cxcy 属性定义圆中央的 x 和
y 坐标。假如忽视那两本天性,那么圆点会被设置为 (0,
0)。r属性定义圆的半径。

上边重即使介绍SVG中的几个用于动画的成分,它们各自是:

<animate>:常常放置到三个SVG图像成分里面,用来定义这几个图像成分的有个别属性的动画片变化历程;
<animateMotion>:元素也是停放一个图像成分里面,它能够引用一个先行定义好的动画路径,让图像成分按路径定义的措施运动;
<animateTransform>:成分对图片的移位和转换有更加多的支配,它能够钦赐图形的变换、缩放、旋转和扭转等;
<mpath>:元素的用法在上头的例子里冒出过,它是二个支持成分,通过它,<animateMotion>等要素得以引用二个外部的概念的<path>。让图像成分按这些<path>轨道运动;

DEMO传送门

 

  • Canvas 可绘制图像和文件
  • WebGL 可渲染 3D 影像
  • SVG 可制作矢量图形

WebGL

WebGL使得网页在支撑HTML
<canvas>标签的浏览器中,不要求设置其余插件,便得以使用基于 OpenGL
ES
2.0 的 API 在 canvas 中实行3D渲染。 WebGL
程序由JavaScript的控制代码,和在微型总括机的图形处理单元(GPU)中执行的特效代码(shader
code,渲染代码) 组成。

澳门葡京 9

WebGL.png

WebGL 本质上是基于光栅化的 API,而不是依据 3D 的 API。WebGL
只关注多少个地点,即投影矩阵的坐标和投影矩阵的颜色。使用 WebGL
程序的任务正是促成全数投影矩阵坐标和颜色的 WebGL
对象即可。能够应用“着色器”来成功上述任务。顶点着色器能够提供投影矩阵的坐标,片段着色器能够提供投影矩阵的颜料。

是因为WebGL的系统比较庞大,三言两语说不完,所以以下仅提供各样传送门了(不许说自个儿懒!!):
WebGL
参考资料
WebGL
API

 

6.更加多合一

多少个常用的动画库

Ani.js —
基于CSS动画的生命处理库
Dynamics.js —
创立具有大体位移成效动画的js库
Animate.css —
齐全的CSS3动画库
Three.js —
让用户通过javascript动手进入搭建webgl项指标类库

1、setTimeout和requestAnimationFrame

  • Web Workers 能够把 JavaScript
    总括委托给后台线程,通过同意那个移动以幸免使交互型事件变得放缓。
  • XMLHttpRequest 升级
  • History API 允许对浏览器历史记录实行操作
  • 新增 conentEditable 属性
  • 拖放 API、全屏 API、指针锁定 API
  • 能够行使 navigator.registerProtocolHandler() 方法把 web
    应用程序注册成一个合计处理程序。
  • requestAnimationFrame 允许控制动画渲染以得到更优质量。

 

7.配备相关 API
能够用 JS 来处理摄像头、触控显示器、地理地点等设备相关功效了。

setTimeout就比较基本了,没什么说的,然后requestAnimationFrame能够看看那些文章:

8.样式
CSS 周详提高。

澳门葡京 10.png)

 

 澳门葡京 11

requestAnimationFrame的利益是

  • 就像是flash的enterFrame事件,跟浏览注重绘同步,不像setTimeout那样强行插队,更易于实现平滑的成效
  • 灵活,能够完毕广大css3不能兑现的尖端功效,例如有个别曲线缓动、弹性效果等
  • 不难形成浏览器包容,能够封装函数,低级浏览器改为使用setTimeout

症结是,很多浏览器不帮衬,越发android,只好利用setTimeout弥补。

 

粗略包容:

window.requestAnimFrame = (function(){    return  window.requestAnimationFrame       ||            window.webkitRequestAnimationFrame ||            window.mozRequestAnimationFrame    ||            function( callback ){              window.setTimeout(callback, 1000 / 60);            };  })();  

 

2、CSS3

 

CSS3足以动用css语法把动画绑定到dom上,不需求js代码插手。CSS3属性中有关于塑造动画的四个特性:Transform,Transition,Animation。

 

Transform: 

Transition: 

Animation: 

 

利益是:方便,不必要js加入,适合做一些图形/文字的简易意义

坏处是:不灵便,效果甚微

 

网上一些所谓“惊叹”的CSS3效果,很多都以相当js完毕的,可以说,js+css应该是灵活运用,包罗css2和css3的内容。

 

 

3、SVG

SVG 是一种选择 XML 描述 2D 图形的语言。

SVG 基于 XML,那意味着 SVG DOM
中的各样成分都以可用的。您能够为有个别成分附加 JavaScript 事件处理器。

在 SVG 中,各类被绘制的图纸均被视为对象。要是 SVG
对象的习性产生变化,那么浏览器能够自动重现图形。

 

例子: 

澳门葡京 12.png)澳门葡京 13澳门葡京 14

 

合法资料: 

 

由于svg各样图形都以2个指标,那么处理鼠标事件就跟普通的html相差无几了,这几个在付出效能上是相比较高的。

 

比如这样的地形图应用:

 

澳门葡京 15

 

SVG特点是:

  • 不借助于分辨率
  • 支撑事件处理器
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  • 复杂度高会减慢渲染速度(任何过度施用 DOM 的采用都痛心)
  • 不适合游戏使用

 

SVG 工具

SVG工具比较早熟,美术同学的AI能够直出静态SVG,而Flash IDE也能够透过Swiffy插件也得以把矢量动画导出为SVG动画。

 

4、canvas

 

依赖js(参考1),修改canvas的遵从,简单的效果能够一向利用canvas.getContext(“2d”)画出来;复杂的成效,可以匹配Image达成。

 

简单来说例子: 

澳门葡京 16

 

分外好的求学资料: 

 

 

特点是:

  • 借助分辨率
  • 不扶助事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游艺,在那之中的洋洋目的会被一再重绘

 

Flash CC在扶助Canvas方面也是很强劲,已经集成到IDE中,能够平昔新建HTML 5
canvas动画文书档案,也得以从原来的Flash动画导出canvas动画。

 

5、兼容性

 

PC浏览器实在多,间接看终端的浏览器吧, 

 

澳门葡京 17

 

澳门葡京 18

 

 

能够发现,CSS3和canvas是清一色都被协助到了,而SVG在Android低版本(2.X)浏览器是不支持的。

 

别的,在android上requestAnimationFrame也是不支持的(4.2前)。

 

 

6、总结

 

万一做游戏,肯定是清一色canvas+开源的框架,不过经常的简约网页效果,例如图表,就应当依照实际的情景灵活运用各个方法了。而SVG绝对而言,也许是较便宜达成图表的格局。


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website