电话
13363039260
如何使用CSS和GSAP实现树枝发芽的loader动画
2024-01-18 10:45 小编
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom，容器包含2个元素，branch代表枝，leaves代表叶，叶有6个子元素，代表6个叶片：
<figureclass="sapling">
<divclass="branch"></div>
<divclass="leaves">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</figure>
居中显示：
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库：
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
声明一个时间线对象：
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});
大功告成！
猜你喜欢
联络方式：
13363039260
微信二维码 