跳到主要内容

使用GSAP增强SVG动画

Flash横幅的时代即将结束,现在是时候进行更好的替换了。HTML5动画是完美的继承者,特别是考虑到现代浏览器如何处理和优化使用JavaScript和CSS创建的动画。

SVG也是创建横幅的绝佳工具。通过动画SVG图像的内容,您可以创建在所有屏幕分辨率上看起来很棒的吸引人的动画。在本文中,我们将使用JavaScript为SVG横幅制作动画。

什么是GSAP?

GreenSock Animation Platform (GSAP) is one of the fastest animation libraries

GreenSock动画平台(GSAP)是最快的动画库之一

GreenSock动画平台(GSAP)是一套用于创建脚本动画的工具,它是当今最强大的JS动画库之一。我不为GreenSock工作,他们也没有付钱给我写这篇文章。我只是喜欢图书馆,并强烈推荐它提供的强大功能。 GSAP已经存在了很长时间,并且附带了一个成熟的API,涵盖了我们绝大多数的动画用例。

GSAP的创建非常注重性能和优化,使其成为最快的动画库之一(它的速度比最快20倍)JQuery的)。甚至谷歌开发人员也推荐GSAP用于基于JavaScript的动画。

GSAP还解决了浏览器兼容性问题,因此您不必担心浏览器前缀,错误或属性不一致。它可以为您提供所有跨浏览器的功能。

GSAP的首要优势在于其动画排序功能。您可以创建单独的补间来动画几乎任何元素的属性。您还可以将补间链接到时间轴,从而可以很容易地将它们作为一个整体进行控制,并精确地管理它们相对于彼此的时间。您甚至可以根据需要在其他时间轴内嵌套时间轴。

The GreenSock team has created quite a lot of animated SVG and HTML5 demos, including banners like this one, on its Codepen profile

GreenSock团队在其Codepen个人资料中有很多动画SVG和HTML5演示,包括像这样的横幅

GSAP附带核心工具,还有额外的插件使您能够扩展其功能。您只需添加特定项目所需的插件,从而保持尽可能小的文件大小。

GSAP的TweenMax是一个功能齐全的工具,除了通过默认包含一些GSAP的实用程序插件提供额外的功能外,还可以处理任何属性的动画。重点是全功能而不是轻量级。 TweenMax还包括我们将在本教程中使用的所有时间轴排序和控制功能。

GSAP可以配置为使用您选择的选择器引擎 - 它甚至可以回退到文档。 querySelectorAll()如果您更喜欢vanilla JavaScript。因此,与许多其他动画库不同,它具有零依赖性。现在你(希望)在GSAP的超级大国上出售,让我们把它付诸实践,看看用它制作动画横幅是多么容易。

准备资产

在本教程中,我们将为(修改过的)横幅设置动画最初由Freepik设计。下图显示了横幅的四个“屏幕”。我们将从一个动画到另一个动画,以创建复杂的整体动画。

The four scenes making up the banner. Each of these screens will be animated sequentially

组成横幅的四个场景。这些屏幕中的每一个都将按顺序动画显示

默认情况下,所有屏幕都在横幅内可见,堆叠在彼此之上。使用GSAP,元素被隐藏,然后再动画到视图中,然后再次出现,以便下一个屏幕上的元素可以动画。我们将动画分解为单个补间,并组合成时间轴(每个屏幕一个)然后添加整个横幅的一个主时间轴。

首先,我们需要在页面中包含TweenMax。我们可以从CDN加载它:

接下来,我们将SVG的可见性设置为隐藏。这是你经常会发现的事情。因为动画只会在加载脚本后启动,所以这样做有助于我们在动画开始之前避免横幅资产的短暂“闪现”。

Svg {visibility:hidden; }

在我们运行动画之前,我们将在脚本开头再次取消隐藏SVG。

GSAP的补间方法

要创建一个简单的补间,您可以使用GSAP的一种方法:from(),to()或fromTo()。用于为元素设置动画的示例可能如下所示:

TweenMax.from('#element',duration,{property:value})TweenMax.to('#element',duration,{property:value})

from()方法基本上是向后补间 - 您定义起始值(在补间中),当前值用作目标值。这非常适合在屏幕上设置动画对象,因为您可以按照希望它们查看补间结尾的方式进行设置,然后从其他地方设置动画。这正是我们要为横幅屏幕做的事情。 to()方法将目标元素从其当前状态设置为您定义的目标值。希望fromTo()现在不言自明。

