小程序js实现【滚动文字广播、动态滚动公告栏】动画效果

效果：

实现思路：

内容是同一个容器，通过动画的效果以及改变容器的内容达到以上效果

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'})
  // 新消息