小程序中让文字循环滚动效果怎么做,有哪些要注意

Admin 2022-06-09 群英技术资讯

关于“小程序中让文字循环滚动效果怎么做,有哪些要注意”的知识有一些人不是很理解,对此小编给大家总结了相关内容,具有一定的参考借鉴价值,而且易于学习与理解,希望能对大家有所帮助,有这个方面学习需要的朋友就继续往下看吧。


本文通过实例为大家分享了小程序实现文字循环滚动的具体代码,供大家参考,具体内容如下

解决问题:

1、文字循环播放特效

2、小程序退出、隐藏后台动画停止(已解决)

效果:

代码:

wxml

<view animation="{{animation}}" class="animation">
  919测试使用――小程序循环播放~~~
</view>

wxss

.animation{
  width: 100%;
  transform: translateX(100%);
  position: fixed;
  top: 45%;
  font-size: 16px;
  font-weight: bold;
}

最后js

/**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.bindAnimation();
  },
 
  bindAnimation(){
    var this_ = this;
      var animation = wx.createAnimation({
        duration: 5000,
        timingFunction: 'linear',
        transformOrigin:"100% 0 0"
      })
      animation.translateX('-100%').step();
      this.setData({
        animation:animation.export(),
      })
      //设置循环动画
      this.animation = animation;
      setInterval(function(){
        //第二个动画 文字位置初始化
        this.Animation2();
 
        //延迟播放滚动动画(效果会更好点)
        setTimeout(function(){
          this.animation.translateX('-100%').step();
          this.setData({
            animation: animation.export(),
          })
        }.bind(this),200);
 
        
      }.bind(this),5000);
 
  },
 
  /**
   * 第二个动画 文字位置初始化
   */
  Animation2(){
    var this_ = this;
    var animation2 = wx.createAnimation({
      duration: 0,
      timingFunction: 'linear',
      transformOrigin:"100% 0 0"
    })
    animation2.translateX('100%').step();
    this_.setData({
      animation:animation2.export(),
    })
  },
 
  /**
   * 解决小程序退出、隐藏后台动画停止
   */
  onHide: function () {
    //解决小程序退出、隐藏后台动画停止
    //重新触发动画方法即可
    this.bindAnimation();
},

到此这篇关于“小程序中让文字循环滚动效果怎么做,有哪些要注意”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章,希望大家以后多多支持群英网络!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

猜你喜欢

群英网络开启智能安全云计算之旅

注册领取新人大礼包
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务

联系我们

24小时售后 24小时售后TEL:0668-2555666 售前咨询TEL:400-678-4567 投诉建议TEL:0668-2555999 投诉建议邮箱:[email protected] 信息安全TEL:0668-2555118 域名空间客服 公司总机:0668-2555555 公司传真:0668-2555000
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部