微信小程序 小程序制作及动画(animation样式)详(2)

为什么要绑定参数?为什么不直接写入参数呢?好处太多,图片我们不可能写死,从服务器请求图片,同时可以方便的控制我们的相关参数来改变swiper的行为等。

至于参数绑定,官网说的也很清楚,这里不在解释。

2)城市选择及切换

微信小程序 小程序制作及动画(animation样式)详

这块看起来很简单,实际上很麻烦,如果对动画不熟悉的朋友,可以会苦恼一番的。

上面的动画很流畅,可能是因为抓屏工具不太好,这点大可不用关心。

我们点击中间的“交换圆”的时候,”出发城市“与”到达城市“相互交换,他们不是立即变化,而是中间有一个"位移"效果,同时,那个“交换的圆”也要旋转180度。

这样体验感立马"高上大"。呵呵,不是吗?下面我们详细的来实现它。

我们首先来温习下,官网动画相关的文档说明

wx.createAnimation(OBJECT)

创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

注意: export 方法每次调用后会清掉之前的动画操作

OBJECT参数说明:

参数 类型 必填 说明
duration   Integer     动画持续时间,单位ms,默认值 400  
timingFunction   String     定义动画的效果,默认值"linear",有效值:"linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"  
delay   Integer     动画延迟时间,单位 ms,默认值 0  
transformOrigin   String     设置transform-origin,默认为"50% 50% 0"  

var animation = wx.createAnimation({ transformOrigin: "50% 50%", duration: 1000, timingFunction: "ease", delay: 0 })

animation

动画实例可以调用以下方法来描述动画,调用结束后会返回自身,支持链式调用的写法。

样式:

方法 参数 说明
opacity   value   透明度,参数范围 0~1  
backgroundColor   color   颜色值  
width   length   长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值  
height   length   长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值  
top   length   长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值  
left   length   长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值  
bottom   length   长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值  
right   length   长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值  

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwjwgz.html