小程序?qū)崿F(xiàn)文字循環(huán)滾動動畫
本文通過實(shí)例為大家分享了小程序?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(); //延遲播放滾動動畫(效果會更好點(diǎn)) 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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js行號顯示的文本框?qū)崿F(xiàn)效果(兼容多種瀏覽器 )
本文主要介紹了javascript實(shí)現(xiàn)行號顯示的文本框效果,這樣就可以解決讀者很難迅速找到所在某一行的對應(yīng)代碼,感興趣的小伙伴們可以參考一下2015-10-10JS實(shí)現(xiàn)選擇TextArea內(nèi)文本的方法
這篇文章主要介紹了JS實(shí)現(xiàn)選擇TextArea內(nèi)文本的方法,涉及javascript針對頁面TextArea元素焦點(diǎn)設(shè)置及文本獲取的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08HTML5之WebSocket入門3 -通信模型socket.io
socket.io能為程序員提供客戶端和服務(wù)端一致的編程體驗(yàn),socket.io支持任何的瀏覽器,任何的Mobile設(shè)備。下面通過本篇文章給大家講解HTML5之WebSocket入門3 -通信模型socket.io,需要的朋友可以參考下2015-08-08JS?中數(shù)組的增刪改查和對象的增刪改查實(shí)例詳解
這篇文章主要介紹了JS?中數(shù)組的增刪改查和對象的增刪改查實(shí)例詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07再談querySelector和querySelectorAll的區(qū)別與聯(lián)系
先按W3C的規(guī)范來說這兩個方法應(yīng)該返回的內(nèi)容吧,大家先看下官方的解釋,然后根據(jù)需要選擇使用2012-04-04js給dropdownlist添加選項(xiàng)的小例子
js給dropdownlist添加選項(xiàng)的小例子,需要的朋友可以參考一下2013-03-03JavaScript設(shè)計模式之模板方法模式原理與用法示例
這篇文章主要介紹了JavaScript設(shè)計模式之模板方法模式原理與用法,結(jié)合實(shí)例形式分析了JavaScript模板方法模式的概念、組成、定義、使用等相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-08-08