小程序?qū)崿F(xiàn)文字循環(huán)滾動動畫
更新時間:2021年06月14日 12:02:03 作者:編程改變?nèi)松?
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)文字循環(huán)滾動動畫,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文通過實例為大家分享了小程序?qū)崿F(xiàn)文字循環(huán)滾動的具體代碼,供大家參考,具體內(nèi)容如下
解決問題:
1、文字循環(huán)播放特效
2、小程序退出、隱藏后臺動畫停止(已解決)
效果:
代碼:
wxml
<view animation="{{animation}}" class="animation"> 919測試使用——小程序循環(huán)播放~~~ </view>
wxss
.animation{ width: 100%; transform: translateX(100%); position: fixed; top: 45%; font-size: 16px; font-weight: bold; }
最后js
/** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ 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(), }) //設(shè)置循環(huán)動畫 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 () { //解決小程序退出、隱藏后臺動畫停止 //重新觸發(fā)動畫方法即可 this.bindAnimation(); },
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js行號顯示的文本框?qū)崿F(xiàn)效果(兼容多種瀏覽器 )
本文主要介紹了javascript實現(xiàn)行號顯示的文本框效果,這樣就可以解決讀者很難迅速找到所在某一行的對應代碼,感興趣的小伙伴們可以參考一下2015-10-10JS實現(xiàn)選擇TextArea內(nèi)文本的方法
這篇文章主要介紹了JS實現(xiàn)選擇TextArea內(nèi)文本的方法,涉及javascript針對頁面TextArea元素焦點設(shè)置及文本獲取的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08HTML5之WebSocket入門3 -通信模型socket.io
socket.io能為程序員提供客戶端和服務端一致的編程體驗,socket.io支持任何的瀏覽器,任何的Mobile設(shè)備。下面通過本篇文章給大家講解HTML5之WebSocket入門3 -通信模型socket.io,需要的朋友可以參考下2015-08-08再談querySelector和querySelectorAll的區(qū)別與聯(lián)系
先按W3C的規(guī)范來說這兩個方法應該返回的內(nèi)容吧,大家先看下官方的解釋,然后根據(jù)需要選擇使用2012-04-04JavaScript設(shè)計模式之模板方法模式原理與用法示例
這篇文章主要介紹了JavaScript設(shè)計模式之模板方法模式原理與用法,結(jié)合實例形式分析了JavaScript模板方法模式的概念、組成、定義、使用等相關(guān)操作技巧與注意事項,需要的朋友可以參考下2018-08-08