微信小程序实现公告文字滚动

微信小程序通过Animation动画对象实现文字滚动效果

1、 效果图：

2、wxml代码

  
  <view class='notice' wx:if="{{isOpen}}">
    
    <view class="left" bindtap="goNoticesList">
 <image src="../../icons/suona.png" mode="aspectFit">image>
 view>
  
   
   <view class='content-box'>
     <view class='content-text' animation="{{animationData}}" bindtransitionend='animationend'>
     <text id="text">{{text}}text>
    view>
    view>


 <view class="right" bindtap="goNotice">
  <text class="more">详情>>text>
 view>
 
 <view class="close" bindtap="closeNotices">
   <image src="../../icons/close.png" mode="aspectFit">image>
 view>
view>
  

2、wxss代码

.desc {
  padding-top: 35rpx;
  padding-bottom: 60rpx;
  width: 100%;
  background: white;
}
 
.content {
  /* 首行缩进8% */
  text-indent: 8%;
  /* height: 500rpx; */
  font-family: '微软雅黑';
  width: 90%;
  margin: 0 auto;
  font-size: 28rpx;
  line-height: 50rpx;
  background-color: white;
  /*关键属性（必须有的）  */
  display: -webkit-box;
  /*规定子元素的排列方向 */
  -webkit-box-orient: vertical;
  /* 当溢出是隐藏 */
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.hide {
  -webkit-line-clamp: 3;
  /* 透明度,半透明 */

}
 
.show {
  -webkit-line-clamp: 0;

}
 
.state {
  color: cyan;
  float: right;
  font-size: 30rpx;
  margin-right: 30rpx;
  margin-top: 5rpx;
}
/* 公告轮播样式 */
.notice {
  height: 80rpx;
  display: flex;
  align-content: center;
  justify-content: space-between;
  padding: 10rpx 25rpx;
  background: #f1f1f1;
 }
 /* 左边：公告图片的样式 */
  .left{
      width: 100rpx;
      display: flex;
      align-items: left;
    
  }
  image{
    width: 100%;
    height: 100%;
  }
  /* 中间：公告内容样式 */
 .content-box {
   display:flex;
  flex:100;
  overflow: hidden;
  align-items: center;
 }
  
 .content-text {
  color: #5e5e5e;
  white-space: nowrap;
  font-size: 28rpx;
  align-items: center;
 }
  /* 右边：详情字体的样式 */
 .right {
  flex:22;
  display: flex;
  align-items: center;
 
 }
 .more {
   margin-left: 5rpx;
  color: #eb4450;
  font-size: 28rpx;
 }
 /* 关闭公告的图标的样式 */
 .close{
  flex:8;
  display: flex;
  align-items: left;
 }

3、js代码

Page({
 
  data: {
    isFolded: true,
    widgetHeight:100,
    text: "这是一段通过Animation实现的滚动的文字",
  animation: null,
  timer: null,
  duration: 0,
  textWidth: 0,
  wrapWidth: 0,
  // 是否打开公告
  isOpen:true
  },
    // 关闭公告
    closeNotices:function(options){
          this.setData({
            isOpen:!this.data.isOpen
          })
    },
      //  监听动画结束
      animationend(){
    console.log("我完成动画了")
    },
  // ==========改变点击状态=================

  onShow() {
    this.initAnimation(this.data.text)
   },
   onHide() {
    this.destroyTimer()
    this.setData({
     timer: null
    })
   },
   onUnload() {
    this.destroyTimer()
    this.setData({
     timer: null
    })
   },
  destroyTimer() {
    if (this.data.timer) {
     clearTimeout(this.data.timer);
    }
   },
   /**
    * 开启公告字幕滚动动画
    * @param {String} text 公告内容
    * @return {[type]} 
    */
   initAnimation(texts) {
    let that = this
    
    // 获取文本节点信息
    let query = wx.createSelectorQuery()
    query.select('.content-box').boundingClientRect()
    query.select('#text').boundingClientRect()
    query.exec((rect) => {
     that.setData({
      textWidth: rect[1].width,
      duration:rect[1].width/16*300
     }, () => {
      this.startAnimation()
     })
    })
    // 创建动画对象
    this.data.animation = wx.createAnimation({
     duration: this.data.duration,
     timingFunction: 'linear'  
    })
   
   },
   // 定时器动画
   startAnimation() {
    //reset重复滚动
    this.data.animation.option.transition.duration = 0
    const resetAnimation = this.data.animation.translateX(this.data.wrapWidth).step({duration:0})
    this.setData({
     animationData: resetAnimation.export()
    });
    // 让文字滚动起来
    const animationData = this.data.animation.translateX(-this.data.textWidth).step({ duration: this.data.duration });
    setTimeout(() => {
      this.setData({
        animationData: animationData.export(),
       })
    }, 50);
    // 设置开启动画的间隔
    const timer = setTimeout(() => {
     this.startAnimation()
    }, this.data.duration);
    this.setData({
     timer
    });
   },

})