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


theme: nico

前景

由于本人刚秋招结束,正好想搭建属于自己的博客,因为之前都是用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 })

动画效果展示图片[2]-使用GSAP写出令人惊叹的动画!-烟雨网
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的马上掘金地址:
https://code.juejin.cn/pen/7184030811178401850

实现滚动触发动画

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

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

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

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

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可视化网站: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

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容