小程序js实现【滚动文字广播、动态滚动公告栏】动画效果

效果：







实现思路：
内容是同一个容器，通过动画的效果以及改变容器的内容达到以上效果




wxml:
<view style="height: 30px;overflow: hidden;"> <view
animation="{{animationData}}">{{content}}</view> </view>
js:
var that var animation = wx.createAnimation() /** * 传入内容，广播将会以动画播放这条内容 */
function update(content) { // 旧消息向上平移，以低速开始，动画时间300ms
animation.translateY(-30).step({duration:300,timingFunction: 'ease-in'}) //
为了实现下一条新内容向上平移的效果，必须把内容很快平移到下方，并且不能被用户看见 //
实现方法：动画时间设置为1ms，过渡效果设置为’动画第一帧就跳至结束状态直到结束‘
animation.opacity(0).translateY(30).step({duration:1,timingFunction:'step-start'})
// 新消息向上平移的同时恢复透明度，以低速结束，动画时间300ms
animation.opacity(1).translateY(0).step({duration:300,timingFunction:
'ease-out'}) that.setData({ animationData: animation.export() }) //
更新内容的延时必须大于第一步动画时间 setTimeout(that.setData.bind(that,{content: content}),300) }
Page({ data: { content: '欢迎回来' }, onLoad: function(){ that = this var
generateRandomNumber = () => Math.floor(Math.random() * 1900 + 1) //
生成1到1999的随机数 setInterval(()=>{update('你获得了' + generateRandomNumber() + '个金币')},
1000) } })

代码片段：wechatide://minicode/0PUpwOmb6fZy <>

• « 上一篇：上周热点回顾（1.7-1.13）
• » 下一篇：clickhouse与mysql查询速度对比