前端面试题宝典

炫酷动画不会做？GSAP轻松搞定！

简介：强大的动画库，简单几行代码写出酷炫效果！
可前往公众号查看原文：前端面试题宝典，关注公众号，查看最新面经和技术文章哦~

哈喽，大家好，我是Fine。

今天为大家推荐一个强大的动画库-GSAP

GSAP（GreenSock Animation Platform）是一个功能强大的JavaScript动画库，用于创建高性能、流畅且交互性强的前端动画效果。它提供了许多强大的功能和易于使用的API，可以实现各种类型的动画，包括元素的移动、缩放、旋转、淡入淡出等。

以下是GSAP库的一些主要特点：

高性能和流畅：GSAP使用了原生JavaScript的核心动画引擎，以及硬件加速和优化技巧，使得在各种设备上都能实现高性能和流畅的动画效果。

广泛的浏览器支持：GSAP支持绝大多数现代浏览器，包括Chrome、Firefox、Safari、Edge等，并提供了对移动设备的兼容性支持。

丰富的动画选项：GSAP提供了丰富的动画选项和方法，可以控制动画的持续时间、缓动效果、延迟等。您可以根据需求自定义动画的行为和外观。

强大的插件生态系统：GSAP拥有庞大的插件生态系统，提供了许多额外的功能和效果，如滚动触发、翻页效果、路径动画等。这些插件可以轻松地集成到GSAP中，扩展其功能。

易于使用的API：GSAP提供了直观且一致的API，使得创建和控制动画变得简单。您可以使用链式语法来定义动画序列，并通过回调函数、事件监听等方式与动画进行交互。

适用于各种场景：GSAP可以用于多种前端开发场景，包括网页动画、游戏开发、移动应用程序等。它具有灵活性和可定制性，可以满足不同项目的需求。

总之，GSAP是一个功能强大、易于使用且广受欢迎的前端动画库。无论是创建简单的过渡效果还是复杂的交互动画，GSAP都能提供出色的性能和体验，使您的网页或应用程序更加生动和引人注目。

以下分享来自掘金

前景

由于本人刚秋招结束，正好想搭建属于自己的博客，因为之前都是用hexo框架搭建的，这次从零实现一个自己满意的博客，也做了很多的资料收集，如何去做一个非常优秀的博客，让人眼前一亮。

通过收集资料以及不停观摩优秀的网站之后，发觉有一个共同点就是

  • 如何结合浏览器的scroll事件去做一些丝滑动画，带来顶级的体验
  • 利用webgl做一些3d的动效
  • 合理的UI设计

UI暂且不讨论，毕竟咱们是技术人员，我们先去探讨如何写出丝滑的scroll动画，看了这么多网站之后才发觉他们都是使用gsap去做这些过度动画，并且实现起来并不是很困难！下面附几个我的博客实现的几个动画效果

博客做的gsap的动画

  1. 结合css的clip-path做文字首屏动画
  2. 菜单弹出动效
  3. 滚轮的动画效果（向下滚动或者回滚都能回到正确位置）
  4. 随着滚轮的滚动，凌乱的图片恢复正确位置 5.展示页面动画

GSAP是什么？

GSAP 是一个强大的 JavaScript 工具集，可以将开发人员变成动画超级英雄。构建适用于所有主流浏览器的高性能动画。动画化 CSS、SVG、画布、React、Vue、WebGL、颜色、字符串、运动路径、通用对象……任何 JavaScript 可以触及的东西！GSAP 的 ScrollTrigger 插件可让您使用最少的代码创建令人惊叹的基于滚动的动画。
来自官网

发觉国内人用的挺少的，国外人用的非常多，不知道是什么原因

GSAP官网：https://gsap.com/ 

Github仓库: https://github.com/greensock/GSAP

从基础开始讲起

GSAP其实用的最多的两个api就是gsap.to以及gsap.from下面介绍一下怎么使用，并且做出酷炫的动画

首先我们先引入cdn即可使用GSAP

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

gsap.to

gsap.to()里面有3个参数可以填写 第三个参数后面会讲

gsap.to()"你的目标target", { 你所要做出的动作}, "提前时间或滞后时间")

