如何使用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});
 
  大功告成!


Tag: 如何
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码