【微信小程序—动画工坊】动画入门
前情
需要了解的前置知识:
- 子代选择器
- 基本布局
分析
可以将任务进行一下拆分。
-
如何让小球跑动起来?
通过@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);
}
}