跳到主要内容

开始使用GreenSock动画平台

GreenSock Animation Platform logo

GreenSock动画平台(GSAP)使您能够使用JavaScript(包括DOM,Canvas和CSS)以及您自己的自定义对象动画可以访问的任何内容。

GSAP还有助于更轻松地解决浏览器不一致问题用户测试,使您可以使用对象来管理复杂的动画,运行速度比jQuery快20倍。它已成为业界的标准,并已被用于无数屡获殊荣的网站。

01.设置基本HTML文件

Get started with GSAP: Set up a basic HTML file

包含图像商标HTML文件中的类

学习GSAP的最佳方法是看它的实际运行情况。在本教程中,您将了解平台的主要功能,以及您今天可以在项目中使用的工作示例!

通过设置基本HTML文件开始,您可以在其中放入JavaScript代码。包含带图像的图像商标类。您将使用GSAP为属性设置动画,以查看其工作原理。

        

02.包括GSAP图书馆

接下来,您需要将GSAP添加到您的Web项目中。在你之间

03.使用补间动画

补间是随时间更改值以创建动画的过程。例如,将对象从A移动到B,缩放或旋转它。您还可以补间自己的自定义值。

补间属性的最简单方法是使用TweenMax.to()功能。这需要一个目标对象,一个持续时间和你动画的属性/值对。要查看正在运行的功能,请使用以下代码尝试下面的每行代码商标作为目标对象:

//补间x从当前位置到400秒超过2秒TweenMax.to(“。logo”,2,{x:400}); //从当前位置到200的位置和不透明度为0,超过1秒TweenMax.to(“。logo”,1,{y:200,opacity:0}); //补间x和y为100,缩放为1.5,旋转90度,超过2秒TweenMax.to(“。logo”,2,{x:100,y:100,比例:1.5,旋转:90}) ;

04. Tween From和FromTo

Get started with GSAP: Tween from and FromTo

您可以为补间定义开始值和结束值

您可以使用,将属性从其当前值补间到新值至(),但你也可以补间一个值到它的当前值。例如,如果你的商标从x位置开始0你希望它结束那里,你可以这样做:

TweenMax.from( “标志”,2,{X:400});

在这种情况下,您的徽标将立即移至X = 400然后补间到X = 0的。您甚至可以定义开始值和结束值,使用忽略当前值从到()像这样:

TweenMax.fromTo( “标志”,2,{X:400},{X:200});

05.放松

Get started with GSAP: Easing

Easing为您的动画增添了个性

Easing是动画的“风格”,当值从A转换为B.而不是恒定的速度,称为“线性”,您可以应用函数来曲线速度。他们开始慢慢地逐渐加速吗?它们突然停止并在结束时反弹一点吗?在动画中,这些风格为您的作品增添了个性和情感。您可以应用这样的缓动函数:

TweenMax.to(“。logo”,2,{x:100,y:100,rotation:90,ease:Circ.easeIn});

06.缓和功能和输入/输出

Get started with GSAP: Easing functions and In / Out

GSAP有很多宽松的选择可供选择

GSAP包括各种缓动功能,例如背部弹跳保监会,和博览会。你可能也注意到了缓解函数有一个属性EaseIn,我们在上面的步骤中使用过。你也可以使用EaseOutEaseInOut。这些指示动画中应用缓动曲线的位置。尝试以下内容以查看结果:

//弹出TweenMax.to(“。logo”,2,{x:100,y:100,rotation:90,ease:Bounce.easeOut}); //使用弹性TweenMax.to(“。logo”,2,{x:100,y:100,rotation:90,ease:Elastic.easeInOut})缓入和缩小;

07.延迟补间

有时您会想要延迟动画的开始,要么将其与另一个动画同步,要么让它等待事件发生。您可以使用另一个名为GSAP的特殊属性延迟去做这个。尝试以下代码,了解如何延迟特定时间的补间:

TweenMax.to(“。logo”,1,{y:100,ease:Bounce.easeOut}); //将此补间延迟1秒TweenMax.to(“。logo”,1,{rotation:90,ease:Circ.easeOut,delay:1});

08.回调函数

要将动画与代码集成,了解事件何时发生非常重要,尤其是在动画结束或开始时。你可以使用的onComplete事件回调为此。您可能想知道补间何时开始使用在onStart。并且您可能还希望将补间与另一个动画同步,或者使用补间及其缓动来更新其他一些自定义对象。使用的onUpdate回调这个。以下是使用回调的方法:

TweenMax.to(“。logo”,1,{y:100,ease:Bounce.easeOut,onComplete:tweenComplete}); function tweenComplete(){console.log(“tween complete”); }

