前端动效天花板？GSAP带你突破极限！

10年前端老司机
0 阅读4分钟

交互体验是前端开发的核心，好的用户体验能给用户留下更好的印象，給公司带来好的收益。那么怎么提升用户体验呢！前端开发中可以利用动画提升用户体验，惊艳的动画效果能够快速吸引用户的眼球，让用户停留下来。今天就来给大家介绍一个前端动画库的天花板GSAP。

一、为什么说GSAP 是前端动画库的天花板！

1. 因为它能实现各种各样的复杂效果

官方demo:gsap.com/demos

gsap-demo.gif

2. GitHub上拥有21.7k的star 和1.8k的Fork

GitHub 地址github.com/greensock/G…

image.png

3. npm 周下载量多达70多万

npm 地址： www.npmjs.com/package/gsa…

image.png

二、 GSAP 简单动画效果

  1. 首先创建一个vue3的项目
pnpm create vite vue3-gsap --template vue
cd vue3-gsap
pnpm install
  1. 安装 gsap
pnpm install gsap

使用gsap 实现一个位移动画效果：

<template>
  <div>
    <button @click="move">动画</button>
    <div class="box"></div>
  </div>
</template>

<script setup>
import { gsap } from "gsap";

const move = () => {
  gsap.from(".box", {
    x: 500,
    y: 500,
  });
  gsap.to(".box", {
    x: 100,
    y: 100,
  });
};
</script>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  background: #0ae448;
}
</style>

在上述代码中,首先导入gsap, 然后点击的时候调用gsap 的from方法和to方法，方法的第一个参数是需要设置动画的元素，第二个参数是设置动画的属性，这里的x,y分别代表的是translateX,translateY。from和to这两个方法还可以合成一个方法来写，合成的方法名是fromTo，fromTo方法的fromTo有三个参，第一个还是元素，第二个是from的属性，第三个是to的属性，比如上述的代码可以改写成：

import { gsap } from "gsap";

const move = () => {
  gsap.fromTo(
    ".box",
    {
      x: 500,
      y: 500,
    },
    {
      x: 100,
      y: 100,
    }
  );
};

效果演示：

gsap-1.gif

三、缓冲动画

<template>
  <div class="wrap">
    <div class="box green">linear</div>
    <div class="box purple">bounce</div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { gsap } from "gsap";

onMounted(() => {
  gsap.to(".green", {
    rotation: 360,
    duration: 2,
    repeat: -1,
    repeatDelay: 2,
    ease: "none",
  });

  gsap.to(".purple", {
    rotation: 360,
    duration: 2,
    repeat: -1,
    repeatDelay: 2,
    ease: "bounce.out",
  });
});
</script>

<style scoped>
.wrap {
  padding-top: 50px;
  display: flex;
  justify-content: space-around;
}
.box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.green {
  background: #0ae448;
}
.purple {
  background: #a69eff;
}
</style>

效果演示：

gsap-donghua2.gif

上述代码中可以看到通过ease的属性值可以很好的控制好缓冲动画，常用的有3个值：

  • power1.in
  • power1.out
  • power1.inOut

当然官方还提供了很多的效果值，如果这三个值不满足你的期望，可以到官方调出你自己想要的效果； gsap.com/resources/g…

image.png 如图点击右侧就会得到各种不同得效果，左侧可以看效果，右侧下方就能得到不同得代码值

四、交错动画

<template>
  <div class="wrap">
    <div id="container"></div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { gsap } from "gsap";

onMounted(() => {
  //GSAP 3 introduces advanced stagger values
  var grid = [5, 13], //[rows, columns]
    tl = gsap.timeline({ repeat: -1, repeatDelay: 0.5 });

  function animateBoxes(from, axis, ease) {
    //one stagger call does all the animation:
    tl.to(".box", {
      duration: 1,
      scale: 0.1,
      y: 60,
      yoyo: true,
      repeat: 1,
      ease: "power1.inOut",
      stagger: {
        amount: 1.5,
        grid: grid,
        axis: axis,
        ease: ease,
        from: from,
      },
    });
  }

  //builds a grid of <div class="box"> elements, dropped into #container (unrelated to animation code)
  buildGrid({
    grid: grid,
    className: "box",
    width: 600,
    gutter: 15,
    parent: "#container",
  });

  animateBoxes("center");

  //---- the rest of the code below just handles all the interactivity ----

  //helper function to build a grid of <div> elements
  function buildGrid(vars) {
    vars = vars || {};
    var container = document.createElement("div"),
      rows = vars.grid[0] || 5,
      cols = vars.grid[1] || 5,
      width = vars.width || 100,
      gutter = vars.gutter || 1,
      className = vars.className || "",
      w = (width - cols * gutter) / cols,
      parent =
        typeof vars.parent === "string"
          ? document.querySelector(vars.parent)
          : vars.parent
          ? vars.parent
          : document.body,
      css =
        "display: inline-block; margin: 0 " +
        (gutter / width) * 100 +
        "% " +
        (gutter / width) * 100 +
        "% 0; width: " +
        (w / width) * 100 +
        "%;",
      l = rows * cols,
      i,
      box;
    for (i = 0; i < l; i++) {
      box = document.createElement("div");
      box.style.cssText = css;
      box.setAttribute("class", className);
      box.index = i;
      box.setAttribute("data-index", i);
      container.appendChild(box);
    }
    container.style.cssText =
      "width:" +
      width +
      "px; line-height: 0; padding:" +
      gutter +
      "px 0 0 " +
      gutter +
      "px; display:inline-block;";
    parent.appendChild(container);
    return container;
  }

  //this just helps avoid the pixel-snapping that some browsers do.
  gsap.set(".box", { rotation: 0.5, force3D: true });
});
</script>

<style>
.box {
  background-color: #0ae448 !important;
  position: relative;
  border-radius: 5px;
  height: 30px;
}
</style>

交错动画主要是通过stagger 的设置实现。

gsap-jiaoti.gif

四、动画排序

在css3中，多个动画要实现动画排序，一般会使用延迟时间来的时间来实现，这种实现方式会有一个很大的问题，当其中有一个动画的duration 修改之后，后面的动画的延迟时间都需要跟着修改，非常麻烦，不好维护，而在gsap中实现动画排序就非常简单了，只需要调用gsap的时间线方法即可。来看下具体实现：

<template>
  <div class="wrap">
    <div class="box donghua-1">1</div>
    <div class="box donghua-2">2</div>
    <div class="box donghua-3">3</div>
  </div>
  <button @click="startMove">开始动画</button>
</template>

<script setup>
import { gsap } from "gsap";

const startMove = () => {
  const tl = gsap.timeline();
  tl.to(".donghua-1", {
    width: 200,
    height: 200,
    ease: "power1.outIn",
  });

  tl.to(".donghua-2", {
    rotate: 360,
  });

  tl.fromTo(
    ".donghua-3",
    {
      opacity: 0,
    },
    {
      opacity: 1,
    }
  );
};
</script>

<style>
.wrap {
  display: flex;
  justify-content: space-around;
}
.box {
  position: relative;
  border-radius: 5px;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  color: #ffff;
}
.donghua-1 {
  background: #0ae448;
}
.donghua-2 {
  background: #9d95ff;
}
.donghua-3 {
  background: #ff8709;
}
</style>

效果演示：

gsap-timeline.gif

五、总结

本篇主要分享了GSAP的遍历性，运用好GSAP 可以极大的提升用户体验，快速的吸引用户的眼球。

今天就分享到这里了，感谢你的收看

avatar
文章
阅读
粉丝