微信小程序如何做字幕

微信小程序如何做字幕

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

在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(⑶0).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)
  }
})

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