小程序實現文字循環滾動動畫
本文通過實例為大傢分享瞭小程序實現文字循環滾動的具體代碼,供大傢參考,具體內容如下
解決問題:
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(); },
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。