html5白云创立腻滑的HTML5动画

当代浏览器都内置了专用动画技能，Martin Görner为您展现四种最棒的实例。

当代移动操作系统将用户接口动画化，并已达到了电脑端交互的标准——精选流畅的动画，表示出沉浸效果以及支持直不雅观的交互。
我们都想当然的认为，可以设置一个列表，使之带有运动特性，用手指轻轻一推，它就犹如有重量和惯性一样运动起来，直到碰着边缘再反弹回来一点。
但是，在网络上，我们还达不到这样的效果。

接管事实吧，现有网上的动画常常被视作UI灾害，还在利用二十年前迂腐的<blink>标签技能。
加入Flash有点帮助，不过它缺少HTML DOM集成，都变成了不雅观观的800×600分辨率，并且JavaScript DOM操作还有其标志性的5帧/秒（fps）动画率——真是绝望啊！

（图片来自网络侵删）

改变

2013年，当代浏览器内置了专用动画技能，达到60 fps。
是时候去忘掉过去，开始构建美妙的UI动画体验了。
我将展示四个动画技能，帮助你决定，哪一个更适宜你的项目。

CSS3动画——3D

让我们从最大略的声明式技能开始：CSS3。
这里不须要JavaScript，存CSS，加上一点当代手段。

CSS通过两种基本属性来声明动画：过渡和动画。
过渡属性关照浏览器打算两种状态（由各自CSS定义）间的中间帧。
动画通过改变元素CSS触发。
比如，当你以编程办法改变它的层，或启动一个:hover CSS。

当缩略图层从开始转变到结束，图像则从一处平滑的移动到另一处，范例的表现为JavaScript DOM动作的结果。

img { -webkit-transition: 1s; }.begin { left: 0px; }.end { left: 500px; }

动画属性最常用于持续运行的动画殊效，它还许可自定义中间步骤的动画。

创建一个旋转的图像：

img {-webkit-animation: myAnim 3s infinite; }@-webkit-keyframes myAnim{ from {-webkit-transform: rotate(0deg) } 50% {/ possible intermediate positions at any % /} to {-webkit-transform: rotate(360deg) }}

利用大量CSS属性制作动画具有无限的创造性，你可以根据意图在边框宽度内任意创建动画。
不过，大多数对动画有用的属性都是几何变换和不透明的。
CSS3通过易操作的转换属性供应了全系列二维几何变换：平移、旋转、缩放和歪斜。

用旋转、缩放和歪斜创建2D转换：

webkit-transform：旋转30度

webkit-transform：缩小50%

webkit-transform：歪斜-20度，再20度

接下来变得有趣了。
如果你以为在CSS中添加3D效果，技能上是为了粗体和斜体的设计，这很屈曲，请接着阅读。
通过扩展几何转换到三维图像将是一个很自然的办法，相同变换属性还可以做平移X，Y，Z轴以及旋转X，Y，Z轴。

3D旋转图像：

webkit-transform：Y轴旋转45度

再加上点抛出动画效果，看上去就像是一个旋转的三维立方体。

如果确实这般随意马虎的话，就不会有任何意见意义性了。
设计师留了一点悬念，你可以试一下，只对一个图像进行旋转，浏览器默认渲染出来的效果是不带透视性的：

webkit-transform：Y轴旋转45度

可以添加上透明属性，默认是无穷大极限值也是不带有一点透明效果的。
就犹如靠近镜头的工具与很远间隔外的工具看上客岁夜小一样。

为了确保图像看上去更真实，你还须要指定一个镜头与屏幕之间间隔的值。
加上-webkitperspective: 1000px就可以了。

一点数学问题：什么是透视性？

要在一块平面屏幕上呈现一个3D工具，首先画出一条线连接眼镜或相机与3D物理上的点。
这条线与屏幕的交集便是相应像素所在的位置。
为了找到像素在屏幕上的坐标，利用泰勒斯定理，你须要空间中点的3D坐标和相机与屏幕之间的间隔（f在光学中也被称为焦距）。
这便是视角属性供应的间隔。
如果这个间隔是无限远的，你可以看到所有射线（眼球到3D点线）是水平紧密状的，而且很远很远的工具在屏幕上的大小一样。

现在我们有设置一个3D立方体的所有根本了，利用六个图像以及CSS 3D转换，接下来就可以实现旋转了。

旋转

这一步很大略：我们把一个三维旋转封装到一个div，将会产生如下效果：

浏览器实行你让它所做的步骤：在div渲染一个三维立方体，然后像一张平面图片般在自身利用3D旋转。
这是默认效果，虽然不是你想要的。
你要见告浏览器利用嵌套div来构成3D转换，-webkit-transform-style: preserve-3d属性。
通过这个，我们就能得到想要的旋转立方体了。

准确获取

