18868949445

三亚做网站:理解GSAP JavaScript动画指南

日期:2020-03-06 阅读:2239   作者:三亚网站设计开发公司

使用动画是使你的网站脱颖而出的最好方法之一。当它被巧妙地实现时,它会使用户眩目,并唤起人们对你最重要内容的关注。

当然,网络动画已经有好几年了。但是它确实被HTML5、CSS3和JavaScript的传播所取代。向你的站点添加移动从来都不容易——或者看起来更好。

三亚做网站在动画制作中最强大和最吸引人的工具是GRANSOCK动画平台(GSAP)它以代码为基础的方法和创造一些难以置信的特殊效果的能力而闻名。

今天,我们将介绍GSAP的基础知识。我们将解释它是什么,以及为什么你要用它来代替其他技术。另外,我们将向你展示它能做的一些例子。让我们开始吧!

GSAP Logo

通过代码动画

首先,这听起来可能是违反直觉的。动画是一种高度视觉化的艺术。因此,我们为什么要通过代码来创建这一点,而不是传统的基于GUI的工具?它有什么优点,它已经超过了标准的CSS3动画?

下面是为什么GSAP可能是你创建动画的最佳选择:

它与页面上的元素一起工作。

实际上,通过JavaScript可以访问页面上的任何元素都可以通过GSAP动画。它不需要为动画创建单独的画布。CSS元素、SVG图像甚至JavaScript对象都可以被操纵。这样可以让你更快地起床和运行。

内置兼容性

GSAP已经在所有主要的Web浏览器上进行了测试,包括互联网浏览器之类的遗留费用。所有与浏览器相关的调整和回退都已经建立在平台中。这样,您就不必创建自己的HACKS来完成所有的工作。这一切都是为您完成的。如果某些东西不支持。通过一个特定的浏览器,它“沉默”失败,不会产生错误。

同时,GSAP还可以很好地与各种JavaScript框架和其他技术相结合,因此您可以自由地使用它。反应VUE或jQuery。你在网站上使用的任何东西都很可能是兼容的。

它使用熟悉的、易于学习的语法。

除了支持CSS类和IDS之外,GSAP还允许使用通用属性来进行动画样式化。格式化代码是JavaScript和CSS的常见组合。它甚至支持十六进制颜色。

快速性能

优化是使用GSAP的一个关键好处。它提供了HTML5和JavaScript的结合,允许令人难以置信的平滑动画。对硬件加速的支持意味着你将获得很好的性能——甚至在较慢的设备上。速度测试比较它的其他动画技术,如jQuery标准CSS

细粒度控制

当你开始探索GSAP时,你可能会注意到它是如何面向细节的。有大量的内置特征可以用来创建几乎任何类型的动画。例如,你可以选择在一行中排列多个动画,甚至可以随机化。甚至还没有开始触及可能发生的事情。

这个文档是深入的,有很多代码示例可以用来启动。但是为了更好地理解GSAP能做什么,这个介绍性视频提供了一些很棒的演示:


有很多额外的东西

GSAP核心包(是免费的)需要启动-它是强大的,但也有一些可用的。插件这可以帮助你做更多的事情。有插件,如变形元素,实现物理和视觉绘制运动路径。

然而,值得注意的是,插件只适用于支付“GlueGrimoCKOK”的成员。这提供了对插件和扩展商业的特殊访问。许可证贸易 .

此外,功能不断添加到核心。版本3例如,提供了一个简化的API,交错的动画和默认动画属性,举几个例子。

GSAP in Action

现在我们知道了什么让GSAP成为一个令人信服的选择,让我们来看看它能做些什么。

下面的小片段的伟大之处在于它们被托管在CODEPDEN上。所以,你可以自由地研究它们,分叉它们,并深入了解每一件事物是如何运作的。

解构高级交错网格

皱缩可变字体

简易照相机

GSAP 3无线电

运动路径分布

心跳3

曲线文字动画

立方体行走

圆形填料颗粒

D建构

强大的动画制作更容易

三亚做网站当涉及到动画Web项目的方法时,GSAP提供了一种罕见的组合。它比Web标准更强大,但它也为性能优化。与大多数其他库相比,您倾向于牺牲后者来获得前者。

这种缺乏妥协,结合上面闪亮的例子,很容易看出为什么有这么多开发人员采用GSAP.GreenSock说超过1000万个站点运行软件,并且有人认为这个数字只会继续增长。

所以,如果你正在寻找你的动画游戏,给GSAP一个尝试。你将能够从基本的动作一直到你认为可能更快的高端效果。