【微信小程序—动画工坊】动画入门keyframe

【微信小程序—动画工坊】动画入门

前情

需要了解的前置知识：

• 子代选择器
• 基本布局

分析

可以将任务进行一下拆分。

• 如何让小球跑动起来？

  通过@keyframe创造动画函数，然后再通过animation绑定创造动画函数

  @keyframe的百分比代表动画的进度，0%代表动画的起点，100%代表动画的终点，如果有多个相同的位置，可以多个时间点合并设置。

• 怎么控制动画的走向？

  使用transform:translate函数

  transform:translate(a,b),代表元素等会要移到距离起点位置右方a个距离和下方b个距离的位置。

• 如何控制动画的快慢？

  在animation里面我们可以设置动画的周期，如果我们给的周期越短，意味着动画要完成得越快，反之同理。

  animation: 6s;
  

• 如何使动画无穷无尽地进行下去？

  animation: infinite;
  

• 如何使小球平滑地跑动起来？

  在animation中添加ease属性

• 如何使得画出小球？

  先画出一个正方形，然后这样子设置

   border-radius: 100%;
  

代码文件

• wxml

<view class="container">
  <view></view>
  <view></view>
  <view></view>
  <view></view>
</view>

• css

page{
  display:flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: black;
}

.container{
  position: relative;
  width: 200px;
  height: 200px;
}

.container view{
  position: absolute;
  width: 40%;
  height: 40%;
  border-radius: 100%;
  background-color:#ffffff;
  animation: loading 6s infinite ease;
}

.container :first-child{
  animation-delay: 1.5s;
}

.container :nth-child(1){
  animation-delay: 2.0s;
}

.container :nth-child(2){
  animation-delay: 3s;
}

.container :nth-child(3){
  animation-delay: 5s;
}

@keyframes loading{
  0%,100%{
    transform: translate(0,0);
  }
  20%{
    transform: translate(100px,100px)
  }
  40%{
    transform: translate(-100px,-100px);
  }
  60%{
    transform: translate(-100px,100px);
  }
  80%{
    transform: translate(100px,-100px);
  }
}