现代浏览器动画技术_创建平滑的HTML5动画

现代浏览器普遍集成了特定的动画功能，Görner将向您展示四种最为出色的应用案例。

现代移动操作系统通过动画化用户界面，实现了与电脑端相媲美的交互体验——选择了流畅的动画效果，不仅增强了沉浸感，还支持了直观的操作。我们往往想当然地以为，可以创建一个动态的列表，赋予其动态特性，只需轻轻一触，列表便仿佛拥有重量和惯性，随之运动，直至触碰边缘后略微弹回。然而，在当前的网络环境下，我们还无法实现这种效果。

事实须得面对，当前网络上的动画作品常被视为界面设计的败笔，它们依旧沿用着二十年前过时的标记技术。尽管加入Flash技术能带来些许改善，但它的HTML DOM功能缺失，导致画面分辨率停留在不理想的800×600像素，而且DOM操作的表现也带有其特有的5帧每秒的动画速率——这无疑令人感到十分沮丧。

改变

2013年，现代网络浏览器集成了专业的动画功能，其帧率已达到每秒60帧。现在，我们可以将过去的记忆抛诸脑后，着手打造令人心旷神怡的用户界面动画体验。接下来，我将向大家介绍四种动画技术，以便你们能从中挑选出最适合你们项目的那一种。

CSS3动画——3D

让我们从最基本的声明式技术着手，那就是CSS3。在这个过程中，我们无需存储CSS，只需融入一些现代的技术元素即可。

CSS利用两种核心特性来设定动画效果，分别是过渡和动画。过渡特性向浏览器传达了如何计算两种状态之间的过渡帧，这些状态由CSS规则分别定义。而动画则是通过调整元素的CSS属性来触发的，例如，通过编程手段调整其层级，或者激活:hover的CSS规则。

随着缩略图层从初始状态过渡至终止阶段，画面中的图像便实现了从一点向另一点的流畅位移，这一现象是DOM操作产生的典型效果。

img样式在1秒内从左边开始，其初始位置为0像素，然后逐渐移动至右边，最终位置为500像素。

动画特效的持续运行中，动画属性被广泛运用；此外，它还支持用户对动画过程中的中间步骤进行个性化设置。

创建一个旋转的图像：

图像样式规定：持续时间为3秒；起始状态为从0度开始；在50%的位置上，不受任何百分比的限制；最终状态为未指定。

运用丰富的CSS属性进行动画设计，创意无限，你可以在边框的范围内随心所欲地构建动画效果。然而，大多数对动画效果至关重要的属性，主要涉及几何变换和透明度处理。CSS3通过提供便捷的转换功能，涵盖了全面的二维几何变换，包括平移、旋转、缩放以及倾斜。

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

接下来的内容会变得引人入胜。尽管有人认为在CSS中引入3D效果，仅为了实现粗体和斜体效果，这在技术上显得有些荒谬，但请继续阅读。实际上，将几何转换扩展至三维图像，将是一种相当直观的做法；而且，这些相同的变换属性，还能用于沿X、Y、Z轴进行平移，以及绕X、Y、Z轴进行旋转。

3D旋转图像：

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

若事情真的如此简单，那么其中便失去了乐趣。设计师巧妙地留下了一些未知，你可以尝试旋转单一图像，此时浏览器所呈现的画面将缺乏透视感。

透明度可以设置为最大，即默认的无穷大极限值，这样即便达到这个极限，也不会产生任何透明效果。这就像在镜头前靠近的对象和远处的对象在视觉上呈现的大小完全一致。

为了使图像呈现出更加逼真的效果，你必须设定一个镜头与屏幕间的具体距离数值。只需添加冒号符号即可完成设置。

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

要在平面屏幕上展示一个三维物体，需先描绘一条线段，将眼镜或相机与三维空间中的某点相连。该线段与屏幕的交点，即对应像素的具体位置。为确定像素在屏幕上的具体坐标，需借助泰勒定理，并掌握空间中该点的三维坐标以及相机与屏幕间的距离——在光学中，此距离亦称作焦距。该距离正是视角属性所提供的。若此间距趋向无穷，你将观察到所有射线（即从眼球至三维空间的点线）呈现出平行且密集的状态，同时，屏幕上显示的极其遥远的物体，其尺寸也将保持一致。

我们已经具备了构建3D立方体的所有基本要素，借助六个关键图像以及CSS 3D变换技术，现在我们能够着手进行立方体的旋转效果制作了。

旋转

这一过程相对简单：我们将三维旋转操作封装进一个div元素，随之即可呈现出以下效果：

