温馨提示×

微信小程序怎么做字幕

小新
271
2021-03-19 08:33:30
栏目: 云计算
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

微信小程序怎么做字幕

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

在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,{contentcontent}),300)

}

 

Page({

  data: {

    content'欢迎回来'

  },

  onLoad: function(){

    that = this

    var generateRandomNumber = () => Math.floor(Math.random() * 1900 + 1) // 生成11999的随机数

    setInterval(()=>{update('你获得了' + generateRandomNumber() + '个金币')}, 1000)

  }

})

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

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:微信小程序怎么做优化

0