需要在小程序一进来的时候将一张图片淡入显示,所以在onload中写了淡入的方法,在运行后发现图片显示但是没有淡入的效果,代码如下
onLoad: function () {
var NewTop = wx.createAnimation({
duration: 2000,
timingFunction: 'ease-out',
delay: 0
})
NewTop.opacity(1).step();
that.setData({
newIndexShow: NewTop.export()
})
},
但是没有动画效果,图片直接显示,最后用了setTimeout方法延迟了一下解决了,代码如下
onLoad: function () {
let that = this
setTimeout(function(){
var NewTop = wx.createAnimation({
duration: 2000,
timingFunction: 'ease-out',
delay: 0
})
NewTop.opacity(1).step();
that.setData({
newIndexShow: NewTop.export()
})
},1000)
},
虽然问题解决了,但是想问一下onload中没有动画效果的原因是什么?
注意下生命周期,可以试下改到onReady
要是因为延时的原因可能是加载顺序造成的,你可以试试当页面渲染出来再执行动画,来代替你的延时1秒,1秒是你自己设置的,万一手机开了1秒还没加载出来或者在几百毫秒就加载完了,还延时1秒造成体验不好。毕竟1秒有不确定性