长春网站建设v1,国家城乡建设官方网站,腾讯 云上做网站教程,建网站流程 知乎GSAP#xff08;GreenSock Animation Platform#xff09;是一个强大的JavaScript动画库#xff0c;用于在Web应用程序中创建高性能和复杂的动画效果#xff0c;其提供了一套丰富的API和工具#xff0c;使开发者能够轻松地创建流畅、交互式的动画#xff0c;涵盖了从简单… GSAPGreenSock Animation Platform是一个强大的JavaScript动画库用于在Web应用程序中创建高性能和复杂的动画效果其提供了一套丰富的API和工具使开发者能够轻松地创建流畅、交互式的动画涵盖了从简单的CSS属性动画到复杂的序列动画和时间轴控制等各种需求超过1100万个网站中包括50%的获奖网站其主要品牌都使用GSAP。 目录
初识GSAP
GSAP核心概念
GSAP常用方法
最后总结 初识GSAP
GSAP作为JS的专业动画库自flash时代起就不断发展至今已成为一个成熟且广泛应用的动画解决方案因其具备以下优点而使其作为经典的动画库被大家广泛使用 1跨浏览器和跨平台GSAP提供的动画效果能够兼容各种浏览器和设备确保动画在不同环境下保持一致性。 2高性能GSAP以其快速和流畅的动画效果著称避免了常见的卡顿和闪烁问题为用户带来极佳的视觉体验。 3丰富的属性和方法GSAP提供了丰富的属性和方法可用于创建复杂的动画效果如位置移动、缩放、旋转、透明度变化等。 4强大的可定制性GSAP允许用户根据项目需求进行个性化的动画设计包括动画时间、延迟、重复次数、缓动函数等。 在 官方文档 中详细记载了GSAP应用的基础示例给开发者提供了很大的便利去理解使用GSAP 对于GSAP中存在着常用的属性供我们进行选择其本质上还是借助了css进行处理这里简单说一下
GSAPCSS解释x: 100transform: translateX(100px)水平移动y: 100transform: translateY(100px)垂直移动xPercent: -50transform: translateX(-50%)水平移动(元素宽度的百分比)yPercent: -50transform: translateY(-50%)垂直移动(元素宽度的百分比)rotation: 360 transform: rotate(360deg) 旋转(度)scale: 2transform: scale(2, 2)增大或减小大小delay: 1动画延迟时间 单位是秒duration: 3动画持续时间 单位是秒repeat动画重复多少次 yoyo 悠悠球默认: falsetrue则表示补间每隔一次重复将朝相反方向运行。ease运动曲线stagger交错每个目标的动画开始之间的时间(秒为单位)
终端执行如下命令进行安装即可(目前博主安装的最新版本是^3.12.5)
npm install gsap
因为GSAP并不是完全免费的有部分功能需要收费才能使用当然免费版本基本上也已经满足我们日常开发的动画需求了、 GSAP核心概念
作为经典动画库GSAP的核心概念主要有两种Tween(补间动画) 和 Tmeline(时间轴)
1Tween(补间动画)Tween是GSAP的核心概念指在一段时间内逐渐改变元素的属性值从而实现平滑的动画效果其主要分为下面四类 gsap.to()从元素的起始值开始动画到我们指定的结束值 gsap.from()反过来。我们指定起始值动画到结束值 gsap.fromTo()我们定义起始值和结束值。 sap.set()立即设置属性无动画 ok这里我们通过一段代码进行一个简单是示范
templatediv classbox refbox/div
/templatescript langts setup
import { ref, onMounted } from vue;
import { gsap } from gsap;let box ref(null);
onMounted(() {gsap.to(box.value, { x: 500, y: 500, duration: 5, // 持续时间repeat: -1, // 如果是 -1则无限循环yoyo: true, // 如果是 true则来回循环delay: 1, // 延迟时间, 1s之后开始执行动画ease: power4.inOut, // 缓动方式opacity: 0, // 透明度})
})
/scriptstyle
* {margin: 0;padding: 0;
}
.box {width: 100px;height: 100px;background: #008c8c;border-radius: 50%;}
/style
页面最终呈现的效果如下所示 2Tmeline(时间线)GSAP提供了Timeline功能可以方便地控制多个动画的播放顺序和时间使得动画序列的管理变得更加简单。那什么是时间线呢时间线是创建易于调整、有弹性的动画序列的关键将补间添加到时间线时默认情况下补间将按添加顺序依次播放。简单理解时间线可以让多组动画编排动作从而控制整个序列这里通过一段代码进行简单的示例
templatediv classbox1 refbox1/divdiv classbox2 refbox2/divdiv classbox3 refbox3/div
/templatescript langts setup
import { ref, onMounted } from vue;
import { gsap } from gsap;let box1 ref(null);
let box2 ref(null);
let box3 ref(null);
onMounted(() {// 创建时间线const timeline gsap.timeline()timeline.to(box1.value, { x: 500, duration: 1 })timeline.to(box2.value, { y: 300, duration: 2 })timeline.to(box3.value, { y: 100, duration: 1 })
})
/script
效果和我们设置的时间线一样只有上一个动画执行完毕之后才会执行下面的动画
templatediv classbox1 refbox1/divdiv classbox2 refbox2/divdiv classbox3 refbox3/div
/templatescript langts setup
import { ref, onMounted } from vue;
import { gsap } from gsap;let box1 ref(null);
let box2 ref(null);
let box3 ref(null);
onMounted(() {// 创建时间线const timeline gsap.timeline()timeline.to(box1.value, { x: 500, duration: 1 })timeline.to(box2.value, { y: 300, duration: 2 })timeline.to(box3.value, { y: 100, duration: 1 })
})
/script
当然我们也可以指定一个参数来构建动画时机时间的序列简单的理解就是多组动画之间的执行时机如下代码所示
templatediv classbox1 refbox1/divdiv classbox2 refbox2/divdiv classbox3 refbox3/div
/templatescript langts setup
import { ref, onMounted } from vue;
import { gsap } from gsap;let box1 ref(null);
let box2 ref(null);
let box3 ref(null);
onMounted(() {// 创建时间线const timeline gsap.timeline()// 第三个参数代表时间线的开始时间timeline.to(box1.value, { x: 500, duration: 1 }, 3)// 第三个参数代表是和上一条动画一起运动timeline.to(box2.value, { y: 300, duration: 2 }, )// 第三个参数代表是上一个动画执行完毕之后延迟1秒后开始如果是-1则是上一个动画结束前1秒开始执行timeline.to(box3.value, { y: 100, duration: 1 }, 1)
})
/script
最终呈现的效果如下所示 GSAP常用方法
GSAP有许多常用的方法及其插件这里我就拿比较常见的滚动插件ScrollTrigger进行举例 以下是 ScrollTrigger 常用的属性这里做一个简单的介绍
属性取值说明start数字 | 方位名词滚动触发器的起始滚动位置数字以像素为单位end数字 | 方位名词滚动触发器的起始滚动位置数字以像素为单位triggerElement | undefined触发器元素animationTween | Timeline | undefined与滚动触发器实例关联的补间或时间线scrub布尔值 | 数字true动画的进度直接链接到滚动触发器进度toggleClass字符串 | 对象向一(多)个元素添加/删除类markerstrue开启标注功能scrollerElement | window与滚动触发器关联·的滚动器元素默认就是窗口pinElement是否是固定元素。pin: true自身元素pin: xxx指定元素
这里通过代码进行一个简单的示例如下所示
templatediv classbox refbox小圆/div
/templatescript langts setup
import { ref, onMounted } from vue;
import { gsap } from gsap;
import { ScrollTrigger } from gsap/ScrollTrigger;
gsap.registerPlugin(ScrollTrigger);let box ref(null);
onMounted(() {ScrollTrigger.create({// 触发元素 trigger: box.value,// 触发元素的位置开始start: top top,// 触发元素的位置结束end: 300,// 擦除 动画的进度和滚动条的进度链接到一起scrub: true,animation: gsap.to(box.value, {x: 200,y: 500,rotate: 180})})
})
/script
最终呈现的效果如下所示 最后总结 GSAP是一个功能强大的JavaScript动画库它提供了丰富的API和工具帮助开发者在网页、应用和游戏中创建流畅、高性能的动画效果GSAP以其易用性、跨平台兼容性和卓越的性能而广受好评是许多前端开发者和设计师的首选动画解决方案。 随着Web技术的不断发展和用户对网页体验要求的提高GSAP将继续发挥其在动画领域的优势为开发者提供更加高效、易用和强大的动画解决方案。同时GSAP也将不断更新和完善其功能以满足不断变化的市场需求和技术趋势。
