// 从中心向外扩散的动画
function playFromCenter() {
gsap.fromTo('.box',
{
scale: 0, // 初始缩放比例为0(完全缩小)
opacity: 0 // 初始透明度为0(完全透明)
},
{
scale: 1, // 最终缩放比例为1(原始大小)
opacity: 1, // 最终透明度为1(完全不透明)
duration: 0.5, // 动画持续时间0.5秒
stagger: {
amount: 1.5, // 所有元素完成动画的总时间为1.5秒
from: "center", // 动画从中心开始向外扩散
grid: [5,5] // 将元素排列成5x5的网格
}
}
);
}
// 从左到右的动画
function playFromLeft() {
gsap.fromTo('.box',
{
x: -100, // 初始位置在左侧-100像素处
opacity: 0 // 初始透明度为0(完全透明)
},
{
x: 0, // 最终位置回到原点
opacity: 1, // 最终透明度为1(完全不透明)
duration: 0.5, // 动画持续时间0.5秒
stagger: {
each: 0.1, // 每个元素之间间隔0.1秒开始动画
from: "start", // 从第一个元素开始
grid: "auto" // 自动计算网格布局
}
}
);
}
// 随机顺序动画
function playRandom() {
gsap.fromTo('.box',
{
rotation: 180, // 初始旋转180度
opacity: 0 // 初始透明度为0(完全透明)
},
{
rotation: 0, // 最终旋转回到0度
opacity: 1, // 最终透明度为1(完全不透明)
duration: 0.7, // 动画持续时间0.7秒
stagger: {
amount: 1, // 所有元素完成动画的总时间为1秒
from: "random" // 随机顺序播放动画
},
ease: "back.out" // 缓动效果:略微回弹
}
);
}
// 页面加载时播放一次从中心扩散的动画
playFromCenter();