[英]requestAnimationFrame with multiple independent objects
我正在嘗試為兩個不同的對象設置動畫，一個div的格式看起來像一個正方形，另一個另一個的格式看起來像一個圓形。 我為每個對象都有一個按鈕來啟動動畫，該動畫包括將對象從左向右移動。 我已包含以下代碼。 我遇到的問題是，如果我單擊“移動正方形”按鈕，然后單擊“移動圓圈”按鈕，則正方形將移回到左側。 我正在嘗試做的是使對象彼此獨立移動。
我確信有一個面向對象的解決方案，但是我已經搜索並且沒有找到對我有意義的東西。 有什么建議么？
$(document).ready(function() { var moveSquare = $('#moveSquare'); var moveCircle = $('#moveCircle'); var square = $('#square'); var squareText = $('#squareText'); square.css({ top: '100px', left: '0px', color: 'white', position: 'fixed', 'text-align': 'center' }); var pos_square = square.position(); squareText.html(pos_square.top + 'px' + '<br/>' + pos_square.left + 'px'); var circle = $('#circle'); var circleText = $('#circleText'); circle.css({ top: '300px', left: '0px', color: 'white', position: 'fixed', 'text-align': 'center' }); var pos_circle = circle.position(); circleText.html(pos_circle.top + 'px' + '<br/>' + pos_circle.left + 'px'); moveSquare.on('click', function() { console.log('movesuqare here'); requestAnimationFrame(function(timestamp) { starttime = timestamp; move(timestamp, square, squareText, 800, 5000); }); }); moveCircle.on('click', function() { console.log('movecircle here'); requestAnimationFrame(function(timestamp) { starttime = timestamp; move(timestamp, circle, circleText, 800, 1000); }); }); function move(timestamp, element, elementText, distance, duration) { var runtime = timestamp - starttime; var progress = runtime / duration; progress = Math.min(progress, 1); var leftPos = (distance * progress).toFixed(0) + 'px'; element.css({ left: leftPos, position: 'absolute' }); element.css({ 'text-align': 'center' }); var topPos = element.css('top') + '<br/>'; elementText.html(topPos + leftPos); console.log(element.prop('id') + leftPos); if (runtime < duration) { requestAnimationFrame(function(timestamp) { move(timestamp, element, elementText, distance, duration); }); } } });
html { position: fixed; top: 0; bottom: 0; right: 0; left: 0; } body { font-family: 'Courier New'; color: black; font-size: 15px; width: auto; top: 0; bottom: 0; right: 0; left: 0; } .container { width: 100px; height: 100px; } .square_css { width: 100px; height: 100px; background-color: blue; } .circle_css { width: 100px; height: 100px; border-radius: 50%; background-color: green; } .shapeText { padding-top: 30%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="<?php echo URL; ?>views/index/css/index_Main.css" /> </head> <body> <div> <input type="button" id="moveSquare" value="Move Square" /> </div> <div> <input type="button" id="moveCircle" value="Move Circle" /> </div> <div id="square" class="square_css"> <div id="squareText" class="shapeText"></div> </div> <div id="circle" class="circle_css"> <div id="circleText" class="shapeText"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="<?php echo URL; ?>views/index/js/index_main.js"></script> </body> </html>
這些問題是由兩個動畫共享一個公共變量引起的starttime 。
要修復，您需要某種方式使每個動畫具有自己的starttime 。
您可以通過多種方法來執行此操作，最簡單的方法是從點擊處理程序中傳遞一個開始時間move()以及其他參數。 而且，由於move()調用自身， starttime需要到下一個呼叫傳遞。
$(document).ready(function() { var square = $('#square').css({ 'top': '100px', 'left': '0px', 'color': 'white', 'position': 'fixed', 'text-align': 'center' }); var circle = $('#circle').css({ 'top': '300px', 'left': '0px', 'color': 'white', 'position': 'fixed', 'text-align': 'center' }); var squareText = $('#squareText'); var circleText = $('#circleText'); var pos_square = square.position(); var pos_circle = circle.position(); squareText.html(pos_square.top + 'px' + '<br/>' + pos_square.left + 'px'); circleText.html(pos_circle.top + 'px' + '<br/>' + pos_circle.left + 'px'); $('#moveSquare').on('click', function() { // button console.log('movesuqare here'); requestAnimationFrame(function(timestamp) { move(timestamp, timestamp, square, squareText, 800, 5000); }); }); $('#moveCircle').on('click', function() { // button console.log('movecircle here'); requestAnimationFrame(function(timestamp) { move(timestamp, timestamp, circle, circleText, 800, 1000); }); }); function move(starttime, timestamp, element, elementText, distance, duration) { var runtime = timestamp - starttime; var progress = runtime / duration; progress = Math.min(progress, 1); var leftPos = (distance * progress).toFixed(0) + 'px'; element.css({ left: leftPos, position: 'absolute' }); element.css({ 'text-align': 'center' }); var topPos = element.css('top') + '<br/>'; elementText.html(topPos + leftPos); console.log(element.prop('id') + leftPos); if (runtime < duration) { requestAnimationFrame(function(timestamp) { move(starttime, timestamp, element, elementText, distance, duration); }); } } });
html { position: fixed; top: 0; bottom: 0; right: 0; left: 0; } body { font-family: 'Courier New'; color: black; font-size: 15px; width: auto; top: 0; bottom: 0; right: 0; left: 0; } .container { width: 100px; height: 100px; } .square_css { width: 100px; height: 100px; background-color: blue; } .circle_css { width: 100px; height: 100px; border-radius: 50%; background-color: green; } .shapeText { padding-top: 30%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="<?php echo URL; ?>views/index/css/index_Main.css" /> </head> <body> <div> <input type="button" id="moveSquare" value="Move Square" /> </div> <div> <input type="button" id="moveCircle" value="Move Circle" /> </div> <div id="square" class="square_css"> <div id="squareText" class="shapeText"></div> </div> <div id="circle" class="circle_css"> <div id="circleText" class="shapeText"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="<?php echo URL; ?>views/index/js/index_main.js"></script> </body> </html>
如何確定requestAnimationFrame（）的時間與刷新率無關
[英]How to time requestAnimationFrame() independent of refreshrates
對多個畫布對象使用一個或多個requestAnimationFrame更好嗎？
[英]Is it better to use one or multiple requestAnimationFrame for multiple canvas objects?
如何使用requestAnimationFrame在循環中對多個正方形進行動畫處理
[英]How to use requestAnimationFrame to animate multiple squares in a loop
如何為不同的函數多次調用requestAnimationFrame？
[英]How to call requestAnimationFrame multiple times for different functions?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.