设计自由之路机加载动画

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

SVGs和Wayback机器标志

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

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

Wayback机器徽标

并有字母顺序向上反弹。

动画Wayback机器徽标

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

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

设计自己的动画

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

参数控制

6
2
250
0.2每个字母
三十像素
0像素
0像素

SVG动画

GIF动画

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

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

这个怎么运作

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

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

这SVG将呈现为:

w ^

我直接抓住了“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”。

动画W¯¯SVG

在将其扩展到上面的完整工具时,显然会涉及一些簿记,但这是基本的思想!

结论

我希望您喜欢我们如何帮助设计新的Wayback机器加载动画学习。如果您想帮助支持Wayback机器自己,那么请考虑捐助,以互联网档案馆。他们是一个非盈利组织,依靠我们的捐赠来帮助保存和分享具有历史意义的网站快照、视频游戏、音乐等等。

也觉得免费在Intoli与我们取得联系万博输10万怎么办如果您正在寻找一些有关web抓取和数据智能的外部专业知识。我们喜欢解决具有挑战性的问题,我们期待听到你在做什么!

建议的文章

如果你喜欢这篇文章,那么你也会喜欢这些相关的文章。

1Manbetx

通过埃文Sangaline
2018年11月6日

这是一个互动的解释,解释了不公正地划分选区是一种多么危险的策略,有可能引发蓝色浪潮。

1Manbetx

使用AOPIC算法进行高效的宽带抓取

通过安德烈Perunicic
2018年9月16日

了解如何估算页面的重要性和广阔的爬网过程中分配带宽。

阅读更多

用户代理 - 使用谷歌Analytics(分析)和CircleCI生成随机用户代理

通过埃文Sangaline
于2018年8月30日

一个免费的数据集和JavaScript库,用于生成始终是当前的随机用户代理。

阅读更多

评论