使用JavaScript动画SVG

Graphic of 4 mountain scenes in circles on a computer screen

在JavaScript中使用CSS3或Web Animations API在浏览器中本地实现了很多功能。简单的动画和过渡非常适合CSS3 - 而更复杂的动画需要使用JavaScript来完成。

Web Animation API的问题是浏览器支持和当前功能集。作为一个相当年轻的规范,这将在未来几年得到改善。

为了对抗这个功能和浏览器支持的不足,我们可以转向动画库等使用GreenSock(GSAP)。 GSAP使我们能够创建复杂的动画和多个时间轴,能够动画几乎所有元素或属性/值对 - 所有这些都通过简单直观的语法实现。

+$In this tutorial we're going to use the GSAP library to create a few animations. The main and most complex animation we will be creating will be transitioning the scene from day to night and we will see how easily we can chain together multiple transitions to create complicated animations. We'll also be creating a few simple animations that will be running constantly.

+$If you want more options for your animation project, check out our compilation of the+$best free graphic design software

下载文件本教程。

01. 文件设置

首先,我们需要分叉GreenSock笔为了试用它的高级插件。对于本教程,我们将使用已经优化并粘贴到HTML编辑器中的SVG。但是,如果您使用自己的SVG,则需要确保所有元素都具有唯一ID。

02. 创建第一个时间轴

GSAP提供两种时间轴类型:TimelineLite和TimelineMax。 TimeLineMax版本提供对其他功能的访问,例如重复动画的功能,以及反向播放动画等功能。我们的第一个时间表将是水,我们将无限重复和yoyo来回。

var animation_water = new TimelineMax({repeat:-1,yoyo:true});

03. 创建第一个动画

为了给水设置动画,我们在SVG中有另一条路径,隐藏为“0”不透明度。我们将利用MorphSVG插件将我们原来的水路改造成新的水路。我们将水元素'12px'向下移动到y轴上。属性末尾的两个数字分别代表延迟和开始时间。

