小程序文字循环滚动动画（完美解决）

最新推荐文章于 2023-06-29 17:13:22 发布

宋同学灬

最新推荐文章于 2023-06-29 17:13:22 发布

阅读量2.3k

点赞数 2

分类专栏：小程序文章标签：小程序循环动画特效

本文链接：https://blog.csdn.net/tongtongsong/article/details/117807706

版权

本文介绍了如何在小程序中创建文字循环滚动的动画效果，并详细解决了小程序退出或隐藏后台时停止动画的问题。提供了完整的wxml、wxss和js代码示例。

摘要由CSDN通过智能技术生成

解决问题：

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({