gsap.to其实就是将你所要操作的元素到你所指定的位置

<div class="box green"></div>
<div class="box purple"></div>
<div class="box blue"></div>
.box {
  height: 20px;
  width: 20px;
}
.green {
  background-color: green;
}
.purple {
  background-color: purple;
}
.blue {
  background-color: blue;
}
gsap.to(".green", { rotation: 360, x: 100, duration: 1 });
// 将.green的div旋转360° 并且位移100 动画时间为1s
// 若想要将所有的方块一起动的话只需要同时选择多个目标就行了
// gsap.to(".green, .purple", { rotation: 360, x: 100, duration: 1 }) 
// 或
// gsap.to(".box", { rotation: 360, x: 100, duration: 1 })

动画效果展示


gsap.from

gsap.from与to是大同小异的，to里面参数是指定目标到特定位置，from其实就是反过来罢了，给的参数是起始位置

gsap.from(".box", { rotation: 360, x: 100, duration: 1 })
// 将class为box的元素  从x=100的位置到之前css写的定义位置

下面看下动画是不是和to反过来

20230102212030.gif

gsap.timeline !!非常重要

timeline无非就是一条时间线，你可以更好的去控制动画，尤其是复杂动画都会用到timeline，将他们串联起来，如果说你想让动画有个执行的先后顺序 那么就要用到timeline了(HTML CSS代码还是上面的代码没变)

我们下面实现一个想将三个box向右平移100同时将透明度调低之后，再进行360度旋转，是有一个先后顺序的

timeline参数需要填你使用动画的一些默认参数，不填也是可以的

使用：

// 先定义一条时间线
let tl = gsap.timeline({ duration: 1 };
// let tl = gsap.timeline({  };也是可以的
);
// 开始基于时间线做一些动画 结合上面的 gsap.to 和 gsap.from
tl.to(".box", { x: 100, opacity: 0.5 }).to(".box", { rotation: 360 });
//你也可以这么写 实现最后的效果是一样的不过写法会麻烦一点
tl.to(".box", { x: 100, opacity: 0.5 });
tl.to(".box", { rotation: 360 });
20230102214708.gif

stagger参数

下面举的例子都会以timeline的方式写 如果看不懂的话可以看上面的教学

stagger参数是来控制如果多目标的时候，每个目标动画的时间差，这么说你可能有点听不懂，下面直接拿timeline的例子改写一下。

实现目标：每个box间隔0.2秒位移100（并不是同时位移） 并且执行旋转也是间隔0.3

let tl = gsap.timeline({ duration: 1 };
// let tl = gsap.timeline({  };也是可以的
);
// 开始基于时间线做一些动画 结合上面的 gsap.to 和 gsap.from
tl.to(".box", { x: 100, opacity: 0.5,stagger: .1 }).to(".box", { rotation: 360,stagger: .1 });
20230102215823.gif

重复动画以及往返效果

repeat参数以及yoyo

repeat参数为重复次数 循环为-1

yoyo是布尔值 想要有往复效果则为true 默认为false

如果动画不止要做出一次 要做无限次或者说有个往复效果如何去做呢？

let tl = gsap.timeline({ duration: 1 };
);
tl.to(".green", { x: 100,repeat: -1, yoyo: true });
//将 .green的div旋转360° 并且位移100 动画时间为1s repeat为重复次数

这样我们想实现的动画就做出来了

20230102210044.gif

控制动画的暂停、开始、回放

  • paused

你所要指定的动画可能不是一上来就自动执行的呢，而是通过手动触发的（像上面的菜单栏的例子） 如何去做呢

我们在timeline里面传参让这个动画上来不执行 我们通过按钮来触发

const bt = document.querySelector("button");

let tl = gsap.timeline({ paused: true }
);
tl.to(".green", { x: 100, opacity: 0.5,repeat: -1, yoyo: true })
bt.onclick = () => {
  tl.play();
}
20230102221314.gif
  • timeline的控制播放、暂停、回放

通过timeline.play()、timeline.pause()、timeline.reverse()来控制

