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

周在给学生讲授JavaScript课程中setInterval方法时，想到了我们在网上看到的各类GIF动图比较有意思，就将其引入到教学中，教学内容设计如果通过HTML5与JavaScript实现网页类似GIF效果的动态图。于是在网上搜集了部分gif格式动图，将每一个Gif动图分解为一组jpg格式图片，再采用setInterval与html5 Canvas进行动画的实现。通过学习可以让学生进一步了解canvas动画实现的过程与原理。并将其发布到头条，也希望对有兴趣的初学者了解HTML5 Canvas等有所帮助。图片分组图片素材如下：

素材一

实现动画的素材我们已经给出，主要通过gif动图导出一组图片，下面对html5动画实现过程进行简单说明。

基本思路

实现其动画的基本思路是通过HTML5提供的canvas元素进行图片的绘制与展示，借助setInterval方法实现间隔指定时间调用新的图片实现重新绘图。其中绘图主要使用drawImage方法进行绘图，最终通过图片依次重绘实现动画效果。具体实现过程如下：

HTML5 Canvas设置

在页面body部分添加Canva标签，设置其id属性为canv，宽度为600，高度为400,编写代码描述如下图：

添加画布元素

canvas浏览效果

加载图片资源

使用Canvas借助JavaScript提供的drawImage方法进行绘图，需要提供要绘制的图片资源即绘图的坐标位置。该方法原型如下：

drawImage方法原型

因此我们需要加载图片资源，本例由于需要调用多个img实现定时不同图片的绘制，因此我们可以使用数组存储所加载的图片资源。本例图片数量为14，因此我们数组长度为14。使用素组存储图片实现代码如下：

加载图片资源代码

定义页面加载事件onload

本例设计在页面加载时自动播放动画，因此需要在JavaScript脚本中添加页面onload事件，在事件中编写绘图相关代码，主要代码包括获取画布canva与实例化绘图对象context。部分代码描述如下：

onload事件及绘图初始化

使用setInterval实现动画

使用setInterval方法实现动画主要需要定义回调函数与回调函数触发执行的周期，本例中我们使用匿名函数作为回调函数，触发周期设置为100毫秒。setInterval函数定义如下：

setInterval函数

在定义完函数之后可在其匿名函数函数体部分写入绘图方法dramImage(),实现周期调用不同图片资源进行绘图，最终展示出动画效果。为了保证循环调用14张图片，我们需要设置一计数全局变量i，由于我们图片采用数组存储，下标为数组，且从0-13进行编号，因此当计数值小于13时自动+1，指向下一数组下标，当为13时，设置计数值为0，回到数组第一元素，最终实现数组访问下标的循环。setInterval实现完整代码如下：

setInterval完整代码

实现效果展示

HTML动画效果展示

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可以联系作者，共同探讨。期待大家关注！如需案例完整代码请关注并私信，往期前端设计文章链接如下：

前端设计-JavaScript中的值、引用传递与垃圾回收
前端设计-JavaScript美女拼图游戏开发实例
前端设计- JavaScript验证码制作及实例分析
前端设计-Ajax技术及实例展示
前端设计-响应式页面开发基础
Web开发前端、后端与全栈的区别是什么？

使用DIV+CSS布局时，我们需要通过为div命名的方式，来区分网页中不同的模块。在HTML5中布局方式有了新的变化，HTML5中增加了新的结构标签，如header标签、nav标签、article标签等，具体介绍如下。

1. header标签

HTML5中的header标签是一种具有引导和导航作用的结构标签，该标签可以包含所有通常放在页面头部的内容。header标签通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片、搜索表单或者其他相关内容。其基本语法格式如下：

<header>

  <h1>网页主题</h1>

    ...
    
</header>

在上面的语法格式中，<header></header>的使用方法和<div class="header"></div>类似。

注意：

在HTML网页中，并不限制header标签的个数，一个网页中可以使用多个header标签，也可以为每一个内容块添加header标签。

2. nav标签

nav标签用于定义导航链接，是HTML5新增的标签，该标签可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。nav标签的使用方法和普通标签类似，例如下面这段示例代码：

<nav>

  <ul>

        <li><a href="#">首页</li>

        <li><a href="#">公司概况</li>

        <li><a href="#">产品展示</li>

        <li><a href="#">联系我们</li>

  </ul></nav>

在上面这段代码中，通过在nav标签内部嵌套无序列表ul来搭建导航结构。通常一个HTML页面中可以包含多个nav标签，作为页面整体或不同部分的导航。具体来说，nav标签可以用于以下几种场合。

● 传统导航条：目前主流网站上都有不同层级的导航条，其作用是跳转到网站的其他主页面。

● 侧边栏导航：目前主流博客网站及电商网站都有侧边栏导航，目的是将当前文章或当前商品页面跳转到其他文章或其他商品页面。

● 页内导航：它的作用是在本页面几个主要的组成部分之间进行跳转。

● 翻页操作：翻页操作切换的是网页的内容部分，可以通过点击“上一页”或“下一页”切换，也可以通过点击实际的页数跳转到某一页。

除了以上几点以外，nav标签也可以用于其他导航链接组中。需要注意的是，并不是所有的链接组都要被放进nav标签，只需要将主要的和基本的链接放进nav标签即可。

3. footer标签

footer标签用于定义一个页面或者区域的底部，它可以包含所有放在页面底部的内容。在HTML5出现之前，一般使用<div class="footer"></div>标签来定义页面底部，而现在通过HTML5的footer标签可以轻松实现。与header标签相同，一个页面中可以包含多个footer标签。

4. article标签

article标签代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。一个article标签通常有它自己的标题（可以放在header标签中）和脚注（可以放在footer标签中），例如下面的示例代码。

<article>

    <header>

    <h1>秋天的味道</h1>
     
            <p>你想不想知道秋天的味道？它是甜、是苦、是涩...</p>

  </header>

    <footer>
            
               <p>著作权归XXXXXX公司所有...</p>

  </footer></article>

需要注意的，在上面的示例代码中还缺少主体内容。主体内容通常会写在header和footer之间，通过多个section标签进行划分。一个页面中可以出现多个article标签，并且article标签可以嵌套使用。

5. section标签

section标签表示一段专题性的内容，一般会带有标题，主要应用在文章的章节中。例如，新闻的详情页有一篇文章，该文章有自己的标题和内容，因此可以使用article标签标注，如果该新闻内容太长，分好多段落，每段都有自己的小标题，这时候就可以使用section标签把段落标注起来。在使用section标签时，需要注意以下几点：

● section不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时，应该使用div标签。

如果article标签、aside标签或nav标签更符合使用条件，那么不要使用section标签。

● 没有标题的内容模块不要使用section标签定义。

值得一提的是，在HTML5中，article标签可以看作是一种特殊的section标签，它比section标签更具有独立性，即section标签强调分段或分块，而article标签强调独立性。如果一块内容相对来说比较独立、完整时，应该使用article标签；但是如果想要将一块内容分成多段时，应该使用section标签。

6. aside标签

aside标签用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等有别于主要内容的部分。aside标签的用法主要分为两种：

● 被包含在article标签内作为主要内容的附属信息。

● 在article标签之外使用，作为页面或网站的附属信息部分。最常用的的使用形式是侧边栏。

在线咨询

上一篇：好烦，怎么输入拼音的过程也会触发input事件！！！
下一篇：HTML编码规范

您的项目需求

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

整合营销服务商