Linux 拨号vps windows公众号手机端

微信小程序怎么做字幕

lewis 7年前 (2018-09-27) 阅读数 11 #VPS/云服务器

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

在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)

}

})

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


版权声明

本文仅代表作者观点,不代表米安网络立场。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门