创建平滑的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

我是来自一条北方的狼，却在南方冻成了一条"狗"，作为一个生活在南方的北方人，我感觉每到冬天，最好玩儿的不是下雪，而是渴望下雪的那帮南方小孩儿。

柴犬呼

天冷了，奉劝各位美女，有对象的抱紧对象，没对象的吃狗粮，气温骤降，注意保暖，最近几天千万不要穿裙子，容易被"撩"，雪是好雪，但风不太正经。

卖萌吗？

“起床需要勇气，来面对寒冷空气…”梁静茹的《勇气》俨然被本宝宝改编成了起床歌，哼着小曲儿，努力挣脱周公的怀抱，既然无法冬眠，不如来点精神食粮补补身子，学什么呢？当然是前端开发呀，毕竟辣么火！如今，HTML5的问世，无疑是网络设计者的福音，其出现宛若锦上添花，让web设计变得无限可能，与此同时也大大提高了设计师们的工作效率，简直大爱呀！所以，无论你是菜鸟，还是大神，亦或是吃瓜小伙伴儿，走过路过，千万不要错过，最好的H5开发工具，来来来，瞧一瞧，看一看…不好，感觉要被打了……

肯定被揍

1. Adobe Edge Animate

设计师以交互式数字动画为基础，利用Adobe Edge Animate开发出先进的HTML5，这款强大的媒体工具可在ie，Firefox，Safari，Chrome等多个浏览器上工作，也能在iOS和Android系统上运行。

2. Liveweave:

继具有上下文感知自动编译HTML(含最新版本)和CSS2(含最新版本)功能的工具之后，Liveweave是另一款奇妙的H5开发工具，设计者只需利用标签和HTML5及CSS3的成分工作即可。

3. HTML KickStart:

KickStart简化了工作流程，给开发人员带来了极大的便利，其主要由一组CSS，HTML，jQuery文档、成分和压缩构造组成，是做好一个项目的基础，只需用现成的软件包即可，再无需任何配置设置。

4. HTML5 Reset:

HTML5重置工具方便开发人员重新设计并编辑修改网站。

5. FontDragr:

此工具允许用户在没有CSS编码的情况下分析自定义字体，并使用简单的拖拽或删除选项。

6. Modernizr:

这是JavaScript库的一类，其主要目的是在浏览器上创建一个更确切的网站，能够适用于每个主要的移动平台，并支持多个浏览器如Chrome，Safari +，Firefox 3.5，Opera 9.6 +等等。

7. Crosswalk:

可用于在Android系统上编写HTML内容，该工具支持Android和Tizen，适用于移动设备。

劳逸结合，开心一刻：
数学老师出的迷语，把语文老师气傻了！数学老师给语文老师出的数字谜，数字都可以变成谜语来猜了。数学开启卖萌路，数学界沸腾了，宇宙沸腾了。

1.谜题：0000
谜底：四大皆空
2.谜题：0＋0＝0
谜底：一无所获
3.谜题：0+0=1
谜底：无中生有
4.谜题：1×1=1
谜底：一成不变
5.谜题：1的n次方
谜底：始终如一
6.谜题：1:1
谜底：？
7.谜题：1/2
谜底：？
8.谜题：1+2+3
谜底：？
9.谜题：3.4
谜底：？
10.谜题：33.22
谜底：？

智能社撰稿，更多知识请关注微信号zhi_neng_she ，具体代码可在公众号内‘技术圈’获得！

html5 SVG动画&路径

SVG动画可以使用<animate>元素创建

实例:

创建一个矩形,将在3秒内更改其位置,然后重复动画两次

<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
<animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2" />
</rect>
</svg>

attributeName:指定哪个属性需要产生动画效果

from:指定属性的起始值

to:指定属性的结束值

dur:指定动画运行的时间(持续时间)

fill="frezee|remove":指定动画播放完毕后是停留在播放的终点还是回到起始位置

repeatCount:指定动画的重复播放次数

在上面的例子中,矩形在3s内将其x属性从0更改为300

