E企盈营销工具技术服务商 热线:4006-838-530

微信小程序循环动画

E企盈直播平台营销卖货系统

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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序循环动画
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