如何制作小程序中的文字滚动循环动画效果？

本文共计542个文字，预计阅读时间需要3分钟。

原文：通过实例为大家分享了小程序实现文字循环滚动的具体代码，供大家参考。具体内容如下+解决以下问题：1、文字循环播放特效+2、小程序退出、隐藏后台动画停止（已解决）+效果：

改写后：以实例展示如何实现小程序文字循环滚动的代码，并提供参考。内容包括：1、文字循环播放效果+2、小程序退出时隐藏后台动画停止（已解决）+效果展示：

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

解决问题：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。