<!–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();

}

},