微信小程序商城弹出信息效果

1.结构

< view class= "swipwer" animation= "{{animationData}}" >

< view bindtap= "toDetail" data-id= "{{barragelis[0].goods_id}}">

xxx刚刚领取了100万

</ view >

</ view >

2.js事件处理，运动轨迹

// 存储数据

data: {

animationData: {}

}, 

onShow: function () {

var animation = wx.createAnimation({

duration: 2000, // 动画持续时间，单位ms

timingFunction: 'ease', // 动画以低速开始，然后加快，在结束前变慢

})

this.animation = animation

this.setData({

animationData: animation.export()

})

setInterval(function () {

this.animation.translate( 220).step({ duration: 5000 }) //水平位移向左，持续5秒

this.animation.translate(- 500).step({ duration: 5000 }) //水平位移向右，持续5秒

this.setData({

animationData: animation.export()

})

}.bind( this), 5000)

},

详细请看微信小程序文档

https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html#wxcreateanimationobject