Canvas动画工具,前端动画大乱炖

前者动画大乱炖

2017/11/29 · 基础技术 ·
动画

最初的作品出处: 桂圆_noble   

用作3只前端狗,大家的沉重正是在满意产品要求、完毕相互之间设计的根基上,将最棒的体会展现给用户老爸们。在担保质量的还要,大家日常会给页面加一些动态效果,以拉长页面包车型大巴表现力并升高页面包车型大巴互动体验。故将前端实现动作效果的三种常用格局整理成此篇小结,以求温故而知新,如有不当还望多多指正美高梅开户网址 1

童年.png

用作1只前端狗,大家的重任就是在知足产品须求、完结互动设计的根基上,将最棒的经验显示给用户父亲们。在保管品质的同时,大家经常会给页面加一些动态效果,以提升页面的表现力并进步页面包车型客车互动体验。故将前端达成动作效果的两种常用方式整理成此篇小结,以求温故而知新,如有不当还望多多指正。

壹 、js合营守旧css属性控制,能够使用setTimeout恐怕高档的requestAnimationFrame

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

卡通即童年

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

如上是维基百科上交给的动画的概念。相信每3个像作者如此有小儿的子女,应该都玩过手翻书,恐怕就算你的小儿有点暗淡一点,应该也看过动画片吧…嗯嗯,并从未跑题,其实这和我们今天提及的卡通片本质上是一律的,只然而就是展现方式可能说载体发生了改观。

美高梅开户网址 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的目标是为了让各样网页动画效果(DOM动画、Canvas动画、SVG动画、WebGL动画)能够有1个联合的基础代谢机制,从而省去系统财富,提升系统品质,改正视觉效果。代码中应用这么些API,就是报告浏览器希望执行三个动画片,让浏览器在下三个动画帧安插三回网页重绘。

requestAnimationFrame动用2个回调函数作为参数,这几个回调函数会在浏览珍视绘在此以前调用,由于效果只是贰次性的,所以想实现连接的动作效果,须要递归调用,示例如下:

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操作集中起来,在二遍重绘或回流中就到位,并且重绘或回流的时日距离牢牢跟随显示器的基础代谢频率(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

Canvas动画工具,前端动画大乱炖。就如的CSS还提供了1个Animation属性,但是差别于Transition,Animation功能于成分本身而不是体制属性,能够接纳关键帧的定义,应该说能够实现更随意的卡通效果。

requestAnimationFrame

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

设置那么些API的目标是为了让各个网页动画效果(DOM动画、Canvas动画、SVG动画、WebGL动画)能够有七个统一的基础代谢机制,从而省去系统财富,升高系统性能,改良视觉效果。代码中选用那几个API,正是报告浏览器希望执行三个动画片,让浏览器在下一个动画帧安顿二次网页重绘。

requestAnimationFrame使用二个回调函数作为参数,那几个回调函数会在浏览注重绘在此以前调用,由于效果只是3遍性的,所以想达成接二连三的动作效果,必要递归调用,示例如下:

<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操作集中起来,在2回重绘或回流中就马到功成,并且重绘或回流的年月间隔牢牢追随显示屏的刷新频率(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 的 用来创立2个圆。cxcy 属性定义圆中央的 x 和 y
坐标。假如忽视那五个性格,那么圆点会被设置为 (0,
0)。r属性定义圆的半径。

上边首假使介绍SVG中的多少个用于动画的成分,它们分别是:

:日常放置到一个SVG图像成分里面,用来定义那几个图像成分的某些属性的动画片变化进程;
:成分也是停放2个图像成分里面,它能够引用贰个优先定义好的卡通路径,让图像成分按路径定义的艺术运动;
:成分对图纸的位移和更换有更加多的操纵,它能够钦定图形的转移、缩放、旋转和扭转等;
:成分的用法在下面的事例里出现过,它是四个扶植成分,通过它,等成分能够引用三个外部的概念的。让图像成分按这一个轨迹运动;

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 格式定义图像,并且存有如下特征:

  • 不依靠分辨率,基于矢量图;
  • 匡助事件处理器;
  • 最契合带有大型渲染区域的应用程序(比如谷歌(谷歌(Google))地图);
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的使用都优伤);
  • 不适合游戏采取;

来看几个简单易行的以身作则,用SVG画了1个圆:

<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> 用来创立3个圆。cxcy 属性定义圆中央的 x 和
y 坐标。要是忽略那多个属性,那么圆点会被安装为 (0,
0)。r质量定义圆的半径。

上面首假若介绍SVG中的几个用于动画的成分,它们分别是:

<animate>:平常放置到1个SVG图像元素里面,用来定义这么些图像成分的有些属性的动画变化进度;
<animateMotion>:成分也是停放三个图像元素里面,它能够引用一个事先定义好的卡通片路径,让图像成分按路径定义的艺术运动;
美高梅开户网址 ,<animateTransform>:元素对图纸的活动和转移有更加多的控制,它能够内定图形的变换、缩放、旋转和扭转等;
<mpath>:成分的用法在上边的事例里冒出过,它是2个扶植成分,通过它,<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,只好动用set提姆eout弥补。

 

简单包容:

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各种图形都是三个指标,那么处理鼠标事件就跟普通的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相对而言,只怕是较有利于达成图表的艺术。


发表评论

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

网站地图xml地图