如何创建可扩展所有设备的动画

网络上的动画特别细微,因为我们必须调整我们的工作以考虑带宽,代码兼容性和产品设计。在本文中,我将解释真正推荐的设置响应可伸缩动画。我还将介绍使用动画实现的不同方式积极的用户体验在我们的多设备世界中实现平等。

我将介绍一些关键用例:向SVG精灵添加CSS动画,处理需要复杂移动的独立图形,创建适应视口的响应体验,以及使移动设备的动画更简单。

我强烈建议使用SVG(可缩放矢量图形)来生成具有响应动画的图形。这些是与分辨率无关的,因此您不必加载额外的HTTP请求,也不必使用替换的图像媒体查询使自己陷入困境。

作为img属性的替代,图片元素非常好地处理图像替换,但是当处理不同大小的运动图像时,保持动画一致变得更加麻烦。 SVG在这方面要优越得多:我们可以编写一次代码并继续调整图像的视觉复杂性。

SVG还提供了一个可导航的DOM,因此可以轻松地在复杂的图形内部进行操作并单独为元素设置动画。顾名思义,SVG是按比例建立的。调整SVG的大小非常简单直观。

即使有这些关键功能,单位甚至我们感知图像的方式也会从屏幕尺寸变为屏幕尺寸。别担心;我帮你盖好了!让我们来看看使用响应式动画的几种方法。

SVG精灵和CSS动画

第一种技术特别适用于响应式独立动画 - 例如在说明文本时。我们从典型的响应式精灵开始,不仅适应图像的大小,还适应图形的复杂性。当您考虑在较小的屏幕上可以直观地解释什么时,这很有意义。为了使我们的动画图形保持清晰,我们还必须考虑屏幕空间。

Scalable icon

通过这种方法,以及改变尺寸,我们还降低了设计的复杂性

看看上面的插图。在左侧,您可以看到我们专为桌面,平板电脑和移动设备实施而设计。在右边,我们做了两件事准备出口。

首先是删除重复。我们可以清楚地看到桌面和平板电脑视图足够相似,我们可以改变属性或用CSS媒体查询替换它们。这种改变的一个例子是调整背景,使其为绿色而不是蓝色。对于山脉,不同设备尺寸之间的设计变化非常重要,我们需要在元素上应用一个类来隐藏或显示它。

这项技术最重要的部分在于我们处理viewBox属性的方式。您可以将viewBox视为我们查看SVG的小窗口。 SVG本身可以超出viewBox的范围,但只有其中的区域可见。其余的将被裁剪掉。

对于桌面和平板电脑版本,我们只想显示第一个图块,所以最初我们在SVG中将viewBox内联设置为仅覆盖精灵的顶部:ViewBox =“0 0 490 474”。然后我们用JavaScript将可见区域移动到“0 490 500 500”

复杂的运动

任何时候你有一个独立的图形与更复杂的运动,我建议切换到GreenSock动画平台(GSAP),而不是使用CSS。尽管GSAP提供了许多很酷的东西,但这种情况下的主要优点是双重的。
首先是跨浏览器的稳定性。

感谢我们所有的浏览器和系统,前端开发意味着一个庞大的测试矩阵。当我们包含移动设备时,它会呈指数级复杂化。较旧的Apple设备上较旧的Safari浏览器可能会对移动SVG提供支持,而且Android上也有很多问题。 GSAP提供非常稳定的运动,而不会牺牲速度。

第二个优势是时间表。这允许堆叠补间甚至交错效果,具有流线型和直观的代码。对于本文中的其余示例,我将对GSAP和SVG进行配对。

让我们首先确定具有变换和不透明度的动画元素是最高效的方法。浏览器更容易进行优化,因为它可以减少重新绘制,这是最重要的事情,让你关注jank-和无口吃的动画。

此外,如果我们使用SVG DOM中的属性,它们将与整个SVG一起扩展,因为它们正在尊重viewBox中的空间。因此,如果使用百分比,弹性框或其他技术缩放复杂的SVG,您的动画也会相应缩放。这意味着你不必调整任何东西;您可以专注于正确编写代码一次。这是一个非常巨大的福音。

Full scale design

插画家的原创设计 - 我们先设计一切,然后慢慢揭示事物

例如,让我们考虑一个非常复杂的动画,如上图所示。我通常会首先设计我需要的所有元素,并随着时间的推移慢慢显示它们。这使我可以提前计划好事情,从而使代码更清晰,更清晰。

完成的动画是完全可扩展的 - 您可以在按钮运行时随机调整按钮,并将整个按钮调整为新的百分比(参见下图)。

Scalable button

单击按钮时动画会改变大小,但动画体验保持一致

响应式用户体验

设计适应视口的响应式体验依赖于设计阶段的一些规划。你可以把它想象成几个互锁的乐高积木:我们经历设计,构建和开发阶段,将每个特定区域确定为自己,但用户最终得到的是每个视口的完整(但完全不同)视图。

我们采用这种方法制作了Huggy Laser Panda动画。通过访问来看看它netm.ag/demo3-278。考虑到必须切换和堆叠的单元,我们仔细设计了这个。

在移动设备上,为了使部件正确互锁,我们调整了右侧部分的位置(为了清晰起见,以品红色标出),并将其翻转以便可以适当堆叠。

我们确保盒装部分中显示的每个部分都在各个SVG中导出并正确命名,包括较小的单元或组。这意味着在我们的导出设置中(我使用Jake Archibald的SVGOMG),我们不会删除不必要的ID或组。

然后我们使用多个功能。每个部分都是独立的范围,并且循环的所有动画都有一个重复的功能。

function revolve(){var tl = new TimelineMax(); tl.to(gear,4,{transformOrigin:“50%50%”,rotation:360,repeat:-1,ease:Linear.easeNone},“begin”); ...返回tl; }

这使得设计更容易建立和推理。我们甚至可以最初暂停每个动画,因此它可以由用户点击事件触发。现在,从设计到成品,一切都是必需的部分,很容易知道去哪里进行调整。

我们将这些构建分开并让每个类似乐高的部分通过百分比进行调整,并且它可以很好地扩展。或者,根据支持级别,flexbox同样可以正常工作。

在移动设备上减少pizazz

让我们面对现实,移动连接(特别是在欠发达国家)可能非常缓慢。无论您在网站上只有几个关键的动画交互还是巨大的WebGL体验,有时在桌面上看起来漂亮的动画无需缩小到移动体验。

对于大型画布动画,甚至是对用户体验不重要的非常复杂的SVG动画,有时您可以做的最好的事情就是调低音量或为较小的设备关闭它。

Active Theory的网站通过向您展示桌面上的完整粒子画布动画(在移动设备上用简单的多边形背景替换)来完成这项工作(见下图)。移动设备上的互动仍然非常重要,甚至超出了我们对原生的期望。

Active theory

主动理论保持其视觉语言的一致性,同时在移动设备上放置重型画布动画

该团队仍然以您浏览网站的方式展示其互动能力,这在移动设备上可能比动画背景更令人印象深刻。该设计可以节省带宽。

结论

无论您是从头到尾设计响应式还是简单地在移动设备上关闭动画,对于观看者在设备之间体验的内容,制定具体计划至关重要。在移动为王的景观中尤其如此。内容,图像类型和用户带宽都有助于指导响应式设计的动画选择。

话题



翻译字数超限