树枝发芽的loader动画能给用户带来自然舒适的加载感受，结合CSS的样式搭建能力和GSAP的动画控制能力，我们可以快速实现这种效果，整个过程分为样式构建和动画逻辑编写两部分。
基础样式搭建
首先用CSS定义树枝和嫩芽的基础样式，树枝使用细长矩形模拟，嫩芽用圆形和三角形组合实现，同时设置初始状态为隐藏，方便后续动画控制。
/* 容器样式 */
.loader-container {
width: 200px;
height: 200px;
position: relative;
margin: 50px auto;
}
/* 树枝基础样式 */
.branch {
width: 120px;
height: 6px;
background: #8B4513;
border-radius: 3px;
position: absolute;
top: 100px;
left: 40px;
transform-origin: left center;
}
/* 嫩芽样式 */
.bud {
width: 12px;
height: 12px;
background: #90EE90;
border-radius: 50% 50% 50% 0;
position: absolute;
transform: rotate(-45deg);
opacity: 0;
transform-origin: center bottom;
}
/* 第一个嫩芽位置 */
.bud-1 {
top: 85px;
left: 80px;
}
/* 第二个嫩芽位置 */
.bud-2 {
top: 75px;
left: 110px;
}GSAP动画逻辑编写
接下来引入GSAP库，通过时间轴控制树枝出现、嫩芽依次发芽的动画顺序，同时添加合适的缓动效果让动画更自然。
// 引入GSAP库，这里假设已经通过script标签引入
// 创建动画时间轴
const loaderTimeline = gsap.timeline({ repeat: -1, repeatDelay: 0.5 });
// 第一步：树枝从无到有出现
loaderTimeline
.fromTo('.branch',
{ scaleX: 0, opacity: 0 },
{ scaleX: 1, opacity: 1, duration: 0.8, ease: 'power2.out' }
)
// 第二步：第一个嫩芽发芽
.to('.bud-1', {
opacity: 1,
scale: 1.2,
duration: 0.5,
ease: 'back.out(1.7)'
}, '-=0.3') // 比上一个动画提前0.3秒开始，衔接更自然
// 第三步：第一个嫩芽缩小到正常大小
.to('.bud-1', {
scale: 1,
duration: 0.3,
ease: 'power1.out'
})
// 第四步：第二个嫩芽发芽
.to('.bud-2', {
opacity: 1,
scale: 1.2,
duration: 0.5,
ease: 'back.out(1.7)'
}, '-=0.2')
// 第五步：第二个嫩芽缩小到正常大小
.to('.bud-2', {
scale: 1,
duration: 0.3,
ease: 'power1.out'
})
// 第六步：所有元素淡出，准备下一次循环
.to(['.branch', '.bud'], {
opacity: 0,
duration: 0.6,
ease: 'power2.in',
delay: 0.5
});参数调整建议
如果想要调整动画效果，可以修改以下参数：
- 调整
duration数值改变对应动画的时长，数值越大动画越慢 - 修改
ease的参数更换缓动效果，比如换成elastic.out会有弹性效果 - 调整
repeatDelay的数值改变两次动画循环的间隔时间 - 修改嫩芽的
background颜色可以更换发芽的颜色，适配不同的页面风格
注意事项
实际使用时需要注意GSAP的引入路径正确，如果是本地开发可以将GSAP文件放在项目目录中引入，也可以直接使用CDN链接。另外如果页面中有多个loader实例，需要给每个实例的容器添加唯一类名，避免动画互相干扰。如果需要在动画结束后执行其他逻辑，可以在时间轴的onComplete回调中添加对应的处理函数。