const play = document.querySelector("#play");
const pause = document.querySelector("#pause");
const reverse = document.querySelector("#reverse");
let tl = gsap.timeline({ paused: true }
);
tl.to(".green", { x: 100, opacity: 0.5, duration: 3 })
play.onclick = () => {
  tl.play();
}
pause.onclick = () => {
  tl.pause();
}
reverse.onclick = () => {
  tl.reverse();
}

下面为实现效果

20230102222559.gif

学会上面这几种方法基本就可以写一个很酷炫的动画了！！

顺便附下上面几个demo的马上掘金地址：https://code.juejin.cn/pen/7184030811178401850

实现滚动触发动画

上面博客写的动画 通过滚动来触发动画，其实是依赖了gsap的一个插件 scrollTrigger

下面稍微粗略讲一下大致过程，其实用到的还是上面gsap.to和gsap.from

scrollTrigger官方文档：https://greensock.com/docs/v3/Plugins/ScrollTrigger

官网实现的滚动动画在线仓库：https://codepen.io/GreenSock/pen/RwPXQOQ

20230102224527.gif


gsap.to(".b", {
  x: 400,
  rotation: 360,
  scrollTrigger: { 
    trigger: ".b",  //触发元素
    start: "top center",  //开始动画的时机
    end: "top 100px", // 截止动画的时机
    scrub: true,  // 是否使用滚动以及回滚会回放动画
    markers: true, // 开启标注功能（更好看滚动开始以及截止的地方）
  }
});

下面用个图片来讲解一下start 和 end的参数

第一个参数为元素的位置 第二个参数为视口的位置 当两者重合的时候即会开启动画

参数可以为百分比 或者top center bottom 都可以

image.png

带你们实现一个上面的文字特效

content作为容器， char为每个字符的css

我们将每个字符向上方移动150px，因为我们最终要做每个字符的掉落效果，通过gsap.to让每个字符间隔一定的秒数（前面讲过的stagger参数）将y坐标恢复为0 这其实就是整个的大致思路

  <div class="content">
    <div class="char">a</div>
    <div class="char">b</div>
    <div class="char">c</div>
    <div class="char">d</div>
    <div class="char">e</div>
    <div class="char">f</div>
    <div class="char">g</div>
    <div class="char">h</div>
    <div class="char">i</div>
    <div class="char">j</div>
  </div>
.content {
  font-size: 5rem;
  position: relative;
  color: white;
  
}

.char {
  display: inline-block;
  margin-right: 6px;
  opacity: 0.3;
  transform: translateY(-150px);
  transition: transform .3s ease-in-out;
}

我们将上面的代码渲染出来是下面这个结果

image.png

我们如何将content上方的文字看不见呢？

这里就巧妙的利用到奇妙的css的clip-path将div按照路径进行一个显示

也就是直接给出一个上方蓝色方框的路径 那么div上面的文字就不会显示了

这里推荐一个可以编辑的clip-path可视化网站：https://bennettfeely.com/clippy/

image.png

下面我们更改下css代码，加入clip-path参数，就可以发现content上方的char文字都看不见了

.content {
  font-size: 5rem;
  position: relative;
  color: white;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

接下来大家估计都会了吧，通过gsap.to让每个字符y置为0，并且间隔一段时间掉落即可，这样就完成这个动画了

const t = gsap.timeline({});
t.to(".char", {
  opacity: 1,
  delay: .1,
  duration: .5,
  y: 0,
  ease: "Power4.inOut",
  stagger: 0.1,
})

最终的动画效果:

20230102233443.gif

总结

好了，这篇文章到这里就结束了。在这篇文章里我讲述了一些如何用gsap做出一些炫酷动画。

喜欢的可以点个赞，有问题可以在评论区里面问题~ 下面附一下上面的字体动画仓库，这个仓库最近打算去写一些各种炫酷动画，svg，gsap等等，喜欢的可以点下start呀

github仓库：https://github.com/DanielLin0516/WebSite-Animation/tree/master/text-flow-animation 

原文地址：https://juejin.cn/post/7184080621831422011             


原文作者：Ting599

 

最后

还没有使用过我们刷题网站（https://fe.ecool.fun/）或者刷题小程序的同学，如果近期准备或者正在找工作，千万不要错过，我们的题库主打无广告和更新快哦~。

老规矩，也给我们团队的辅导服务打个广告。