●要无限重复动画,请使用值"indefinite"作为repeatCount属性

<path>元素用于定义一个路径

下面的命令可用于路径数据:

●M=moveto

●L=lineto

●H=horizontal lineto

●V=vertical lineto

●C=curveto

●S=smooth curveto

●Q=quadratic Bezier curve

●T=smooth quadratic Bezier curveto

●A=elliptical Arc

●Z=closepath

注意:以上所有命令均允许小写字母.大写字母表示绝对定位,小写字母表示相对定位

实例:

<svg width="500" height="500">
<path d="M50 0 L75 200 L225 200 Z"/>
</svg>

上面的例子中定义了一条路径,它开始于150 0,到达位置75 200,然后从那里开始到225 200,最后150 0关闭路径

二 html5 Canvas

html5<canvas>元素用于图形的绘制,通过脚本(通常是JavaScript)来完成

<canvas>标签只是图形容器,你必须使用脚本来绘制图形

getContext()方法可返回一个对象,该方法提供了用于在画布上绘画的方法和属性.

你可以通过多种方法使用canvas绘制路径,盒,圆,字符以及添加图像

<canvas>元素定义如下:

<canvas id"myCanvas" width="200" height="100">
</canvas>

<canvas>标签通常需要指定一个id属性(脚本中经常使用),width和height属性定义的画布的大小

了解和使用Canvas需要基本了解JavaScript的基本知识

canvas是一个二维坐标

canvas的左上角坐标为(0,0)

x坐标向右增加

y坐标向着画布底部增加

Canvas-路径

在Canvas上画线,我们将使用以下两种方法:

●moveTo(x,y)定义线条开始坐标

●lineTo(x,y)定义线条结束坐标

在canvas中绘制圆形,我们将使用以下方法:

●arc(x,y,start,stop)

Canvas-文本

使用canvas绘制文本,重要的属性和方法如下:

●font-定义字体

●fillText(text,x,y)-在canvas上绘制实心的文本

●strokeText(text,x,y)-在canvas上绘制空心的文本

Canvas-渐变

渐变可以填充在矩形,圆形,线条,文本等等,各种形状可以自己定义不同的颜色

以下有两种不同的方式来设置canvas渐变:

●creatLinearGradient(x,y,x1,y1)-创建线条渐变

●creatRadialGradient(x,y,r,x1,y1,r1)-创建一个径向/圆渐变

当我们使用渐变对象,必须使用两种或两种以上的停止颜色

addColorStop()方法指定颜色停止,参数使用坐标描述,可以是0至1

使用渐变,设置fillStyle或strokeStyle的值为渐变,然后绘制形状,如矩形,文本,或一条线

Canva-图像

把一幅图像放置在画布上,使用以下方法:

●drawImage(image,x,y)

三 html5 SVG与Canvas的区别

SVG:

SVG是一种使用XML描述2D图形的语言

SVG基于XML,这意味着SVG DOM中的每个元素都是可用的.你可以为某个元素附加JavaScript事件处理器

在SVG中,每个被绘制的图形均被视为对象.如果SVG对象的属性发生改变,那么浏览器能够自动重现图形

特点:

●不依赖分辨率

●支持事件处理器

●最适合带有大型渲染区域的应用程序(比如谷歌地图)

●复杂程度高会减慢渲染速度(任何过度使用DOM的应用都不快)

●不适合游戏应用

Canvas:

canvas通过JavaScript来绘制2D图形

canvas可以逐像素进行渲染的

在canvas中,一旦图形被绘制出来,它就不会继续得到浏览器的关注

如果其位置发生变化,那么整个场景也需要重新启动,包括任何或许已被图像覆盖的对象

特点:

●依赖分辨率

●不支持事件处理器

●弱的文本渲染能力

●能够以.png或.ipg格式保存结果图像

●最适合图像密集型的游戏,其中的许多对象都会被频换重绘

在线咨询

上一篇：推荐10个经典小游戏开源项目（Vue、React版）
下一篇：Vue.js 如何使用 Socket.IO？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商