很随意马虎在空间失落去定位。
我的建议是采取一个div，命名为SCENE。
这便是透明属性存放的位置。
在内部，放置一个命名为OBJECT的div，它应该拥有transform-style: preserve-3d属性，并且该div便是你运用转换移动全体工具的地方。
末了，在该div内部，利用3D转换设置你想要的正面图像，创建所需工具。
在我们的例子中，立方体的六个面：

.SCENE { -webkit-perspective: 1000px; }.OBJECT{ -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(20deg rotateY(120deg) rotateZ(50deg); / replace this with an animation property if you want movement /}.FACE1 { -webkit-transform:translateX(150px)rotateY(90deg);}...

关于3D CSS转换很棒的一点是CSS动画和过渡的完美结合。
我们在这留了一个练习，让旋转立方体运动起来，当鼠标光标悬停其上时，立方体自动打开来。
操作方法是：把立方体的面移动到与中央一定间隔的地方。
第二组CSS属性有一个 :hover选择器，将立方体的面放置在更远的间隔。
通过利用第一种转换属性，你将看到立方体从中央盘旋打开，同时还保持旋转（演示）。

可缩放的矢量图像（SVG）

HTML与CSS都是强大的动画技能，但缺少绘图基元。
SVG能够填补这点，并拥有其独特的动画标签。
SVG动画部分被特定称为同步多媒体集成措辞（SMIL）。

首先，SVG是用于矢量基元的，比如矩形、圆形和贝塞尔曲线：

同样可用于：

个中一个基元，<path>标签，是SVG中最好用的。
它许可你利用直线、弧和贝塞尔曲线定义任意路径。
路径定义看上去想一个字母，犹如Inkscape矢量图形软件天生的。
对付SVG动画，你该当理解这一点。

一个二次和三次贝塞尔曲线的例子：

语法：

M x,y 新的出发点 (标记)

L x,y 到哪里的直线

Q cx, cy, x, y 二次贝塞尔曲线到 (x,y)和一个掌握点

C cx,cy, dx,dy, x,y 三次贝塞尔曲线到(x, y)和两个掌握点

A 椭圆弧

z 字符串末了，用于结束路径

让我们把这些矢量变得更生动化。
你可以查看演示，一个家伙踏着滑板翱翔于白云间。

冲浪板高下摆动，小人的嘴巴在大和更大的笑颜间交替变革，眼睛滚动，瞳孔扩展。
这是SVG动画四种可能的类型。

最大略的一种SVG动画利用<animate>标签，改变一种几何形状的一个参数，在本例中，便是眼睛的半径。

要使瞳孔扩展，须要改变属性列表值中的半径值。

方便的是变革的属性还可以成为<path>标签。
许可你创建一个动画路径。
唯一的限定是两个曲线之间要进行转换，必须是同一种类型且拥有相同数量的掌握点。
它们必须由相同位置上的同一个字母定义，唯一不同的只能是参数的改变。
当移动小人的嘴巴时，只有“微笑”和“大笑”位置被定义了。
SVG动画将完成插值。

当然，SVG还能进行几何变换，也能做成动画。
这里的动画标签是<animate Transform>。
你必须见告它想要将哪里的转变做成动画，还要供应一个分号分隔的所有关键位置的值列表。
还可以组成动画转换，你见告浏览器利用additive=”sum” 属性。

几何转换的动画：

第三个和末了一个SVG动画标签也很有用。
<animateMotion>用来勾引工具沿着特定路径运动。
它有一个隐蔽的技巧称为rotate=”auto”属性。
它让工具不仅能够遵照指定路径，同时自身保持朝前，犹如路上行驶的车辆一样。

SMIL有大量掌握动画特色。
在它的JavaScript API中戳穿pauseAnimations(), unpauseAnimations()和setCurrentTime(t) 函数在全局性开始/停滞/停息一个动画的功能。
还在所有三种动画标签(<animate>, <animateTransform>, <animateMotion>)上指定了begin与end属性。
它们可以利用一个事宜节点/用户事宜/动画事宜的强大组合。
你可以指定，动画在点击之后的一秒结束或开始。

例如，下面这个SVG按钮被点击后有一个移动的阴影效果：

HTML5绘图

由声明性动画转换到编程性动画技能，<canvas>标签是你的第一选择。
本文所提到的所有技能中，<canvas>标签最具有跨浏览器支持，浏览器厂商做了很多努力使之兼容60fps动画，以下是设置一个画布的方法：

第一个尺寸（标签属性）设置了画布的分辨率，这便是你所利用的坐标空间。
第二个尺寸（CSS属性）是画布涌如今屏幕上的形状大小。
为什么不把画布物理尺寸设置到100%分辨率，内部坐标空间不变，浏览器为任意窗口都能精确渲染图画？非常遗憾，浏览器将画布内容作为点阵图来扫描的，任何扩大范围的结果都将导致模糊混乱的像素。
于是，把这两个值设置成相同的值是唯一可行的选项。

初始化画布须要JavaScript中<canvas>元素，并在其上调用getContext('2d')函数。
得到的图画内容工具被用来调用到画布API。
内容是状态性的，存储三种不同的状态信息：绘画风格，即时几何转换以及累计绘图路径。
在画布上进行绘画的方法是发布绘图指令，不产生任何可见内容，但在内存中已创建了一个路径，然后发布一个油墨指令（ctx.stroke(), ctx.fill() 或两者皆有），就能显示出路径了。

逐帧动画

画布动画须要设置一个动画循环，你应该基于requestAnimationFrame()函数（带有精确的前缀）。
该函数使浏览器能够管理帧率，在浏览器选项卡隐蔽时也能停滞动画。

function runAnimation(){ yourWorld.draw() // this is your drawing code webkitRequestAnimationFrame(runAnimation);}

一样平常来说，画布被用于动画的时候，工具的位置必须是在逐帧的根本上才行，这是由于它们都是物理仿真的结果。
不雅观看box2dweb.js教程。
仿真不断改变仿真天下中工具的位置，动画循环周期性的在屏幕上展现当前环境状态。

画布SVG精灵

在画布动画中利用SVG精灵是一种很有用的技巧。
一个任意繁芜性的静态矢量图片在画布上呈现都是繁琐的，这样做实际上可行，虽然不如发送一个.svg到 ctx.drawImage()大略。
出于模糊安全的缘故原由，只有内联SVG支持，你必须在Blob API中利用它（代码）。

SVG精灵能够以任意比例展示其矢量美态，但遗憾的是，只支持Chrome浏览器。

利用WebGL

WebGL暴露浏览器运行的JavaScript运用程序OpenGL API，而不须要任何插件。
理论上讲，你只须要在<canvas> 元素上调用getContext(‘webgl’)（而不是之前的2d）就可以了。
然而，WebGL非常大，并且API等级低。
最主要的是，web版本没有默认的渲染路径，这意味着你无法给它一个形状，让它利用适宜的默认值展示出来。
以是你必须编写着色器，利用GLSL措辞编写屏幕上涌现的任何内容。

幸运的是我们有Three.js帮助。
Three最初是由Mr.doob开拓的库，用于一些Chrome演示（www.ro.me/www.chaostoperfection.com），但它是相对独立的。
它拥有所有的根本，以及内置独特的着色器，你就可以专注于其他有用的方面：相机、灯光、行动。

首先要做的是编写Three粘合代码（很大略）：

var renderer = new THREE.WebGLRenderer({antialias: true});renderer.setSize(width, height);renderer.setClearColorHex(0x000000, 0); // color,transparency// the renderer creates a canvas elementfor youdocument.whereeveryouwant.appendChild(renderer.domElement);

在lights和action之前，需创建camera和位置：

// arguments: FOV,viewAspectRatio, zNear, zFarvar camera = new THREE.PerspectiveCamera(35,width/height, 1, 10000);camera.position.z = 300;

然后是light：

var light = new THREE.DirectionalLight(0xffffff, 1);//color, intensitylight.position.set(1, 1, 0.3); // direction

我们试着呈现一个立方体吧，3D工具在Three中被称为网络，都由一个几何体和一个材料构成。

我们利用一个大略的构造：

var texture = THREE.ImageUtils.loadTexture(‘Fernando Togni.jpg’);var cube = new THREE.Mesh( new THREE.CubeGeometry(100, 100, 100), new THREE.MeshLambertMaterial({map: texture}) );

末了添加内容，称为渲染函数。

var scene = new THREE.Scene();scene.add(cube);scene.add(light);renderer.render(scene, camera);

这将为我们的立方体产生一个静态图像，为了让它动起来，我们包裹渲染调集一个动画循环，改变立方体在每一帧的位置。

function runAnimation(t){ // animate your objects depending on time cube.rotation.y = t/1000; cube.position.x = ... renderer.render(scene, camera); // display requestAnimationFrame(runAnimation); // and loop}

推举利用三维建模软件例如Sketchup。
Three识别几类3D模型构造，包括COLLADA（.dae）具有广泛行业支撑。
下面是如何在Three中加载一个模型：

var loader = new THREE.ColladaLoader();loader.load(\公众Android.dae\公众, function(collada){ var model = collada.scene; model.position = ...; // x, y, z model.rotation = ...; // x, y, z scene.add(model);} );

再做一些努力，改换机器人外不雅观花式，Three供应兰伯特和冯氏照明风格，法线贴图，凹凸贴图，环境映射以及更多。

还可以使机器人运动起来，详细步骤参考教程。

原文链接：http://www.gbtags.com/gb/share/2124.htm