微信小程序怎么做字幕

微信小程序做字幕的案例：

在wxml文件中添加以下代码。

<viewstyle="height:30px;overflow:hidden;">
<viewanimation="{{animationData}}">{{content}}</view>
</view>

在js文件中添加以下代码。

varthat
varanimation=wx.createAnimation()
/**
*传入内容，广播将会以动画播放这条内容
*/
functionupdate(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
vargenerateRandomNumber=()=>Math.floor(Math.random()*1900+1)//生成1到1999的随机数
setInterval(()=>{update('你获得了'+generateRandomNumber()+'个金币')},1000)
}
})

运行代码即可实现“滚动文字广播、动态滚动公告栏”动态字幕效果。

上一篇：域名解析如何加端口号

下一篇：微信小程序页面跳转为什么没反应