gitee 地址

gitee地址： gittee地址

本篇目标

  • 结合gsap动画库，添加动画使我们的盒子更加顺畅的移动和旋转

    gsap介绍

    gsap是一款以javascript实现方式实现的动画库。

gsap有很多的Api我这里就不做详细的解释了，大家可以去看官方文档，我这里把文档给摆出来。

文档：

相信同时点击了中文文档和英文文档的同学，有点纳闷，这两个名字不一样啊。其实是没关系的，这两个是一个子集关系，都是一样的。大家放心看吧。

下载gsap

1
2
3
4
5
6
// npm
npm i gsap -s
// pnpm
pnpm i gsap -s
// yarn
yarn add gsap

在项目中使用gsap动画库

在项目中引入gsap

1
2
// 引入 gsap 动画库
import gsap from "gsap"

添加动画

我们先让我们的动画像 x 轴移动

1
2
3
4
5
6
7
8
// 添加动画
gsap.to(
    cube.position, // 需要执行动画的参数对象
    {// 执行动画的目标参数
        x: 10, // 使盒子移动到 x 轴为 5 的位置
        duration: 5, // 需要的时间，5秒
    }
)

这样过后我们的盒子就会在 x 轴向右移动到 10 的位置但它只会执行一次，我们怎么样让他多执行几次呢，或者无限执行，再或者一直往返运动
添加动画执行次数

1
2
3
4
5
6
7
8
9
// 添加动画
gsap.to(
    cube.position, // 需要执行动画的参数对象
    {// 执行动画的目标参数
        x: 10, // 使盒子移动到 x 轴为 5 的位置
        duration: 5, // 需要的时间，5秒
        repeat: 2,//动画执行次数，当执行次数为 -1 时，则无限次数执行
    }
)

添加往返执行

1
2
3
4
5
6
7
8
9
10
// 添加动画
gsap.to(
    cube.position, // 需要执行动画的参数对象
    {// 执行动画的目标参数
        x: 10, // 使盒子移动到 x 轴为 5 的位置
        duration: 5, // 需要的时间，5秒
        repeat: 2,//动画执行次数
        yoyo: true, // 添加往返执行
    }
)

现在我们的盒子就可以以堪称完美的动画效果执行了，但我们发现它在执行的过程中一直是同一个速度，没有抛物线的那种看着更加完美的执行动画，让我门给它加个抛物线性的动画效果。

先慢-> 快 -> 慢

1
2
3
4
5
6
7
8
9
10
11
// 添加动画
gsap.to(
    cube.position, // 需要执行动画的目标对象
    {// 执行动画的目标参数
        x: 10, // 使盒子移动到 x 轴为 5 的位置
        duration: 5, // 需要的时间，5秒
        ease: 'power1.inOut', // 动画执行方式
        repeat: 2,//动画执行次数，当执行次数为 -1 时，则无限次数执行
        yoyo: true, // 添加往返执行
    }
)

好了，搞定，现在看起来就很nice了。只有向 x 轴移动，不咋滴，我们给他添加一个旋转。
有了上面的移动案例，我门支持 copy 修改成旋转的 目对象

1
2
3
4
5
6
7
8
9
10
11
// 添加动画-旋转
gsap.to(
    cube.rotation, // 需要执行动画的目标对象
    {// 执行动画的目标参数
        x: 10, // 使盒子移动到 x 轴为 5 的位置
        duration: 5, // 需要的时间，5秒
        ease: 'power1.inOut', // 动画执行方式
        repeat: 2,//动画执行次数，当执行次数为 -1 时，则无限次数执行
        yoyo: true, // 添加往返执行
    }
)

让我们来一起看看我们刚刚一顿猛如虎操作的效果：
291891492291361822022-12-05-15-11-46.gif

下期预告

实现画布的响应式，根据屏幕尺寸自适应

所有操作实现案例均以上传gitee，地址在文章开篇处。