gsap数字滚动动画

2022-09-12 05:08:12

2024-11-21 17:00:44

安装

shell 复制代码

pnpm add -S gsap

封装子组件

vue3版本

vue 复制代码

<template>
    {{ d.num.toFixed(0) }}
</template>
<script setup lang="ts">
import gsap from 'gsap';

const props = defineProps({
    value: {
        type: Number,
        default: 0
    }
});

const d = reactive({
    num: 0
});

function AnimateToValue() {
    gsap.to(d, {
        duration: 0.5,
        num: props.value
    });
}

AnimateToValue();

watch(
    () => props.value,
    () => AnimateToValue()
);
</script>

vue2版本

vue 复制代码

<template>
    <div>
        {{ num.toFixed(0) }}
    </div>
</template>
<script>
import gsap from "gsap";

export default {
    name: "CountTo",

    props: {
        value: {
            type: Number,
            default: 0
        }
    },

    data() {
        return {
            num: 0
        };
    },

    mounted() {
        this.AnimateToValue();
    },
    methods: {
        AnimateToValue() {
            gsap.to(this.$data, {
                duration: 1,
                num: this.value
            });
        }
    },
    //监听数据是否改变，改变就重新渲染
    watch: {
        value: {
            handler(newValue, oldValue) {
                this.AnimateToValue();
            },
            immediate: true,
            deep: true
        }
    }
};
</script>

使用

js 复制代码

  <CountTo :value="item"></CountTo>

import CountTo from '@/components/CountTo.vue';

运营需要亿点资金维持，您的支持，是小白龙创作的动力！！！

游客

香港 - 0

Chrome128.0.0.0

Mac OS10.15.7

2024-09-11 23:00:56