半円のみのアニメーション化方法

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>