小程序公告轮播（走马灯效果）

使用Animation，setTimeval完成单行轮播
git文件地址
https://github.com/zhangrui-1...

wxml文件

<view class='contain'>
    <image src='/images/notice.png'></image>
    <view class='xian'></view>
    <view class='notice container'>
          <view class='announcement-text' animation="{{animationData}}"> {{notice_content}}</view>
    </view>
</view>

css文件

.contain{
  position: relative;
  width: 670rpx;
  height: 50rpx;
  line-height: 50rpx;
  background:rgba(253,253,253,1);
  margin: 20rpx auto 0;
   z-index: 10;
  font-size: 30rpx;
  overflow:auto;
  box-shadow:0px 0px 7rpx 0px rgba(83,152,95,0.18);
  border-radius:10rpx;
}
.contain image{
  display: inline-block;
  width: 30rpx;
  height: 30rpx;
  margin: 9rpx 25rpx;
}
.contain .xian{
  width: 2rpx;
  height: 36rpx;
  background: rgba(135,135,135,0.5);
  position: absolute;
  left: 80rpx;
  top:7rpx;
}
.contain .notice{
  position: absolute;
  z-index: 11;
  width: 538rpx;
  margin-left: 82rpx;
  padding: 0 25rpx;
  height: 36rpx;
  line-height: 36rpx;
  top: 7rpx;
  font-size: 26rpx;
  color: #888888;
  overflow: hidden;
}
.announcement-text {
  width: 538rpx;
  white-space: nowrap;
}

js文件

const app = getApp()

Page({
  data: {
    // notice_content:'公告字幕滚动播放（文字跑马灯效果）,使用动画和定时器完成，代码片断是一种迷你、可分享的小程序或小游戏项目，可用于分享小程序和小游戏的开发经验',
    notice_content: '公告字幕滚动播放（文字跑马灯效果）,,,,,,,,使用动画和定时器完成，代码片断是一种迷你、',
    animationData: {}, //公告动画
  },
  onLoad: function () {
    let that = this;
    let reg = /[\u4e00-\u9fa5]/g;
    let text_con = that.data.notice_content;
    let textLen = text_con.length,
        textStrLen = text_con.match(reg).length;
        //计算有多少个,加一是为了不内容没有所有离开显示框
    let hasStrLen = textStrLen + Math.ceil((textLen - textStrLen)/2)+1

    console.log(hasStrLen)
    let timeT = hasStrLen * 200
    console.log(timeT)
    //建立动画实例
    var animation = wx.createAnimation({
      //此处以公告最长内容来设置动画持续时间（duration：决定整个动画播放的速度）
      duration: timeT,
      timingFunction: 'linear'
    });
    // //偏移距离为公告内容的长度*字体大小（若字体大小使用rpx须要换算成px）
    animation.translate(-Number(hasStrLen * 13), 0).step();
    // animation.translate(-300, 0).step();
    that.setData({
      animationData: animation.export()
    });
    // 循环播放动画关键步骤（使用两个定时器）
    // 第一个定时器：将字幕恢复到字幕开始点（为屏幕左边）,时间比初始值小，从新给animation赋值，刷新文字
    that.t1 = setInterval(function () {
      animation = wx.createAnimation({
        //此处以公告最长内容来设置动画持续时间（duration：决定整个动画播放的速度）
        duration: timeT,
        timingFunction: 'linear'
      });
      animation.translate(0, 0).step({ duration: 0 });
      that.setData({
        animationData: animation.export()
      });
    }.bind(that), timeT -1);
    // 第二个定时器：从新开始移动动画,重置文本的位置
    that.t2 = setInterval(function () {
      animation.translate(-Number(hasStrLen * 13), 0).step();
      that.setData({
        animationData: animation.export()
      });
    }.bind(this), (timeT + 10) / 10);
  },
})