亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使jQuery setinterval在移動中更流暢?

如何使jQuery setinterval在移動中更流暢?

瀟瀟雨雨 2021-04-09 14:15:21
對不起,英語不好。這里是網站的鏈接。我的任務是創建沒有滾動的網站。當用戶單擊屏幕的右側部分時,汽車開始向前移動。當它到達屏幕中間時,汽車停下來,固定的內容塊開始朝相反的方向移動。如果用戶將光標移到屏幕左側(按住鼠標按鈕的同時),則汽車應向后移動。桌面版本按預期工作。但是移動版本很慢。(這并不是很慢,我猜它還不如臺式機那么順暢)我該怎么解決這個問題?在touchstart事件上,我獲得event.pageX值來檢查屏幕用戶觸摸過的部分。(這樣我就知道汽車應該向哪個方向移動)并將此值存儲在變量“ mousePos”中。然后我用運動函數調用setInterval在touchend事件中,我清除了間隔以阻止汽車行駛。在touchmove上,我將使用新的event.pageX值重寫“ mousePos”變量。例如:用戶單擊,汽車開始移動,如果用戶將光標向左移動,我將使用此變量來檢查方向并向后轉汽車。在mouseMove功能中,我將檢查汽車的位置并決定應采取的措施-移動汽車或移動背景,然后我將檢查其是否到達終點事件:   $(document).on('mousedown touchstart', '.mouse-click', function(event){        clicking = true;        mousePos = event.pageX;        if ( event.target.className == 'helper' ) {            showModal();        } else {            moveStuff = setInterval(mouseMove, 1);        }    });    $(document).on('mouseup touchend', function(){        clicking = false;        carLights.removeClass('blink');        clearInterval(moveStuff);    })    $(document).on('mousemove touchmove', '.mouse-click', function(event){        if(clicking == false) {            return;        } else {            mousePos = event.pageX;        }    });功能:    function mouseMove() {        let offset = parseInt( mainContent.css('left') );        let offsetCar = parseInt( car.css('left') );        if ( mousePos > middleScreen ) {            carLights.removeClass('blink');            if ( offset < - ( contentWidth ) ) {                return;            } else {                rotateWheelsForward();                if ( offsetCar < middleScreen ) {                    car.css('left', (offsetCar + mouseSpeed) + 'px');                } else {                    mainContent.css('left', (offset - mouseSpeed) + 'px');                }            }        } else if ( mousePos < middleScreen ) {            carLights.addClass('blink');            if ( offset > 0 ) {                carLights.removeClass('blink');                return;            } 那么,如何在移動設備中使運動更流暢?(我使用iphone 5s野生動物園,但在iphone 6中進行了測試,但效果仍然很差)我應對此代碼進行哪些更改?
查看完整描述

1 回答

?
白板的微信

TA貢獻1883條經驗 獲得超3個贊

我建議使用變換而不是位置,例如:左,最上面的原因確實影響了層的重排-重繪。(明智地)使用requestAnimationFrame執行平滑的事件動畫,例如滾動,mouseup或任何其他事件。

然后使用will-change: transform;將來會“轉換”的元素。這將創建新層,并為以后的元素更改做準備。

就我而言,相對位置會影響重排或渲染工具鑲邊上的綠色閃爍。因此,我更喜歡使用固定/絕對位置來防止這種情況。

這是一篇很棒的文章,可讓您通過requestAnimationFrame獲得更清晰,更真實,更快速的動畫,以及如何使用CSS實現60 fps動畫


查看完整回答
反對 回復 2021-04-22
  • 1 回答
  • 0 關注
  • 230 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號