美文网首页
跑马灯效果(文本)

跑马灯效果(文本)

作者: Gxdy | 来源:发表于2020-03-27 11:02 被阅读0次

    简介

    本篇主要介绍在微信小程序中用一种简单的方式实现跑马灯效果(相对网上查询到的其它方法更加简洁)

    • 核心动画是通过wxss实现
    • 一点点的js进行动画效果微调(如果对动画要求不高可以不用)

    效果示意

    1. 开始和结束会停顿一段时间(demo中时间长达由文字长度决定,如果需要更加进行可以通过js自行进行控制)
    2. 当文字不满一屏是,不会滚动(无动画)
    模拟器演示有时细微闪烁(比gif流程蛮多),真机流畅.gif

    Code

    我是将代码写在一个组件中的, 使用时直接使用组件即可。下面是组件中的代码

    • marquee-text.json
    {
      "component": true,
      "usingComponents": {}
    }
    
    • marquee-text.js
      下面js的作用是设置动画时长和线性特性
    Component({
      properties: { text: { type: String, value: ''} },
      data: {  sty: ''  },
    
      ready: function () {
        let THIS = this
        const query = wx.createSelectorQuery().in(this)
        query.select('#marquee').boundingClientRect()
        query.exec(function (res) {
          let maxW = res[0].right   // 获取文本框的最大y坐标 
          let windowW = wx.getSystemInfoSync().windowWidth  
          let sty = ''
          if(maxW > windowW) { // 满足一屏(不足一屏,不动画)
            let time = 10 * maxW / windowW // 动画时长
            sty = 'animation: textblock ' + time + 's linear infinite;'
          }
          THIS.setData({ sty: sty })
        })
      },
    })
    
    • marquee-text.wxml
    <scroll-view class="content">
      <view id="marquee" class='text-box' style="{{sty}}">
        {{text}}
      </view>
    </scroll-view>
    
    • marquee-text.wxss
    .content{
      background-color: #FFF9F0;
      color: #333333;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 12pt;
      overflow: hidden;
    }
    .text-box {  
      white-space: nowrap;
      position: absolute;
      width: max-content;
      margin-left: 40rpx;
    }
    @keyframes textblock { 
      /* 0%~%6是动画开始前的暂停,如果需要精细控制可以通过js辅助 */
      0% {transform: translateX(0);}
      6% {transform: translateX(0);}
      100% {transform: translateX(-100%);}
    }
    

    写在结尾

    我在网上查了不少其它实现方式(如微信提供的动画API等),但我感觉比较麻烦,然后尝试着写了这么个东西。虽然不见得比那些查到就好, 但是我还是决定拿出来和大家分享一下,看各位的意见,集思广益才能知道我的思路是否值得推广,才能共同进步!

    相关文章

      网友评论

          本文标题:跑马灯效果(文本)

          本文链接:https://www.haomeiwen.com/subject/nankuhtx.html