动画即童年
几个基本概念
实现方式
· JavaScript:通过定时器(setTimeout 和 setIterval)来间隔来改变元素样式,或者使用requestAnimationFrame;
· CSS3:transition 和 animation;
· HTML5:使用HTML5提供的绘图方式(canvas、svg、webgl);
Animations.png
requestAnimationFrame
requestAnimationFrame
requestAnimationFrame
JavaScript
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
1 2 | var requestID = requestAnimationFrame(repeatOften); cancelAnimationFrame(requestID); |
·
·
JavaScript
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); }; })(); |
Transition
CSS 中的 transition 属性允许块级元素中的属性在指定的时间内平滑的改变,简单看下其语法规则:
JavaScript
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 | 定义过渡效果何时开始。 |
Animation
语法
JavaScript
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) |
Canvas
·
·
·
·
·
SVG
SVG是英文Scalable Vector Graphics的缩写,意为可缩放矢量图形,用来定义用于网络的基于矢量的图形,其使用 XML 格式定义图像,并且具有如下特点:
·
·
·
·
·
JavaScript
1 2 3 4 | <svg xmlns="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 的 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性,那么圆点会被设置为 (0, 0)。r
WebGL
WebGL使得网页在支持HTML 标签的浏览器中,不需要安装任何插件,便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行3D渲染。 WebGL 程序由JavaScript的控制代码,和在计算机的图形处理单元(GPU)中执行的特效代码(shader code,渲染代码) 组成。
WebGL.png
WebGL 本质上是基于光栅化的 API,而不是基于 3D 的 API。WebGL 只关注两个方面,即投影矩阵的坐标和投影矩阵的颜色。使用 WebGL 程序的任务就是实现具有投影矩阵坐标和颜色的 WebGL 对象即可。可以使用“着色器”来完成上述任务。顶点着色器可以提供投影矩阵的坐标,片段着色器可以提供投影矩阵的颜色。
WebGL 参考资料
WebGL API
几个常用的动画库
Ani.js — 基于CSS动画的生命处理库
Dynamics.js — 创建具有物理运动效果动画的js库
Animate.css — 齐全的CSS3动画库
Three.js — 让用户通过javascript入手进入搭建webgl项目的类库