前端动画大大杂烩

2017/11/29 · 基本功手艺 ·
动画

原著出处: 桂圆_noble   

作为贰只前端狗,大家的重任正是在知足产品供给、实现互动设计的根基上,将最佳的经验突显给顾客老爹们。在保管质量的还要,大家平常会给页面加一些动态效果,以增加页面包车型地铁表现力并升级页面的并行体验。故将前端完成动作效果的两种常用格局整理成此篇小结,以求温故而知新,如有不当还望多多指正澳门凯旋门游戏网址 1

童年.png

卡通即童年

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

以上是维基百科上提交的动画的定义。相信每贰个像作者如此有小儿的子女,应该都玩过手翻书,恐怕尽管你的小时候不怎么暗淡一点,应该也看过动画片吧…嗯嗯,并不曾跑题,其实这和大家今日谈到的卡通本质上是同等的,只然而正是表现形式或许说载体产生了变动。

澳门凯旋门游戏网址 2

超人战争赛亚人.avi

多少个基本概念

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

:在动画进度中,每一幅静止画面即为一“帧”;
帧率:即每分钟播放的静止画面包车型地铁数量,单位是fps(Frame per
second)或赫兹(Hz);
帧时长:即每一幅静止画面包车型客车停留时间,单位一般是ms(纳秒);
丢帧澳门凯旋门注册网址,凯旋门074网址,:在帧率固定的动画片中,某一帧的时短期高于平均帧时间长度,导致其持续数帧被挤压而不见的光景;

作者们在显示器上收看的卡通片,每一帧变化都以系统绘制出来的(GPU或然CPU)。它的万丈绘制频率受限于荧屏的基础代谢频率(而非显卡,大很多是60Hz要么75Hz)。

帧频越高,荧屏上海体育场所片闪烁感就越小,牢固性也就越高。人的眼睛不便于觉察75Hz上述刷新频率带来的闪烁感。

完成格局

万般大家在前面贰个实现动画效果的三种首要完毕格局如下:

  • JavaScript:通过电火花计时器(setTimeout 和
    setIterval)来间隔来改形成分样式,或许采取requestAnimationFrame;
  • CSS3:transition 和 animation;
  • HTML5:使用HTML5提供的绘图情势(canvas、svg、webgl);

澳门凯旋门游戏网址 3

Animations.png

requestAnimationFrame

requestAnimationFrame澳门凯旋门游戏网址,是浏览器用于定期循环操作的一个接口,类似于setTimeout,首要用途是按帧对网页举办重绘

安装那几个API的目标是为了让各类网页动画效果(DOM动画、Canvas动画、SVG动画、WebGL动画)可以有贰个统一的基础代谢机制,进而省去系统能源,进步系统性格,改进视觉效果。代码中动用那一个API,就是报告浏览器希望施行一个卡通,让浏览器在下七个动画帧安插二回网页重绘。

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操作聚焦起来,在二回重绘或回流中就做到,并且重绘或回流的年华距离牢牢跟随屏幕的刷新频率(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传送门

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传送门

Animation

就疑似的CSS还提供了叁个Animation属性,可是差异于Transition,Animation成效于成分本人实际不是样式属性,能够利用关键帧的概念,应该说能够达成更随便的卡通效果。

语法

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传送门

Canvas

是HTML5新添的因素,作为页面图形绘制的容器,可用以通过利用JavaScript中的脚本来绘制图形。举个例子,它能够用于绘制图形,制作照片,成立动画,乃至能够张开实时摄像拍卖或渲染,Canvas具备如下特征:

  • 依据分辨率,基于位图;
  • 不扶助事件管理器;
  • 弱的公文渲染技艺;
  • 能够以 .png 或 .jpg 格式保存结果图像;
  • 最符合图像密集型的娱乐,在那之中的广大指标会被屡屡重绘;

大好多 Canvas 绘图 API 都尚未定义在

DEMO传送门

SVG

SVG是英语Scalable Vector
Graphics的缩写,意为可缩放矢量图形,用来定义用于网络的基于矢量的图样,其使用
XML 格式定义图像,况兼有所如下特点:

  • 不借助于分辨率,基于矢量图;
  • 支撑事件管理器;
  • 最符合带有大型渲染区域的应用程序(比方Google地图);
  • 复杂度高会减慢渲染速度(任何过度施用 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 的 用来创设三个圆。cxcy 属性定义圆中央的 x 和 y
坐标。假若忽略这两脾天性,那么圆点会被安装为 (0,
0)。r属性定义圆的半径。

上边首借使介绍SVG中的多少个用于动画的因素,它们各自是:

:平时放置到一个SVG图像元素里面,用来定义这些图像成分的某部属性的动画片变化过程;
:成分也是停放多个图像成分里面,它能够引用二个事先定义好的动画片路径,让图像成分按路线定义的主意运动;
:成分对图纸的运动和改换有越来越多的主宰,它能够钦定图形的转变、缩放、旋转和扭转等;
:成分的用法在下面的例子里冒出过,它是一个支援成分,通过它,等成分能够引用一个表面包车型客车概念的。让图像成分按这几个轨迹运动;

DEMO传送门

WebGL

WebGL使得网页在扶助HTML
标签的浏览器中,无需设置任何插件,便得以利用基于 OpenGL
ES
2.0 的 API 在 canvas 中张开3D渲染。 WebGL
程序由JavaScript的调整代码,和在管理器的图形管理单元(GPU)中实施的特效代码(shader
code,渲染代码) 组成。

澳门凯旋门游戏网址 4

WebGL.png

WebGL 本质上是遵照光栅化的 API,并非依附 3D 的 API。WebGL
只关切多个方面,即投影矩阵的坐标和投影矩阵的颜料。使用 WebGL
程序的天职正是落到实处全部投影矩阵坐标和颜料的 WebGL
对象就能够。能够运用“着色器”来成功上述职务。顶点着色器能够提供投影矩阵的坐标,片段着色器能够提供投影矩阵的颜料。

出于WebGL的体系比较变得壮大,三言两语说不完,所以以下仅提供各个传送门了(不许说自家懒!!):
WebGL
参照他事他说加以考察资料
WebGL
API

多少个常用的动画库

Ani.js —
基于CSS动画的性命管理库
Dynamics.js —
创设具备大意位移功用动画的js库
Animate.css —
齐全的CSS3动画库
Three.js —
让顾客通过javascript动手走入搭建webgl项目的类库

 

1 赞 1 收藏
评论

澳门凯旋门游戏网址 5

相关文章