前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【GSAP3教程】初次上手GSAP3

【GSAP3教程】初次上手GSAP3

作者头像
青年码农
发布2021-08-18 11:22:33
2K0
发布2021-08-18 11:22:33
举报
文章被收录于专栏:青年码农

GSAP 全称为 GreenSock Animation Platform,是 GreenSock 提供的一个制作动画的成熟的JavaScript库。该库源于Flash的动画。这也意味着GreenSock背后的团队对Web动画了如指掌,因此,你可以随心所欲的施展你的想法。

国内虽然有GSAP中文网,但是文档还是2.x版本,如果使用最新的版本(3.x),可能需要去官网了解。官方建议使用GSAP3,因为GSAP 3使用起来更容易,而且有很多改进。它向后兼容大多数GSAP 2功能,但有些部分可能需要更新才能正常工作。下面我们就先说说和GSAP2版本的区别.

版本对比

在2.x版本中,GSAP有四个模块。

TweenLite

TweenLite是GSAP的主体核心,它用于创建基本动画,是其他各类模块的基础。一般都会搭配plugins/CSSPlugin以实现DOM元素的动画。

TimelineLite

TimelineLite是一个叫做时间轴的动画容器,它用于对多个动画进行有序的组织与控制。

TimeLineMax

TimeLineMax是TimelineLite的升级版,在TimelineLite的基础之上,可以有更高级的组织与控制。

TweenMax

TweenMax是GSAP集合包,除前面3个之外,还包括plugins里的常用插件以及easing里的缓动函数补充。

而在3.x版本中,四个模块合并到了一个gsap对象中,使得文件体积更小,api更加简洁,同时3.x版本也增加了一些新的特性。

安装及引入

如果项目使用依赖包引入方式,我们可以用npm或者yarn

代码语言:javascript
复制
# npm
npm i gsap --save
# yarn 
yarn add gsap
# 引入
import { gsap } from 'gsap';

如果是常规cdn或者相对路径引入方式

代码语言:javascript
复制
<script src="js/gsap.min.js"></script>

创建一个简单动画

动画就是要动,可能是调整目标位置,改变目标大小等,最终产生一种视觉效果。使用GSAP创建动画很简单。

代码语言:javascript
复制
gsap.to('#box', { duration: 2, delay: 1, x: 300 })

上面这句代码就是将id为box的元素 从初始位置在 x 轴平移 300px,开始到结束时间为2秒钟,延迟1秒钟。

还有另外两种方法可以快速创建一个动画gsap.from()及gsap.fromto(),包括这三种下一篇我们详细讲解。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-08-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 青年码农 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 版本对比
  • 安装及引入
  • 创建一个简单动画
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档