如何僅在半圈動畫

Question

我希望能夠在半圈動畫，然後只有當我處於確切的div時動畫纔會觸發，因此在其他部分查看時不會動畫。圓形路徑已經在CSS中定義了，我無法改變它，我可以把一個覆蓋圓放在圓弧頂部？所以有了這個參數，我認爲jquery會是一個好方法，或者你認爲如何？我是新來的動畫與路邊，所以我希望你能幫助我。下面是我嘗試過的插圖和代碼。

function moveit() { 
t += 0.05; 

var r = 100;   // radius 
var xcenter = 100; // center X position 
var ycenter = 100; // center Y position 

var newLeft = Math.floor(xcenter + (r * Math.cos(t))); 
var newTop = Math.floor(ycenter + (r * Math.sin(t))); 

$('#circgreen').animate({ 
    top: newTop, 
    left: newLeft, 
}, 1, function() { 
    moveit();// 
}) 

}

$(document).ready(function() { 
    moveit(); 
}) 

Answer 1

嗯。我不認爲我會嘗試使用JavaScript來計算圓的弧線並沿着它進行動畫處理。

由於外圓是在CSS中定義的，因此我將綠色覆蓋圓定義爲內部元素，其絕對位置是相對於外部圓的。然後，只需旋轉外圈：

$('button').click(() => { 
 
\t $('#circle').toggleClass('rotated') 
 
})

body { 
 
\t overflow: hidden; // just to make the example cleaner 
 
} 
 

 
#circle { 
 
\t border: 1px solid #999; 
 
\t border-radius: 200px; 
 
\t position: relative; 
 
\t height: 400px; 
 
\t width: 400px; 
 
\t transform: rotate(45deg); 
 
\t transition: transform 0.5s; 
 
} 
 

 
#circle.rotated { 
 
\t transform: rotate(135deg); 
 
} 
 

 
#circle::after { 
 
\t background: green; 
 
\t border-radius: 5px; 
 
\t content: ''; 
 
\t height: 10px; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 10px; 
 
\t transform: translateY(-50%); 
 
\t width: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Click to Rotate</button> 
 
<div id="circle"></div>