通过埃文Sangaline| 2017年10月11日

SVGs和Wayback机器标志

我得说，我是一个大风扇可伸缩矢量图形（SVG）。它们是一种开放标准，所有主流浏览器都支持它们，它们通常比光栅化图像占用更少的空间，而且无论大小或分辨率如何，它们看起来都干净利落。作为SVG标准的基础，XML现在可能不是很酷，但它确实使SVG很容易从基本上任何语言解析和修改。我在过去构建时就利用了这种可编程性svganimator，一个在静态SVG图像之间创建平滑动画的实用程序。

正是因为有了这种编程动画svg的经验，我的耳朵才会竖起来马克·格雷厄姆，的主任互联网档案馆的 Wayback机器，提到他正在寻找一种新的Wayback机器加载动画。马克有一个非常明确的想法:他想采用标准的Wayback机器标识

并有字母顺序向上反弹。

这听起来很简单，但仍有动画的外观和感觉如何完全是一个很大的空间变化。例如，如何高应该跳跃是多少信件应该在任何给定的时间是在空中？如果有长时间的停顿在年底或立即应该的循环？

我想，一个简单的方法，以避免回答这些问题我自己是使构建基于不同的参数动画的互动工具。然后，我可以只发送给马克，让他挑选自己喜欢的最好的变化。于是我开始把这个在一起，并很快意识到这实际上是很有趣发挥各地，并建立不同的动画。我决定，这件事情，我们的读者很可能还可以享受，所以我在这里分享。您可以在下一节中设计自己的动画，然后我将解释它是如何通过编码在JavaScript简化版本的过程通过行走。

设计自己的动画

您可以在这里修改各种动画参数，下面的SVG动画将实时更新。将鼠标移到任何标签上，都将为参数表示的内容提供额外的解释，但您可以随意滑动它们，自己找出答案。一旦您制作了自己喜欢的动画，您可以通过复制和粘贴页面url(查询字符串将对您的动画进行编码)来共享它，或者您可以将它呈现为GIF并保存它。

参数控制

SVG动画

GIF动画

警告:动画GIF需要很长时间才能生成。等到你对结果满意并想要一个最终的动画栅格化版本。

您可以单击鼠标右键，选择“图片另存为...”下载动画渲染后已经完成。

这个怎么运作

让我们通过编写一些JavaScript代码来为一个简化的情况生成类似的动画，从而对如何构建这一点有一个基本的了解。不要处理所有的14个字母在Wayback机器的标志，让我们考虑第一个:“W”。基本逻辑和方法是相同的，但这将极大地简化初始SVG的复杂性，并使代码更具可读性。我们需要一些样板文件来定义SVG名称空间和版本，但除此之外，我们基本上只需要定义一个名称空间路径元件，它描绘出“W”和用纯色填充它的形状。

<？XML版本= “1.0” 编码= “UTF-8” 独立= “否”>

这SVG将呈现为：

我直接抓住了“W”的路径官方矢量版的Wayback机器标识，但它最初可能是使用Inkscape中或者一些等效的矢量美术编辑器。我们不需要过多地担心路径本身，我们只需要让形状保持原样，并使用变换来移动它。同样的变换也同样适用于其他形状或字母。

我们正在试图与我们的“W”来完成的基本思想是让跳上跳下。第一个重要的问题是我们需要的地址是我们想究竟怎么跳。我们将需要定义信将是在每个时间点，以完全确定跳跃的样子。您通常称之为确定两个点之间的这些转变职能缓解功能，但在这里我们将扩展这个概念，这包括退回回到起始位置。你可以在这里看到一对夫妇将有质的不同行为，不同的可能性。

该线性功能将平稳看起来与急剧变化的方向，而圆一个看起来更加“现实”，因为它非常类似于抛物线轨迹，我们会从牛顿力学期待。快活，另一方面，只是一系列的圆啤酒花与每个连续跳达到较低的最大高度......你知道，弹跳。如果我们限制时间的零到一的范围内，那么我们就可以定义线性和圆在JavaScript缓和功能如下。

//在[0，1]常量linearEasing =（时间，maximumHeight = 1）=>（maximumHeight *（时间<0.5 2 *时间范围内返回倍线性/三角形的跳跃：2 *（1  - 时间）））;（（时间 -   -  0.5）** 2 //在[0，1]常量circularEasing =（时间，maximumHeight = 1）=>（maximumHeight *（2 * Math.sqrt（0.25的范围返回倍的圆形跳））））;

现在我们只需要构造SVG动画指令，我们可以将它与我们的SVG“W”图像集成在一起。对SVG动画的支持是通过同步多媒体集成语言（SMIL）......这是诚实的那种复杂。幸运的是，我们只需要使用一个比较简单的部分，以我们的动画元素。

如果我们坚持这样animateTransform元素在另一个元素中的元素，比如our路径例如，概述“W”，然后它将根据X Y中指定的翻译序列值并指定相应的按键时间keyTimes。在上面的例子中，动画从没有转换开始，因为第一个X Y对是0 0，然后在持续时间的一半时，它将向上平移10个像素，因为第二对是-10年0，最后它会回到原来的位置，因为它在0 0。动画将无限期地重复因repeatCount被设置为“不定”和一个循环的整个持续时间将是由于在5秒DUR = “5秒”。

要定义其他运动路径，我们只需指定它们对应的路径keyTimes和翻译值它可以很容易地使用我们的缓动函数来计算。我们只有在这个简单的例子使用了三个关键时间，但加入了更多将使我们能够更准确地逼近由任何给定的宽松函数定义的轨迹。你可以把每一次和像电影中的帧转换位置;我们有更多的帧，更好的实际运动将代表。

把这个都在一起，我们可以定义一个相对简单animateSvg ()函数，该函数使用一个ES6模板文字来填充“W”SVG中的适当属性。函数参数将允许我们指定的高度像素w ^将跳转（jumpHeight），动画的以秒的持续时间（持续时间)、缓动函数(缓解）和翻译职位的数量，我们将提供明确的值和时间（帧）。

常量animateSvg =（jumpHeight = 50，持续时间= 1，缓和= circularEasing，帧= 100）=> {//获得均匀间隔的时间值的每个关键帧常量次= [...阵列（帧+ 1）的序列.keys（）] .MAP（指数=>索引/帧）;根据缓和功能const的高度在每个这些时间//找到高度= times.map（时间=>缓和（时间，jumpHeight））;//我们其实是想这些是负面的，因为原产地是在右上角的常量negativeHeights = heights.map（高度=> -height）;//在到`keyTimes`分号分隔的格式常量keyTimes = times.join翻译倍（“;”）;// translate the heights into the `x y` pair format of `values`, with all x=0 const values = `0 ${negativeHeights.join(' ; 0 ')}` // fill the appropriate variables into a template version of the SVG return `   `; }

有一些小的事情正在进行，比如增加图像的高度以适应跳跃，并将“W”的起始位置完全向下移动jumpHeight- 但更主要的是，我们正在填充animateTransform根据指定的属性持续时间和平移的值，我们计算的使用我们的缓解作用。它整体是相当简单的，它为我们提供了一种简单的方法，根据自定义的参数，生成在浏览器中的动画SVG文件。在功能指定，例如默认参数，产生以下充气“W”。