微信小程序做字幕的案例:
在wxml文件中添加以下代码。
<view style="height: 30px;overflow: hidden;"><view animation="{{animationData}}">{{content}}</view>
</view>
在js文件中添加以下代码。
var thatvar 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)
}
})
运行代码即可实现“滚动文字广播、动态滚动公告栏”动态字幕效果。