微信小程序位移动画实例介绍
时间: 2023-09-19 11:07:24 浏览: 44
微信小程序位移动画是一种基于CSS3的动画效果,可以通过改变元素的位置来实现动画效果。以下是一个简单的位移动画实例:
1. 在WXML文件中添加一个需要动画的元素:
```
<view class="box"></view>
```
2. 在WXSS文件中设置元素的样式和动画:
```
.box {
width: 100px;
height: 100px;
background-color: #f00;
position: absolute;
left: 0;
top: 0;
animation: move 2s linear infinite;
}
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}
```
3. 在JS文件中启动动画:
```
// 获取元素
const box = document.querySelector('.box');
// 启动动画
box.style.animationPlayState = 'running';
```
以上代码实现了一个简单的水平位移动画,动画时间为2秒,循环播放。在CSS中,通过@keyframes关键字定义了动画的三个状态,0%代表动画开始时的状态,50%代表动画进行到一半的状态,100%代表动画结束时的状态。在JS中,通过修改元素的animationPlayState属性来启动或暂停动画。