小程序帧流使用方法

小程序帧流是指在小程序中控制动画的显示频率，以达到更加流畅的动画效果。具体使用方法如下：

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)

```

data: {

class1: 'z1', //默认正面在上面

class2: 'z2'

},

rotateFn: function(e) {

let data = this.data

if (data.class1 == 'z1' &&data.class2 == 'z2') {

this.run('front', 'back', 'z2', 'z1')

} else {

this.run('back', 'front', 'z1', 'z2')

}

},

run: function(a, b, c, d) {

let that = this

that.setData({

class1: a,

class2: b,

})

setTimeout(function() {

that.setData({

class1: c,

class2: d,

})

}, 1000)

},

还有样式：

page{position: relativeheight: 100%background-color: #F6F6F6}

.rotateCtn{position: absolutewidth: 70%height: 70%left: 15%bottom: 20%transform-style:preserve-3d}

.frame{position: absoluteheight: 100%width: 100%}

.frame image{height: 100%width: 100%border-radius: 8px}

.front{animation:front 1s linear 1backface-visibility: hidden}

.back{animation:back 1s linear 1}

@keyframes front{from{transform: rotateY(0deg)} to{transform: rotateY(180deg)}}

@keyframes back{from{transform: rotateY(-180deg)} to{transform: rotateY(0deg)}}

.z1{z-index:6}

.z2{z-index:5}

---