如何使用CSS和GSAP实现树枝发芽的loader动画
导读： 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义dom，容器包含2个元素，branch代表枝，leaves代表叶，叶有6个子元素，...
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom，容器包含2个元素，branch代表枝，leaves代表叶，叶有6个子元素，代表6个叶片：
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:black;
}
定义容器尺寸，并设置子元素水平居中：
.sapling{
position:relative;
width:5em;
height:17.5em;
font-size:10px;
display:flex;
justify-content:center;
}
画出树枝：
.branch{
position:absolute;
width:0.2em;
height:inherit;
border-radius:25%;
background:burlywood;
}
定义树叶容器，设置为叶片在垂直方向均匀分布，并且从下到上排列：
.leaves{
position:absolute;
width:inherit;
height:15em;
top:1em;
display:flex;
flex-direction:column-reverse;
}
设置叶片的尺寸和和背景颜色：
.leavesspan{
width:2.5em;
height:2.5em;
background-color:limegreen;
}
设置左右叶片的各自样式：
.leavesspan:nth-child(odd){
border-bottom-left-radius:3em;
border-top-right-radius:3em;
transform-origin:rightbottom;
align-self:flex-start;
}
.leavesspan:nth-child(even){
border-bottom-right-radius:3em;
border-top-left-radius:3em;
transform-origin:leftbottom;
align-self:flex-end;
}
至此，静态效果绘制完成，接下来开始写动画脚本。
引入GSAP库：
声明一个时间线对象：
letanimation=newTimelineMax();
增加树枝的入场动画效果，并为这个动画设置一个标签branch：
animation.from('.branch',4,{
scaleY:0,ease:Power1.easeOut}
,'branch');
增加树叶的入场动画效果，它的参数中有3个0.5，从左到右的含义分别是动画时长、多个叶片动画的间隔时长、相对branch标签动画的延迟时间：
animation.from('.branch',4,{
scaleY:0,ease:Power1.easeOut}
,'branch')
.staggerFrom('.leavesspan',0.5,{
scale:0,ease:Power1.easeOut}
,0.5,0.5,'branch');
增加叶片变黄的动画效果：
animation.from('.branch',4,{
scaleY:0,ease:Power1.easeOut}
,'branch')
.staggerFrom('.leavesspan',0.5,{
scale:0,ease:Power1.easeOut}
,0.5,0.5,'branch')
.to(['.branch','.leavesspan'],3,{
backgroundColor:'yellow'}
);
增加淡出效果：
animation.from('.branch',4,{
scaleY:0,ease:Power1.easeOut}
,'branch')
.staggerFrom('.leavesspan',0.5,{
scale:0,ease:Power1.easeOut}
,0.5,0.5,'branch')
.to(['.branch','.leavesspan'],3,{
backgroundColor:'yellow'}
)
.to(['.branch','.leavesspan'],1,{
autoAlpha:0}
);
修改声明时间线的代码，使动画重复播放：
letanimation=newTimelineMax({
repeat:-1,repeatDelay:0.5}
);
大功告成！本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何使用CSS和GSAP实现树枝发芽的loader动画
本文地址： https://pptw.com/jishu/664919.html