使用GSAP写出令人惊叹的动画！

Ting599
14,728 阅读7分钟

前景

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

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

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

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

博客做的gsap的动画

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

GSAP是什么？

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

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

GSAP官网：GSAP官网 Github仓库: GSAP的Github仓库

从基础开始讲起

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 })

动画效果展示 20230102205058.gif

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的马上掘金地址： code.juejin.cn/pen/7184030…

实现滚动触发动画

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

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

scrollTrigger官方文档：greensock.com/docs/v3/Plu…

官网实现的滚动动画在线仓库： codepen.io/GreenSock/p…

20230102224527.gif

20230102225845.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可视化网站：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仓库：github.com/DanielLin05…

avatar
文章
阅读
粉丝