推荐好用的可做动画控制的js库Gsapjs

最新推荐文章于 2025-10-20 14:14:20 发布

原创最新推荐文章于 2025-10-20 14:14:20 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#动画 #vue.js #html

Vue2.x 同时被 3 个专栏收录

23 篇文章

订阅专栏

15 篇文章

订阅专栏

react

5 篇文章

订阅专栏

博客介绍了如何在Vue项目中避免使用Animaye.css动画库的局限性，转而采用Gsapjs库来实现更精确的动画控制。通过示例代码展示了如何使用gsap.to()方法创建动态数字累加的效果，强调了Gsapjs在时间掌控和灵活性上的优势。文章还提供了详细的使用步骤，并鼓励读者深入研究Gsapjs的更多功能。

Animatejs

Animayejs
在这里插入图片描述

许多小伙伴会在项目中使用到Animaye.css动画库，但是终究是css样式库，同一个页面不同的模块进行操作会有一些坑（例：动画发生的时间难于掌控）。

推荐一个好用的库

Gsapjs

在VUE官网中的状态过渡这节中有用到这个库的例子。
在这里插入图片描述

gsap.to（）

常用的方法gsap.to()即可搞定大部分的动画效果问题

在这里插入图片描述

举例：动态数字累加告别冗余的计时器

在这里插入图片描述

figureSurge.vue

<template>
  <div class="figureSurge">
    <div class="figureListItem">
      <div class="figure">
        <p>{{ newNumber }}</p>
        <p v-show="plus">{{ '+' }}</p>
      </div>
      <div class="Introduce">{{ figureSurgeName }}</div>
    </div>
  </div>
</template>
<script>
import { gsap } from 'gsap';

export default {
  name: 'FigureSurge',
  props: {
    // 运动的数字显示
    animatedNumber: {
      default: 0,
      type: Number,
    },
    figureSurgeName: {
      default: '业务布局',
      type: String,
    },
    // +号显示
    plus: {
      default: false,
      type: Boolean,
    },
    refresh: {
      default: 0,
      type: Number,
    },
  },
  data() {
    return {
      ultimatelyNumber: 0,
    };
  },
  computed: {
    // 格式化累加的数据
    newNumber() {
      // gsap.to(this.$data, { duration: 10, ultimatelyNumber: this.newNumber });
      return this.ultimatelyNumber.toFixed(0);
    },
  },
  watch: {
    // 数据更新后数字运动
    refresh(newval) {
      if (newval === 1) {
        gsap.to(this.$data, { duration: 2, ultimatelyNumber: this.animatedNumber, delay: 2.5 });
      }
    },
  },
  mounted() {},
  created() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.figureSurge {
  .figureListItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    height: 130px;
  }
  .figure {
    min-width: 100px;
    height: 91px;
    font-size: 65px;
    color: #9c2323;
    letter-spacing: 0;
    text-align: center;
    font-weight: 600;
    display: flex;
    justify-content: center;
  }
  .Introduce {
    min-width: 100px;
    height: 33px;
    font-size: 24px;
    color: #000000;
    letter-spacing: 0;
    text-align: center;
    font-weight: 600;
  }
}
</style>

gsap.to(）的第一个参数为所操纵的对象，可以是Vue实例中的data变量，也可以是DOM元素——将参数名改为类名或id名即可。

第二个参数为的目标值以及动画持续的时间等。

gsap.to(".class", {
    x: 100, //normal value
    y: function(index, target, targets) { //function-based value
        return index * 50; 
    },
    duration: 1
});

使用步骤：

npm i gsap --save

xx.vue引入
import { gsap } from 'gsap';
调用
sap.to(".box", {rotation: 27, x: 100, duration: 1});


使用步骤：

```js
npm i gsap --save

xx.vue引入
import { gsap } from 'gsap';
调用
sap.to(".box", {rotation: 27, x: 100, duration: 1});

详细使用方式可见figureSurge.js
Gsap的用武之处远远不止这些。官方文档研究一波。
在这里插入图片描述