在小程序上使用了requestAnimationFrame()这个方法 在开发者工具上运行时好使的 ,
为什么预览到真机上就不起作用了.
<!--index.wxml-->
<!-- 旋转动画 -->
<view class="animation-box">
<view class="animation" bindtap='clickAnimation'>
<image src='../images/radar_background.png' ></image>
<view animation="{{animationData}}" class='line'></view>
</view>
</view>
/******************************
=========== 旋转动画 ========
******************************/
.animation-box{
position:fixed;
top:0;
width:100%;
height:300px;
/* background: pink; */
padding-top:20px;
}
.animation-box .animation{
position:relative;
width:250px;
height:250px;
margin:0 auto;
}
.animation-box .animation .line{
position:absolute;
top:50%;
left:35px;
width:90px;
height:1px;
background: #000;
}
.animation-box .animation image{
width:250px;
height:250px;
}
/******************** index.js **********************/
data: {
animationData: {},
degree: 0
},
onLoad: function (options) {
var that = this;
},
onReady: function () {
},
onShow: function () {
this.startAnimation();
},
startAnimation: function () {
var that = this;
var lineMove = null;
//创建动画实例
var animation = wx.createAnimation({
duration: 400,
timingFunction: 'linear',
transformOrigin: "100% 0",
})
this.animation = animation
function ani() {
animation.rotate(that.data.degree += 1).step();
that.setData({
animationData: animation.export()
})
lineMove = requestAnimationFrame(ani);
that.lineMove = lineMove;
}
ani();
},
stopAnimation: function () {
var that = this;
cancelAnimationFrame(that.lineMove);
console.log(this.lineMove);
that.lineMove = false;
console.log(this.lineMove);
},
clickAnimation: function () {
if (this.lineMove) {
this.stopAnimation();
} else {
this.startAnimation();
}
},