浏览器按照你的指令执行操作：它会在div元素中渲染出一个三维立方体，并对其应用3D旋转效果，仿佛将其当作一张平面图像。这种效果是系统默认的，但可能并非你所期望的。为了实现你所想要的旋转立方体效果，你需要指导浏览器使用嵌套的div元素来创建3D转换效果，具体是通过设置样式中的-3d属性。这样一来，我们便能够获得期望的旋转立方体了。

准确获取

在空间中，定位很容易变得模糊不清。我的建议是使用一个名为SCENE的div，这里将存放透明属性。在SCENE内部，再放置一个同样命名为的div，并赋予它-style: -3d的属性。这个div便是你进行转换和移动整个对象的地方。最终，在这个div中，通过3D转换技术，你可以设置出所需的正面图像，并创建出所需的对象。在我们的例子中，立方体的六个面：

场景设置：--: ; --: (20度，50度)；若需调整，请使用以下样式：--style: -3d; --: (20度，50度)。面部元素1：--:(150像素，90度)；...

3D CSS转换的一大亮点在于其动画与过渡的完美融合。为此，我们在练习中设置了一个让旋转立方体动起来的任务，当鼠标悬停于其上时，立方体便会自动展开。具体操作步骤如下：将立方体的各个面移动至距离中心点一定距离的位置。此外，第二组CSS属性中包含了一个:hover选择器，该选择器能够将立方体的面放置在更远的距离。借助第一种转换特性，你将观察到立方体从中心部位缓缓展开，并且在此过程中持续进行旋转（现场演示）。

可缩放的矢量图像（SVG）

HTML和CSS虽然具备强大的动画处理能力，但它们在绘图元素方面存在不足。SVG技术恰好填补了这一空缺，并且还配备了专有的动画功能。这部分SVG动画技术特别被称为同步多媒体集成语言，简称SMIL。

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

同样可用于：

其中一个基元，

标签在SVG图形中尤为实用，它支持通过直线、弧线以及贝塞尔曲线来描绘各种路径。这些路径的描述方式与矢量图形软件输出的类似，简洁直观。对于SVG动画的制作，这一点尤为重要，需要深刻领会。

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

语法：

M x,y     新的起点 (标记)

L x,y      到哪里的直线

定义二次贝塞尔曲线，其参数为 cx, cy, x, y，并计算曲线上的一个点至坐标 (x,y) 的位置，以及曲线上的一个控制点。

将C曲线的cx、cy、dx、dy、x、y坐标参数应用于三次贝塞尔曲线，以绘制从起点(x, y)经过两个控制点直至终点的曲线。

A       椭圆弧

z       字符串最后，用于结束路径

让我们将这些矢量变得更加生动，您可以观看演示，其中一位人物正骑着滑板在白云之间自由穿梭。

冲浪板起伏不定，小人面部表情丰富，嘴角在微笑与更为灿烂的笑容之间频繁切换，眼球转动，瞳孔逐渐放大。这代表了SVG动画的四种不同形式。

这是一种SVG动画的基本应用，通过调整一个几何形状的关键参数，具体到本例中，便是调整眼睛的半径。

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

方便的是变化的属性还可以成为

标签功能支持你设定动画的移动轨迹。不过，有一个前提条件，那就是在两条曲线之间进行过渡时，必须采用相同类型的曲线，并且控制点的数量也必须一致。这些曲线必须由相同字母标识的位置来定义，唯一可以变化的只是参数的设定。举例来说，在调整小人的嘴巴动作时，仅“微笑”和“大笑”两种表情的位置被明确标注。SVG动画会自动完成这些位置的插值计算。

自然，SVG支持几何形态的调整，并且能够制作成动态效果。在制作动画时，需使用特定的动画标签。你需要明确指定动画所涉及的具体变化部分，并给出一系列以分号分隔的关键帧值。此外，你也可以构建动画转换，只需通过设置浏览器的”sum”属性即可。

几何转换的动画：

...

第三个以及最后一个SVG动画标签同样十分实用。它们能够使对象沿着既定轨迹进行移动。其中，还有一个不为人知的技巧，即“auto”属性。这个属性使得对象不仅能沿着路径行进，还能保持自身的朝向，就像在道路上行驶的车辆一样。

...

SMIL功能丰富，具备众多动画控制特性。在其API中，揭示了诸如start、stop和pause等函数，它们能够实现动画的全局性启动、停止和暂停。此外，在所有三种动画标签中，均设置了begin与end属性。这些属性能够与事件节点、用户事件或动画事件形成强大的组合。您可以根据需要，设定动画在点击后的一秒内结束或启动。

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

HTML5绘图