持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

一、前言

GSAP是一个JavaScript动画库，它支持快速开发高性能的 Web 动画。GSAP 使我们能够轻松轻松快速的将动画串在一起，来创造一个高内聚的流畅动画序列。

上期我们已经尝试到的gsap的甜头，这期我们就来盘一下这个动画库其他函数用法。

本文采取一函数一例子的方式，方便大家理解。

二、函数

1、gsap.from

gsap.from(参数1，参数2) 就是告诉动画对象，是从什么状态返回成现在的状态

参数1告知需要绑定哪个动画对象
参数2就是要告知动画最初效果的对象：动画时长、是旋转还是位移变化、或者其它属性的变化

和gsap.to刚好相反

这里我们采用之前的函数，将to改为from, 可以看到车子瞬移到z为4的位置，倒退开回来原点。

小车瞬移倒退.gif

function carAnimate(): void {
  animateGasp = gsap.from(car.position, {
    z: 4,
    duration: 5,
    ease: "power1.inOut",
    // 设置重复次数 -1无限次
    repeat: 0,
    // 往返运动
    yoyo: true,
    // 延迟动画
    delay: 2,
    onComplete: () => {
      console.log("动画完成了", onIntersect());
      // 碰到了
      if (onIntersect()) {
        // 撞倒
        gsap.to(build.rotation, {
          x: -1.57,
          duration: 0,
          ease: 'power1.inOut',
          repeat: 0
        })
      }
    },
    onStart: () => {
      console.log("动画开始了");
    }
  })
}

2、gsap.fromTo

gsap.fromTo(参数1，参数2,参数3) 就是告诉动画对象，是从什么状态返回成现在的状态

参数1告知需要绑定哪个动画对象
参数2就是要告知动画最初效果的对象：动画时长、是旋转还是位移变化、或者其它属性的变化
参数3就是要告知动画最终效果的对象：动画时长、是旋转还是位移变化、或者其它属性的变化

这里我们采用之前的函数，将to改为fromTo, 可以看到车子瞬移到z为11的位置，然后向着z为4的位置前进

小车瞬移到初始位置，然后向着最终位置前进.gif

let animateGasp: gsap.core.Tween | null
function carAnimate(): void {
  animateGasp = gsap.fromTo(car.position, {
    z: 11,
    duration: 5,
    ease: "power1.inOut",
    // 设置重复次数 -1无限次
    repeat: 0,
    // 往返运动
    yoyo: true,
    // 延迟动画
    delay: 2,
    onComplete: () => {
      console.log("动画完成了", onIntersect());
      // 碰到了
      if (onIntersect()) {
        // 撞倒
        gsap.to(build.rotation, {
          x: -1.57,
          duration: 0,
          ease: 'power1.inOut',
          repeat: 0
        })
      }
    },
    onStart: () => {
      console.log("动画开始了");
    }
  },
  {
    z: 4,
    duration: 5,
    ease: "power1.inOut",
    // 设置重复次数 -1无限次
    repeat: 0,
    // 往返运动
    yoyo: true,
    // 延迟动画
    delay: 2,
    onComplete: () => {
      console.log("动画完成了", onIntersect());
      // 碰到了
      if (onIntersect()) {
        // 撞倒
        gsap.to(build.rotation, {
          x: -1.57,
          duration: 0,
          ease: 'power1.inOut',
          repeat: 0
        })
      }
    },
    onStart: () => {
      console.log("动画开始了");
    }
  })
}

3、gsap.to

这个就不赘叙了，用法和from一样，但效果相反

三、小结

还有好多个方法，有兴趣的小伙伴可以去看下这个gsap在线文档

顺便预告下，下期打算用gsap.quickTo()实现一下网页点击文字效果，给大家伙整个活。

tip

对了，今天还试了一下不同的主题，果然好看多了。

copy下列代码，放置到掘金写作页文章开头就可以啦，也可以自己手动选择。

---
theme: channing-cyan
highlight: a11y-light
---

比如这样

就能大改文章显示效果啦。

ps：我是地霊殿__三無，最近在试这个gsap库，还有好多有趣的玩法。

还有就是，有没有好用的视频转gif软件推荐下，这个免费的大水印着实难受。

尝试gsap动画库