我试图让我的圆弧的结束 Angular 从 X 到 Y。
这是我拥有的:http://jsfiddle.net/97dUJ/
我可以做:
var endAngle = 0 * Math.PI;
动画:
var endAngle = 0.5 * Math.PI;
不只是跳到那个 Angular ,而是实际制作动画,简单易用,例如 easeInOut 或其他……这可能吗?谢谢!
最佳答案
您可以为 endAngle 属性设置动画,然后清除 Canvas 并使用最新值重新绘制圆弧,就像这样......
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var props = {
x : canvas.width / 2,
y : canvas.height / 2,
radius : 75,
startAngle : 0,
endAngle : 0,
counterClockwise : false
}
function drawArc() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(props.x, props.y, props.radius, props.startAngle, props.endAngle, props.counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = 'black';
context.stroke();
}
TweenMax.to(props, 1, {endAngle: Math.PI * 2, yoyo:true, repeat:-1, ease:Quad.easeInOut, onUpdate:drawArc});
注意:这是使用 Tweenmax 为属性设置动画
关于javascript - 我可以为圆弧的结束 Angular 设置动画吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13884543/