这些方法用于定义单个补间(可能是动画多个属性)。然后可以将这些补间附加到一个时间轴,以便它们按顺序执行:

var tl = new TimelineMax(); / *创建一个时间轴* / tl.from('#element',duration,{property:value})。from('#element',duration,{anotherProperty:value,ease:easingFunction})。to('#anotherElement ',duration,{someProperty:value,someOtherProperty:value,delay:value})

您可以根据需要添加任意数量的补间,这些补间可以应用于一个或多个元素。时间轴将按您指定的顺序播放这些补间。动画越复杂,它们将包含的场景就越多。每个场景都是一系列“微观”动画(补间),它们发生在主时间轴的某个点上。补间可以相互重叠并相对于彼此的时间播放。

您还可以将时间轴组合到一个主时间轴中。这是通过使用TimelineMax的add()方法将时间轴添加到主时间轴中来实现的。然后可以像个别补间一样控制这些时间线。

对于我们的动画横幅,我们将创建四个不同的时间轴(每个屏幕一个),然后这四个时间轴将合并为一个主时间轴:

var master_tl = new TimelineMax(); master_tl.from('svg',。2,{autoAlpha:0})/ *首先显示隐藏的SVG * / .add(animateScreen1())。add(animateScreen2())。add(animateScreen3())。add( animateScreen4());

add()方法中的每个函数都将用于定义和返回时间轴,这使得这种排序成为可能。 autoAlpha属性与不透明度相同,只是当值达到0时,visibility属性将设置为hidden,以提高浏览器呈现性能并防止目标上的点击或交互。

With the help of GSAP’s plugins, you can create impressive HTML text animations, like the GreenSock homepage banner

借助GSAP的插件,您可以创建令人印象深刻的HTML文本动画,例如GreenSock主页横幅

动画元素进入视图

我们希望将屏幕设置为视图动画,以便它们看起来好像最初是在画布外。我们将使用GSAP的from()方法来定义它们的动画来源。让我们从左侧文本中滑动淡出开始。

首先,我们在animateScreen1()函数中创建并返回一个时间轴,然后我们添加补间,将文本设置为视图动画。您需要确保为所需的元素添加适当的类名和/或ID的动画以供参考。

function animateScreen1(){var tl = new TimelineMax(); tl.from('#Banner1-text',。6,{opacity:0,xPercent:“ -  100%”,ease:Power3.easeOut})return tl; }

文本从-100%位置(这意味着它被翻译到横幅的可见区域之外的左侧)和不透明度值0进行动画处理。稍后我们将进入缓动功能部分。

GSAP不使用translateX和translateY,而是使用x,y和xPercent以及yPercent将转换应用于元素。您可以在此了解它们之间的区别Petr Tichy的视频教程或这个来自GreenSock的博客文章

同步补间

我们希望在文本动画的同时将世界地图淡入视图。这可以通过在时间轴内使用“标签”来实现。标签定义动画开始的时间点,并且可以在时间轴内的多个补间中使用,以便同时播放这些补间。

tl.from('#Banner1-text',。6,{opacity:0,xPercent:“ -  100%”,ease:Power3.easeOut},“first”)。from('#Banner-world-map', 1,{opacity:0},“first”)

您可以随意拨打标签。在这里,我们选择了“第一”,因为这是第一个时间点,可以这么说。

GSAP的标签也可以是相对的:您可以使用一个标签来指定何时相对于前一个补间启动补间。例如,您可以使用“+ = 1”标签,指示当前补间(或时间轴)应在前一个补间完成后开始动画一秒钟。

摇摆不定的动画

如果要将相同的动画按顺序应用于多个元素,可以利用GSAP的惊人功能。这样可以避免为所有这些不同的元素编写补间的多个实例。

在第一个屏幕中,有两组图标:单色组和彩色组。每组都是一组( )其中包含其他组,每个图标的内容一个。我们将使用staggerFrom()方法定义将应用于每个组中的图标的补间。此方法将一个接一个地“弹出”图标:

