// 注册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();