微信小程序循环动画

关于微信小程序里面的动画，微信给了我们定义了许多，包括：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 = 0var 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 = truerotateAnimation = 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方法，你可以将这个方法改成位移之类的就可以了。微信小程序