微信小程序循环动画

关于微信小程序里面的动画，微信给了我们定义了许多，包括：
rotate(number angle)
从原点顺时针旋转一个角度
rotate3d(number x, number y, number z, number angle)
从 X 轴顺时针旋转一个角度
rotateX(number angle)
从 X 轴顺时针旋转一个角度
rotateY(number angle)
从 Y 轴顺时针旋转一个角度
rotateZ(number angle)
从 Z 轴顺时针旋转一个角度
scale(number sx, number sy)
缩放双轴
scale3d(number sx, number sy, number sz)
缩放3轴
scaleX(number scale)
缩放 X 轴
scaleY(number scale)
缩放 Y 轴
scaleZ(number scale)
缩放 Z 轴
skew(number ax, number ay)
对 X、Y 轴坐标进行倾斜
skewX(number angle)
对 X 轴坐标进行倾斜
skewY(number angle)
对 Y 轴坐标进行倾斜
translate(number tx, number ty)
平移变换
translate3d(number tx, number ty, number tz)
对 xyz 坐标进行平移变换
translateX(number translation)
对 X 轴平移
translateY(number translation)
对 Y 轴平移
translateZ(number translation)
对 Z 轴平移
opacity(number value)
设置透明度
backgroundColor(string value)
设置背景色
width(number|string value)
设置宽度
height(number|string value)
设置高度
left(number|string value)
设置 left 值
right(number|string value)
设置 right 值
top(number|string value)
设置 top 值
bottom(number|string value)
设置 bottom 值
step(Object object)
表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。
export()
导出动画队列。export 方法每次调用后会清掉之前的动画操作。

那么问题来了，居然没有循环！！！！

其实循环播放一组动画是我们经常做的，然而微信没有对我们设置这个接口，那么只能自己完成了。

我这里用到了定时器，做一个全局的定时器，控制定时器的起始就可以来控制动画的播放了。

//wxml
   <view class='animation-img' wx:if="{{isLoading}}" animation="{{rotateData}}"></view>
//上面的定义
var currentDegree = 0
var rotateAnimation
//data部分
data:{	
 	isLoading : false,
  	rotateData : null 
}
//动画开始的地方
this.setData({            
	isLoading: true          
})
rotateAnimation = wx.createAnimation({})      
interval = setInterval(function () {        
	currentDegree += 180        
	rotateAnimation.rotate(currentDegree).step({ duration: 1000 })        
	that.setData({          
		rotateData: rotateAnimation.export(),        
		})      
	}, 1000)
//结束的时候
currentDegree = 0      
rotateAnimation.rotate(currentDegree).step({ duration: 1000 })
this.setData({	
	isLoading: false,        
	rotateData: rotateAnimation.export(),
}）

先说以下这样写的原因吧，如果在内部定义的话，你没有办法给rotateAnimation重置，打个比方，如果我在执行的里面没有进行数值的加运算，那么这段代码在计时器里面的就只会执行一次。结束的时候之所以要给重置到最开始的地方，我希望大家可以试验一次就知道了，如果不这样的话，你会发现当再次显示的时候的位置会和你预料的不一样。

因为当我们把动画开始的地方写成如下的形式:

interval = setInterval(function () {        
	 currentDegree = 180        
	 rotateAnimation.rotate(currentDegree).step({ duration: 1000 })        
	 that.setData({          
	  rotateData: rotateAnimation.export(),        
	  })      
	 }, 1000)

这样的话，就只会转到180度就停止了，第一次执行的时候从0度转到180度，之后已经在180度了，后面的计时器便不会生效。

剩下的是如何选择周期的问题了，那样的问题就要具体情况具体分析了。如果是上下或者左右那种有规律的循环的来的，可以设定一个true false值来做就ok了 举个例子吧

isUp = true
rotateAnimation = wx.createAnimation({})      
interval = setInterval(function () { 	
       if(isUp){
	  currentDegree += 10        
	  rotateAnimation.rotate(currentDegree).step({ duration: 1000 })        
	  that.setData({          
	  rotateData: rotateAnimation.export(),        
	  }) 
	  isUp = !isUp    	
       }else{
       	  currentDegree += 10        
	  rotateAnimation.rotate(currentDegree).step({ duration: 1000 })        
	  that.setData({          
	   rotateData: rotateAnimation.export(),        
	  })
	  isUp = !isUp
       }
 }, 1000)

我这里为了简便，还是用了rotate方法，你可以将这个方法改成位移之类的就可以了。