.staggerFrom(“#monochrome-icons> g”,。2,{scale:“0”,不透明度:“0”,transformOrigin:“50%50%”},0.1,“秒”)

标签前面的数值(此处为“秒”)是交错值。这表示错开每个补间开始的时间量(以秒为单位)。

指定缓动函数

当要将第二个屏幕动画化为视图时,负责该动画的功能首先需要删除前一个屏幕的元素。第二个动画将在animateScreen2()函数中定义,并将使用staggerTo()为第一个屏幕的元素设置动画:

function animateScreen2(){var tl = new TimelineMax(); //首先删除场景1元素tl.staggerTo(“#monochrome-icons,#colored-icons> g,#mobile,#tablet,#thedestop”,0.3,{x:“+ = 200”,autoAlpha:0, ease:Power2.easeIn},0.03).staggerTo('#Banner1-manage,#Banner1-projects,#Banner1-text',0.5,{attr:{x:-200},autoAlpha:0,ease:Power2.easeIn },0.1,“ -  = 0.5”).to('#Banner-bg',。6,{fill:“#D1F2F8”},“ -  = 0.2”)//为第二个场景设置动画.add(“first” ,“ -  = 0.6”).... tl.delay(.5);返回tl; }

为ease属性指定的缓动函数(Power2.easeIn)用于创建更多弹性,从而增加整体流体效果。 GSAP附带了大量内置缓动功能。了解他们的一切在文档中

tl.delay(.5)部分用于延迟动画的执行。我们推迟它的原因是在我们到达另一个场景之前给用户一些时间来阅读第一个场景的内容。如果动画阻碍了正在阅读的消息,那么横幅将毫无用处。 .add(“first”,“ - = 0.6”)使我们能够通过收紧前一个和后一个补间之间的时间来创建重叠。

指定SVG转换起源

第三个屏幕的代码看起来类似于之前屏幕的代码,但新属性除外,该属性用于为时钟的时针和分针设置动画:

function animateScreen3(){var tl = new TimelineMax(); TL。 ... .from('#hours',2.4,{rotation:“360”,svgOrigin:“496.5 53.2”,ease:Power0.easeNone},“first”)。from('#minutes',。6,{旋转:“360”,svgOrigin:“496.5 53.2”,缓解:Power0.easeNone,重复:3},“first”)返回tl; }

您可以使用百分比值(相对于元素的边界框)或绝对值(相对于整个SVG画布)指定SVG元素的变换原点。后者是使用svgOrigin属性指定的。有时使用svgOrigin而不是transformOrigin会很有用。

由于两个时钟指针都相对于画布上的相同点进行了动画处理,因此我将该点的坐标指定为它们的变换原点。

使用Bézier补间

在最后一个屏幕中,我们有一行文本被分成多个元素 - 一个包装每个单词,以及一个号召性用语。我们在这里做的最好的事情是为单词的可见性设置动画。

也就是说,如果您要创建一个动画HTML文本的HTML5横幅,您可以使用GSAP的插件创建极其令人印象深刻的文本动画。 GSAP的主页横幅(在对页的底部)就是一个很好的例子。你可以检查它的代码这里

要为“号召性用语”按钮创建一个摇摆效果,我们希望将其连续几次左右旋转。我们可以使用Bézier插件平滑地移动某个集合中的值,而不是使用多个旋转补间,从而避免单个补间可能导致的抖动效果。

.to('#call-to-action',0.9,{transformOrigin:“50%200%”,bezier:[{rotation:-10},{rotation:8},{rotation:-5},{rotation: 3},{rotation:0}],ease:Power2.easeInOut},“+ = 0.3”)

为bezier对象提供一个值数组,它将平滑地为它们设置动画。它会变得更简单吗?

加起来

当您开始创建有序的复杂动画时,GSAP的力量真的很闪耀。它的所有排序和时间控制功能使其成为当今动画工具包中不可或缺的工具。所以,继续前进,乘坐GreenSock,将你的动画能力提升到一个新的水平。

这是Codepen上完成的动画横幅

本文最初发表于273期网络杂志

See Chris Gannon live at Generate London and get an exclusive insight into his work

在Generate London观看Chris Gannon,了解他的作品

您想了解更多有关SVG动画和GSAP的信息吗?交互式SVG专家Chris Gannon将深入探讨GreenSock动画平台生成伦敦9月21日至22日,为期两天/单轨的会议还有Anton&Irene,Aaron Gustafson,LéonieWatson,Steve Fisher以及更多优秀演讲者。预订你的今天!

相关文章:



翻译字数超限