gsap入门教程,实现复杂的交互动画

通常在C端交互上,产品与UI会在交互上提出一些比较炫酷的效果,面对视觉效果,通常来说,我们会借助第三方优秀的动画库来满足这些需求。通俗来说,就是我们并不是原生从0到1去实现,而是结合现有的库与框架帮我们高效的实现那些看似非常炫酷的效果。

今天介绍一个非常强大动画库,希望看完在业务中能带来一些思考和帮助

正文开始...

开始之前主要从以下几点介绍

  • 如何使用,开始一个最简单的gasp

  • 连续动画如何实现

  • 如何暂停开启动画

registerEffect

现在有个需求,我想让一个动画按照顺序依次消失

html 复制代码
 <div id="app">
  <p class="text1">欢迎关注</p>
  <p class="text2">公众号:Web技术学苑</p>
  <p class="text3">好好学习,天天向上</p>
</div>
<script src="./lib/gsap-latest-beta.min.js"></script>

然后我们写一段简短的动画

  • 注册动画
  • 初始化时间线
  • 按照顺序调用自定义动画
js 复制代码
// 注册一个动画名
gsap.registerEffect({
        name: "myFade",
        effect: (targets, config) => {
            return gsap.to(targets, {duration: config.duration, opacity: 0,repeat: -1});
        },
        defaults: {duration: 2},
        extendTimeline: true
 });
 // 初始化一个timeline时间线
 const timeline = gsap.timeline();
 // 调用动画
 timeline.myFade(".text1", {duration: 1}).myFade(".text2", {duration: 2}).myFade(".text3");

最终效果

从以上我们发现text1,text2,text3都依次执行了我们自定义注册的myFade方法,如果我想每组动画都一样,那么需要怎么办呢?

  • 首先定义一组数据
js 复制代码
const gsapData = [
    {
        name: "setRed",
        props: { opacity: 0.5, x: 300, yoyo: true, repeat: -1 }
    },
    {
        name: "setBlue",
        animate: 'from', 
        props: { opacity: 0.25, x: 300, yoyo: true,  }
    },
    {
        name: "setGreen",
        animate: 'fromTo', 
        props: { opacity: 0.1, x: 300}, 
        props2: { opacity: 1, x: 600, yoyo: true, repeat: -1  }
    }
]
  • 注册多个动画
js 复制代码
gsapData.forEach(v => {
  gsap.registerEffect({
      name: v.name,
      defaults: { duration: 1 },
      extendTimeline: true,
      effect(target, config) {
          if (config.animate === "from") {
              return gsap.from(target, {
                  ...v.props,
                  ...config
              })
          } else if (config.animate === 'fromTo') {
              return gsap.fromTo(target, {
                  ...v.props,
                  ...config
              }, {...config.props2})
          } else {
              return gsap.to(target, {
                  ...v.props,
                  ...config
              })
          }
      }
  })
})
  • 执行动画
js 复制代码
 const timeline = gsap.timeline();
timeline.setRed(".text1", {duration: 3}).setBlue(".text2", {duration: 1}).setGreen(".text3", 1)

最后的效果

暂停/开始动画

如果我想暂停动画或者开始动画,那么我需要手动控制

对应的html结构

html 复制代码
<div id="app">
  <p class="text1">欢迎关注</p>
  <p class="text2">公众号:Web技术学苑</p>
  <p class="text3">好好学习,天天向上</p>
  <button id="stop">暂停</button>
  <button id="play">播放</button>
  <button id="reset">重置</button>
</div>
js 复制代码
const stopBtn = document.getElementById('stop');
const playBtn = document.getElementById('play');
const resetBtn = document.getElementById('reset');
...
const timeline = gsap.timeline();
timeline.setRed(".text1", {duration: 3}).setBlue(".text2", {duration: 1}).setGreen(".text3", 1);

stopBtn.addEventListener('click', () => {
    timeline.pause();
})
playBtn.addEventListener('click', () => {
    timeline.play();
})

resetBtn.addEventListener('click', () => {
    timeline.reverse();
})

只要你调用了pauseplayreverse三个方法就行

react中如何卸载动画

比如我们在react中写了这一段动画

js 复制代码
useEffect(() => {
  const stopBtn = document.getElementById('stop');
  const playBtn = document.getElementById('play');
  const resetBtn = document.getElementById('reset');
  ...
  const timeline = gsap.timeline();
  timeline.setRed(".text1", {duration: 3}).setBlue(".text2", {duration: 1}).setGreen(".text3", 1);
})

初略一看好像并没有什么问题,但实际上当我们组件销毁的时候,我们需要重置这些动画

其实你只需要这样就行

js 复制代码
const ctx = gsap.context(() => {
  const stopBtn = document.getElementById('stop');
  const playBtn = document.getElementById('play');
  const resetBtn = document.getElementById('reset');
  ...
  const timeline = gsap.timeline();
  timeline.setRed(".text1", {duration: 3}).setBlue(".text2", {duration: 1}).setGreen(".text3", 1);
  return () => ctx.revert()
})

from and fromTo

在以上动画中我们有用到fromfromTo这两个执行动画

html 复制代码
<div id="app">
  <p class="text">公众号:Web技术学苑</p>
</div>
<script src="./lib/gsap-latest-beta.min.js"></script>
<script>
    window.onload = function () {
        gsap.from(".text", {
            opacity: 0,
            y:100,
            duration: 1
        })
    }
</script>

上面这段动画意思就是从y100的位置,opacity0的状态持续时间1s钟开始执行

当我们使用fromTo时会是怎么样呢?

html 复制代码
  <script>
  window.onload = function () {
      gsap.fromTo(".text", {
          opacity: 0
      }, {
      opacity: 1,
      duration: 2,
      delay: 1,
      x: 100,
      repeat:-1
    })
  }
</script>

从上面得知fromTo(className, start, end)其实是更加友好的控制动画的开始与结尾。

如果我们想手动控制动画执行呢

html 复制代码
<div id="app">
  <p class="text">公众号:Web技术学苑</p>
  <button value="start" id="start"></button>
</div>
<script src="./lib/gsap-latest-beta.min.js"></script>
<script>
  window.onload = function () {
      const startDom = document.getElementById("start");
      let tween = gsap.fromTo(".text", {
          opacity: 0,
      }, {
          opacity: 1,
          duration: 2,
          delay: 1,
          x: 100,
          repeat:-1
      });
      tween.pause();
      startDom.addEventListener("click", () => {
          tween.seek(2);
          tween.progress(0.5);
          tween.play();
      })
  }
</script>

总结

  • 主要介绍了在gasp中比较常用的几个动画,如何使用registerEffect注册定义的动画,如何实现一个连续动画

  • 如何在react中卸载动画

  • 如何暂停一个动画,如何使用fromTofrom的动画

  • 本文示例code example

相关推荐
腾讯TNTWeb前端团队7 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰10 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy11 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom12 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom12 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom12 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom12 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom12 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试