gsap-文字动画

269 阅读1分钟

 // 注册TextPlugin插件
        gsap.registerPlugin(TextPlugin);

        // 打字机效果
        function playTypewriter() {
            const text = "欢迎使用GSAP";
            gsap.to(".text-animation", {
                duration: 2,      // 动画持续时间2秒
                text: text,       // 目标文本内容
                ease: "none",     // 无缓动效果(线性变化)
                repeat: -1,       // 无限重复
                repeatDelay: 1    // 每次重复之间延迟1秒
            });
        }

        // 词语动画效果
        function playWordEffect() {
            const words = ["动画", "效果", "展示"];
            let currentIndex = 0;

            gsap.to(".word-split", {
                duration: 1,      // 动画持续时间1秒
                text: words[0],   // 初始显示第一个词
                repeat: -1,       // 无限重复
                repeatDelay: 0.5, // 每次重复之间延迟0.5秒
                ease: "power1.inOut", // 缓动效果:渐入渐出
                yoyo: true,       // 动画来回播放
                onRepeat: () => { // 每次重复时执行的回调函数
                    currentIndex = (currentIndex + 1) % words.length;
                    gsap.to(".word-split", {
                        duration: 1,    // 动画持续时间1秒
                        text: words[currentIndex] // 更新显示的词
                    });
                }
            });
        }

        // 字符动画效果
        function playCharEffect() {
            const text = "炫酷文字";
            gsap.to(".char-effect", {
                duration: 0,
                text: ""
            });
            
            const tl = gsap.timeline({repeat: -1, repeatDelay: 1});
            
            // 逐个字符显示,带有缩放和旋转效果
            for(let i = 0; i < text.length; i++) {
                tl.to(".char-effect", {
                    duration: 0.5,    // 动画持续时间0.5秒
                    text: text.substring(0, i + 1), // 逐字显示文本
                    scale: 1.2,       // 放大到1.2倍
                    rotation: 10,     // 旋转10度
                    ease: "back.out"  // 回弹效果
                }).to(".char-effect", {
                    duration: 0.2,    // 动画持续时间0.2秒
                    scale: 1,         // 恢复原始大小
                    rotation: 0       // 恢复原始角度
                });
            }
        }

        // 默认播放打字机效果
        playTypewriter();