如何仅在半圈中制作动画

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>