09.回调参数

在触发回调时,您可能希望将信息与回调一起传递给处理它的函数。您可能需要传递有关调用者或特定值的信息。这使您可以将动画与代码库的其余部分集成。所有参数都通过回调+ “PARAMS”, 那是OnUpdateParams

在以下示例中,您可以使用关键字跟踪补间的进度{自}并且可以看到如何使用数组传递多个参数:

TweenMax.to(“。logo”,1,{y:100,ease:Bounce.easeOut,onUpdate:tweenUpdate,onUpdateParams:[“{self}”,“completed”]}); function tweenUpdate(tween,message){var percentage = tween。 progress()* 100; // progress()是一个值0-1 console.log(percentage +“”+ message); }

10.控制动画

好的,所以你现在可以创建补间并简化补间,激活回调和参数。但是你如何控制动画呢?通常,您希望根据其他事件启动或停止它们。

如果您需要停止动画,可以使用暂停()方法。如果要恢复补间,请使用恢复()。完全破坏补间使用杀()。尝试以下内容,看看会发生什么:

// var to to tween var tween = TweenMax.to(“。logo”,2,{y:100,ease:Bounce。easeOut}); //立即暂停tween.pause(); //从事件setTimeout开始(function(){tween。resume()},1000); //事件setTimeout上的反向动画(function(){tween。reverse()},3000);

11. CSS和CSSPlugin

Get started with GSAP: CSS and CSSPlugin

CSSPlugin会自动检测动画何时需要

使用时包含CSSPluginTweenMax。它节省了大量时间,因为它可以使浏览器中的行为正常化,并在动画需要时自动检测。 CSSPlugin可以通过缓存和其他内部技巧处理补色,SVG动画和优化性能 - 通过CSS转换位置通常更有效。

当你使用它时,你已经看到了这个不透明度位置动画。它没有任何特殊编码!

12. 2D和3D变换

Get started with GSAP: 2D and 3D transforms

GSAP包含内置转换,允许您缩放,旋转平移和倾斜

CSS转换使您可以缩放,旋转平移和倾斜。它们可以在2D和3D中工作,以快速创建美丽的效果。 GSAP包含内置的转换属性,例如Xÿ回转的rotationX的rotationY如果skewX规模。尝试将以下补间应用于您的图片,而不是我们已尝试过的补间:

TweenMax.to(“。logo”,3,{x:100,y:100,scale:1.5,rotationY:360,ease:Bounce.easeOut});

13.时间表

Get started with GSAP: Timelines

GSAP的时间轴对象使您可以管理多个动画

一旦超出一个或两个补间,您可能想知道如何管理多个动画。 GSAP包括一个时间线反对就是这样做的。您将补间附加到时间线对象并且可以使用位置补间后的参数来计时它们。您可以让补间一个接一个地运行,或者有间隙,甚至重叠它们。使用类向HTML添加更多图像LOGO2Logo3分别。

要了解它的工作原理,请尝试以下操作时间线码:

//创建一个时间轴实例var tl = new TimelineMax(); tl.add(TweenMax.to(“。logo”,1,{x:50})); //注意最后的“0”使这个开始于0秒。 tl.add(TweenMax.to(“。logo2”,1,{y:100}),“0”); //注意“+.25”使这个开始于.25秒tl.add(TweenMax.to(“。logo3”,1,{rotationY:180,y:50,X:50}),“+ .25“);

14.时间表控制

除了控制动画外,您可能还想控制时间轴。幸运的是,你可以像动画一样暂停,恢复和反转。您还可以将参数添加到时间轴重复悠悠球并为整个时间轴添加回调。您还可以使用控制时间轴的速度时间刻度属性。尝试使用以下代码替换您的时间轴声明,以了解它的工作原理:

var tl = new TimelineMax({//无限重复:-1,yoyo:true,});

15.获取并设置属性

一个非常有用的功能是获取和设置补间和时间轴的属性。这样,您就可以了解GSAP对象的总体进度和持续时间,或者收集有关GSAP对象的其他信息。在这个代码示例中,您可以得到时间线的持续时间,然后它的持续时间来改变它。对于补间也是如此。这是另一种对事件做出实时反应并动态修改动画的好方法。在上一个时间轴代码之后添加以下内容:

//获取时间轴console.log的当前持续时间(tl.duration()); //在2秒等待setTimeout(function(){tl.duration(5);},2000)之后将持续时间设置为5秒;

 本文最初发表于创意网页设计杂志Web Designer。 购买问题279 要么 订阅 

阅读更多:



翻译字数超限