小程序实现文字循环滚动动画

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了小程序实现文字循环滚动动画脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

解决问题:

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();
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本宝典。

脚本宝典总结

以上是脚本宝典为你收集整理的小程序实现文字循环滚动动画全部内容,希望文章能够帮你解决小程序实现文字循环滚动动画所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: