关于微信小程序里面的动画,微信给了我们定义了许多,包括: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方法,你可以将这个方法改成位移之类的就可以了。微信小程序
微信小程序循环动画
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序循环动画
相关推荐
如何实现线上卖断货?私域流量与公域流量哪个重要?15013808327
数据恢复软件(二):用C++重写恢复B乐都县E企盈小程序MP位图文件的小程序
公众号再次改版高坪区E企盈小程序小程序又多了一个入口
微信小程序加载图片时,湘桥区E企盈小程序先拉长,再恢复正常
转:(很有用)有多个按钮,点击一个变色,点击另吴中区E企盈小程序一个变色,原来的恢复颜色的方法
第12课微信小程序Component构造器自道里区E企盈小程序定义组件:
导航中的南海区E企盈小程序小竖线总结
小程序:after实现德格县E企盈小程序1px纵向分割线
汉沽区E企盈小程序企业微信内测朋友圈和客户群功能:小程序C位出道!
小程序运行加载密山市E企盈小程序机制
小程通城县E企盈小程序序中间有字的分隔线
公众号和小程序可以同名了名称支持同主体复盘锦E企盈小程序用
最新评论
独特万商直播系统,直播系统技术开发公司
万商直播系统开发公司
优秀的团队,万商直播管理系统
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务