1. 在小程序中引入wx.createAnimation()方法创建动画对象。
2. 使用setInterval()或requestAnimationFrame()方法控制动画的帧率。setInterval()方法会在指定的时间间隔内循环执行动画，而requestAnimationFrame()方法则会在中悄运浏览器下一次重绘之前执行动画。
3. 在动画中使用step()方法更新动画状态，将动画状态传递给animation对象。
4. 使用export()方法将动画对象导出，以便在小程卖梁序中使用。
以下是示例代码：
```
// 创建动画对象
var animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease',
delay: 0,
transformOrigin: '50% 50% 0'
})
// 控制帧率
setInterval(function () {
// 更新动画状态
animation.translateX(100).step()
animation.rotate(360).step()
// 导出动画运圆对象
wx.exportAnimation({
animationData: animation.export()
})
}, 1000 / 60)
```
官方文档是这样说的：①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。因为小程序是数据驱动的，给这句话加上数字标注分为三步：
前两步是定义一个动画并设置都要干什么，然后把这个设置好的“规则”扔给界面上的某个元素，让它按照这个规则执行。
当然如果有多个元素的animation="{{ani}}"，也都会执行这个动画规则。
二、用例子说话
新建一个小程序，把没用的删掉修改一下，做个简单例子，上图
代码如下：
index.wxml，一个helloworld，一个按钮
<view class="container">
<view class="usermotto" animation="{{ani}}">
<text class="user-motto">{{motto}}</text>
</view>
<button bindtap='start'>动画</button>
</view>
复制
index.wxss， 为盯数了看着方便加了个边框
.usermotto {
margin-top: 100px
border: solid
}
复制
index.js
Page({
data: {
motto: 'Hello World',
},
start:function(){
var animation = wx.createAnimation({
duration: 4000,
timingFunction: 'ease',
delay: 1000
})
animation.opacity(0.2).translate(100, -100).step()
this.setData({
ani: animation.export()
})
}
})
复制
三、相关参数及方法
简单介绍一下例子中的几个参数和方法（其他的详见官方文档）：
duration: 动画持续多少毫秒
timingFunction: “运动”的方式，例子中凯派首的 'ease'代表动画以低速开始，然后加快，在结束前变慢
delay: 多久后动画开始运行
opacity(0.2) 慢慢变透明
translate(100, -100) 向X轴移动100的同时向Y轴移动-100
step(): 一组动画完成，例如想让上例中的HelloWorld向右上方移动并变透明后，再次向左移羡雹动50可以继续写 animation.translateX( -50).step() , 作用就是向右上方移动和变透明是同时进行， 这两种变化完成之后才会进行向左运行的一步。
例子：Github
<button bindtap="powerDrawer" type="primary" size="mini" style="width: 55%" data-statu="open">中奖记录</button>
<!-- 中间名单d窗 -->
<view class="drawer_div">
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
<view animation="{{animationPrize}}" class="drawer_box" wx:if="{{showModalStatus}}">
<view class="drawer_title">
中奖记录
<image src="../img/x@2x.png" bindtap="powerDrawer" data-statu="close"></image>
</view>
<view class="drawer_content">
<view class="top grid">
<text>
名称：啦啦啦啦啦啦啦啦
</text>
<text>
时间：2020-02-20
</text>
</view>
<view class="top grid">
<text>
名称：啦啦啦啦啦啦啦啦
</text>
<text>
时间：2020-02-20
</text>
</让岩view>
</view>
</view>
</view>
.drawer_screen {
width: 100%
height: 100%
position: fixed
top: 0
left: 0
z-index: 1000
background: #000
opacity: 0.5
overflow: hidden
}
/*content*/
.drawer_box {
width: 650rpx
overflow: hidden
position: fixed
top: 50%
left: 0
z-index: 1001
background: #FAFAFA
margin: -150px 50rpx 0 50rpx
border-radius: 3px
}
.drawer_title{
padding:30rpx 20rpx
font-size: 36rpx
text-align: center
position: relative
}
.drawer_title 郑扰image{
display: inline-block
width: 30rpx
height: 30rpx
position: absolute
right: 9px
top: 10px
}
.drawer_content {
height: 210px
overflow-y: scroll /*超出父盒子高度可滚动*/
padding: 0 20rpx
}
.top{
display: flex
justify-content: space-between
border-bottom: 1px dashed #ccc
}
.top text{
display: inline-block
height: 60rpx
line-height: 20rpx
}
data: {
animationPrize: {},
}
powerDrawer: function (e) {
// console.log(e)
let currentStatu = e.currentTarget.dataset.statu
this.util(currentStatu)
},
util: function (currentStatu) {
坦丛御 /* 动画部分 */
// 第1步：创建动画实例
var animation = wx.createAnimation({
duration: 200, //动画时长
timingFunction: "linear", //线性
delay: 0 //0则不延迟
})
// 第2步：这个动画实例赋给当前的动画实例
this.animation = animation
// 第3步：执行第一组动画
animation.opacity(0).rotateX(-100).step()
// 第4步：导出动画对象赋给数据对象储存
this.setData({
animationPrize: animation.export()
})
// 第5步：设置定时器到指定时候后，执行第二组动画
setTimeout(function () {
// 执行第二组动画
animation.opacity(1).rotateX(0).step()
// 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象
this.setData({
animationPrize: animation
})
//关闭
if (currentStatu == "close") {
this.setData({
showModalStatus: false
})
}
}.bind(this), 200)
// 显示
if (currentStatu == "open") {
this.setData({
showModalStatus: true
})
}
},
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）