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

、网点概述

通过以太网将总部与其下的所有网点进行联网，网点根据不同的运作方案将可能会选用不同的软硬件设备；其中，常见的设备有：

【排队取号机】为一台自带打印机的支持触摸交互的微型计算机硬件设备；主要基于Windows操作系统平台的硬件设备；该类型的硬件设备与现行的贵单位网点中使用的硬件设备具备通用性，可通过更换部分外设即可实现设备接入。

取号机上安装的软件通过主控软件提供的相关接口，实现对设备的控制，并提供与排队等候者的人机交互界面。常见的功能有：界面方案获取、排队取号、语音控制、排队票单打印支持、信息展示控制、硬件呼叫器或窗口显示屏控制等等功能。

取号机上安装的启动器软件为等候者提供人机交互界面，自带界面方案设计器，以JSON的格式保存成模版文件；在触摸取号交互软件启动时通过解析器解析生成HTML5的界面。由于采用HTML5生成界面，内置JAVASCRIPT扩展功能，可以轻松访问第三方WebService实现特殊需求。

【显示设备】LED/LCD窗口屏、LED/LCD综合屏等所有排队叫号系统使用到的显示提示设备统称为【显示设备】；窗口屏用于显示各自窗口或坐席的当前服务状态，比如：当1号窗口呼叫时将会显示对应的排队序号前来本窗口办理，暂停服务时显暂停服务或其他自定义文本内容，开始受理业务后显示受理中的提示信息。

【呼叫终端】分为软件与硬件，软件呼叫终端必须安装在窗口或坐席的工作站电脑上；如果在具备工作站电脑并可安装软件呼叫中断情况下，建议尽量采用软件呼叫终端，从而避免硬件呼叫器的售后维护；最终减少管理与维护成本。

二、网点选型方案

2.1 全无线LED窗口屏方案

（常规无线 - 独立窗口屏）

（常规无线 - 通栏窗口屏）

如上图所示，其中【柜台评价器】为可选设备，【智能排队评价系统服务器】可以选配，将【排队评价主控软件】安装在【排队取号机】上；

【无线呼叫器】与【窗口LED显示屏】通过安装与【排队取号机】上的433无线收发通讯模块进行通讯；

其中【通栏LED窗口屏】使用无线通讯方式与【排队取号机】通讯，根据项目情况可使用LED同步屏控制、网络控制或485有线控制方式进行对【通栏LED窗口屏】的控制，具体硬件选型可联系我司技术人员。

全无线工作方式，确保系统稳定的前提下让前期实施安装与后期管理更方便，能极大缩短实施周期，以达到节省实施与管理成本的目的。

【排队评价主控软件】与数据安装于【智能排队评价系统服务器】上，所有的基础设置参数设置都存放于服务器上，便于统一管理与容灾。系统管理人员只要在局域网内的任意一台电脑使用浏览器访问服务器并通过权限认证即可对系统实时运行状态进行监控与管理。

2.2 全有线LED窗口屏方案

（常规有线 - 独立窗口屏）

上图中的【柜台呼叫器】为硬件呼叫器设备，在采用软件呼叫器（叫号客户端）的情况下，可以直接将软件呼叫器安装于柜台工作站电脑上。

2.3 全软件以太网LCD窗口屏方案

如上图，直接将【软件呼叫客户端】安装于柜台工作站电脑上替代硬件呼叫器。采用【LCD窗口屏】设备，直接接入到业主的局域网络中；该方案的优势为硬件少，利用现有的局域网络；

【LCD窗口屏】支持任意区域划分、播放视频与图片、滚动字幕、远程管理与定时开关机免去日常维护。

做移动端的时候，在一些显示遮罩层的页面中，当你在页面遮罩层中滑动的时候会发现页面遮罩层底下还能莫名其妙的滑动，这是非常难看的。所以，要想阻止遮罩层后面不滚动就要加入如下语句即可：

document.getElementById('shade').ontouchstart = function(e){ e.preventDefault(); }

仅仅这一段代码就可以实现了，上面的.ontouchstart前是你需要禁止的对象，当你遮罩层弹出的时候，给遮罩层对象添加这个事件，就可以啦，当你完成你操作的时候，你就自然的移除了遮罩层。

在线咨询

上一篇：3个免费在线制作banner的网站，小白也能做出高逼格的设计！
下一篇：web前端HTML教程-开发环境搭建下载和安装编辑器

您的项目需求

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

整合营销服务商