jquery - 如何仅在半圈内制作动画

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(() => {
	$('#circle').toggleClass('rotated')
})

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

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

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

#circle::after {
	background: green;
	border-radius: 5px;
	content: '';
	height: 10px;
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	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>