animation_water .to(“#water”,2,{y:12,morphSVG:“#water-2”,ease:Linear.easeNone},0,0);

04. 可重复使用的属性

由于我们将多次重用许多属性和值,因此我们将为这些属性创建变量。

var animation_ease = Linear.easeNone;

05. 控制台记录

GSAP库使我们能够从任何给定的时间线获得许多属性。我们可以在控制台中记录这些内容,以确保一切正常运行。

console.log('animation_water duration:'+ animation_water.duration()。toFixed(2));

06. 云时间轴和控制台日志

+$For every element we wish to animate separately and constantly, we need to create a new timeline. We also want to log that timeline in the console as we go.

var animation_cloud = new TimelineMax({repeat:-1,yoyo:true}); console.log('\ n'+ ... animation_cloud.duration()。toFixed(2)+'\ n');

07. 云动画

现在我们已准备好时间轴,我们可以创建我们的云动画。采用新属性的动画部分可以处理使用逗号分隔的多个属性/值对。

我们的云动画只需要很细微,所以我们只需要少量更改值。

animation_cloud .to(“#cloud”,3,{x:-2,y:1,scale:0.95,rotation:1,ease:animation_ease},0,0);

08. 创建夜间动画

接下来,我们将开始创建我们的日夜动画。我们将为循环时间和日期创建一个变量。 GSAP中的“yoyo”设置也使我们能够在重复之前延迟动画。

var day_night_cycle_time = 15; var animation_delay = day_night_cycle_time / 2; var animation_toNight = new TimelineMax({repeat:-1,yoyo:true,repeatDelay:animation_delay});

09. 为叠加层设置动画

在我们的SVG内部,我们有一个由矩形构成的覆盖层,覆盖整个图像,背景渐变与我们的夜间背景相同。叠加应用“乘法”混合模式以使整个图像变暗。我们的动画只是转换了这个元素的不透明度。

animation_toNight .to('#nighttime-overlay',day_night_cycle_time,{opacity:1,ease:animation_ease},0,0);

10. 为渐变设置动画

GSAP在常见的“to”和“from”类型之上提供其他补间。为了动画我们的渐变,我们需要的补间类型是'staggerTo'补间。我们还可以使用'cycle'属性来将色轮旋转到我们的新值。

.staggerTo('#daytime-gradient stop',day_night_cycle_time,{cycle:{stopColor:['#060414','#416584']},ease:animation_ease,},0,0)

11. 为太阳设置动画

我们可以继续为'toNight'动画添加动画。这次我们将添加一个新的'to'补间以设置我们的太阳。我们将显示时间设置为周期时间的一小部分,以便在月亮之前为太阳设置动画。 GSAP使我们几乎可以设置任何属性。我们将使用它来将'cx'和'cy'属性设置为右侧山下的动画。

.to('#sun',day_night_cycle_time / 1.25,{scale:0.9,attr:{cx:“753”,cy:“697”},ease:animation_ease},0,0)

12. 为月亮制作动画

我们将使用我们用于动画太阳的相同技术(参见上面的步骤11),以便将月亮设置为视图。当然,我们可以使用一个补间实现这一点,但是为了创建一个虚拟弧,我们将分为两部分。在这两个部分中,我们还将向scale属性应用新值。

.to('#moon',day_night_cycle_time / 2,{scale:0.9,attr:{cx:“174.5”,cy:“202.5”},ease:animation_ease},0,0)

月亮动画的第二部分等待第一部分在它开始之前完成。注意:月球动画的这两部分在动画代码中与我们正在使用的其他日夜属性一起链接在一起。

animation_toNight ... .to('#moon',day_night_cycle_time / 2,{scale:0.9,attr:{cx:“410.5”,cy:“114.5”},ease:animation_ease},day_night_cycle_time / 2,0;);

13. 为星星设置动画

我们日夜动画的唯一部分是星星。我们将通过转换许多属性来动画星星。第一个是通过动画显示它们的不透明性来简单地将它们带入视野。

.to('#stars',day_night_cycle_time / 2,{opacity:1},day_night_cycle_time / 2,0)

接下来,我们将使用'from'补间来移动星星,并在它们设置为视图动画时从负角度旋转它们。我们使用一些简单的数学来计算动画时间和延迟,所有这些都基于我们的'day_night_cycle_time'变量。

.from(“#stars”,day_night_cycle_time  - (day_night_cycle_time / 4),{y:150,rotation:-15,ease:animation_ease},day_night_cycle_time / 4,0)

14. 创建星星时间轴和控制台日志

+$Now we've created our day-to-night animation, we can create another constant animation to make our stars blink. We'll create the new timeline and then log the timeline duration in the console.

var animation_stars = new TimelineMax({repeat:-1,yoyo:true});

+$Now we've created the timeline ready for animation, we need to create our blinking animation. The animation is really simple – all we want to do is reduce the opacity value. Thanks to the 'yoyo' property, the opacity will animate on and off and so will make the stars look like they are blinking.

animation_stars .to(“#stars”,0.5,{opacity:0.5,ease:animation_ease},0,0);

16. 延迟闪烁

在最后一步中,我们的目标是星星组,以便应用我们的闪烁动画,但是如果星星一次闪烁一个而不是同时闪烁,它会看起来好多了。我们通过分别定位每个星并应用不同的动画来实现这一目标。

animation_stars ... .to(“#star-two”,0.5,{opacity:0.5,ease:animation_ease},1.25,0).to(“#star-three”,0.5,{opacity:0.5,ease:animation_ease}, .75,0)......;

17. +$Add Snow

而已!我们的昼夜骑行动画已经完成,它看起来很棒,但我们不必停在那里。由于图像是SVG,我们可以轻松地为我们的景观添加新元素。让我们加点雪。我们将使用两个单独的层来完成此操作。每一层都有一个椭圆形集合,足以覆盖景观,然后是上面重复的相同集合。

 ...  ... 

18. 创建下雪时间表

我们为雪创建了两个单独的时间轴,以便能够在不同的持续时间内为它们制作动画。我们还会将其持续时间记录到控制台。

var animation_snowTop = new TimelineMax({repeat:-1,repeatDelay:0}); var animation_snowBottom = new TimelineMax({repeat:-1,repeatDelay:0});

19. 为雪动画

为了给我们的雪层添加动画效果,我们希望沿着垂直轴移动这两层。通过改变它们的持续时间,我们将得到以不同速度移动的层的外观。动画的工作原理是沿垂直轴移动椭圆集合,直到第二个集合代替第一个集合。然后我们重复动画。

animation_snow .to(“#snow-top-layer”,7,{attr:{transform:“translate(24 -108)”},ease:animation_ease},0,0);

查找教程笔的完整集合这里

本文最初发表于创意网页设计杂志Web Designer。在此订阅Web Designer

相关文章:



翻译字数超限