为什么要绑定参数?为什么不直接写入参数呢?好处太多,图片我们不可能写死,从服务器请求图片,同时可以方便的控制我们的相关参数来改变swiper的行为等。
至于参数绑定,官网说的也很清楚,这里不在解释。
2)城市选择及切换
这块看起来很简单,实际上很麻烦,如果对动画不熟悉的朋友,可以会苦恼一番的。
上面的动画很流畅,可能是因为抓屏工具不太好,这点大可不用关心。
我们点击中间的“交换圆”的时候,”出发城市“与”到达城市“相互交换,他们不是立即变化,而是中间有一个"位移"效果,同时,那个“交换的圆”也要旋转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,可传入其他自定义单位的长度值