Делаю круговой прогресс бар который привязан к таймеру и уменьшается по часовой стрелки. Использую библиотеку EaselJS и tweenjs (для движения). Вроде все работает но здесь есть некоторые вопросы по Math.PI мне кажется я не совсем правильно указала математические расчеты.
Создание Arc
shape2.graphics.clear().beginStroke("#b1b1b1").setStrokeStyle(lineWidth).arc( 0, 0, radius, (Math.PI/180) * 270, (Math.PI/180) * (270 + 360) );
shape2.graphics.setStrokeStyle(lineWidth).beginStroke("#3949AB");
arcCommand = shape2.graphics.arc(0, 0, radius, -Math.PI / 2 + degrees * Math.PI, -Math.PI / 2).command;
Запуск tween:
var t = arcCommand;
var tween = createjs.Tween.get(arcCommand, { override: true })
.to({startAngle: Math.PI*2 + Math.PI/2+Math.PI}, timeLimit, createjs.Ease.easeIn).call(handleComplete);
function handleComplete()
{
pusk = false;
t.startAngle = -Math.PI / 2 + degrees * Math.PI;
}
Как правильно указать математические расчеты где присутствует Math.PI для стартовой и конечной позиции угла arc?
Вот код:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #f1ecec;
}
canvas {background-color: aliceblue;}
</style>
<script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>
<script src='https://code.createjs.com/tweenjs-0.6.2.min.js'></script>
<script>
var sec1, timeLimit, degrees, timeStart,lineWidth,radius,x1,y1,rt;
var pusk = false;
var arcCommand;
var text1,textTime;
function Main()
{
sec1 = 10;
timeLimit = sec1 * 1000;
degrees = 2;
timeStart = (new Date).getTime();
lineWidth = 10;
radius = 40;
x1 = 50;
y1 = 50;
canvas = document.getElementById('myCanvas');
stage = new createjs.Stage(canvas);
shape1 = new createjs.Shape();
shape2 = new createjs.Shape();
shape1.graphics.beginFill("#E2FFCC").drawCircle(0, 0, radius-5);
text1 = new createjs.Text("Пуск", "24px Arial", "rgb(130, 113, 121)");
textTime = new createjs.Text("0:"+sec1, "24px Arial", "rgb(130, 113, 121)");
shape1.on("click",onSearch);
text1.x = x1-25;
text1.y = y1-20;
textTime.x = x1-20;
textTime.y = y1+50;
shape1.x = shape2.x = x1;
shape1.y = shape2.y = y1;
shape2.graphics.clear().beginStroke("#b1b1b1").setStrokeStyle(lineWidth).arc( 0, 0, radius, (Math.PI/180) * 270, (Math.PI/180) * (270 + 360) );
shape2.graphics.setStrokeStyle(lineWidth).beginStroke("#3949AB");
arcCommand = shape2.graphics.arc(0, 0, radius, -Math.PI / 2 + degrees * Math.PI, -Math.PI / 2).command;
stage.addChild(shape1,shape2,text1,textTime);
createjs.Ticker.addEventListener("tick",function()
{
stage.update();
});
}
function onSearch(evt)
{
if(pusk==false)
{
pusk = true;
progress1();
}
}
function progress1()
{
timeStart = (new Date).getTime();
var acrInterval = setInterval (function() {
a = ((new Date).getTime() - timeStart) / timeLimit;
if(1 < a)
rt = 0;
else
rt = (timeStart + timeLimit - (new Date).getTime()); // Миллисекунд до окончания
s1 = Math.floor((rt / 1000) % 60);
m1 = Math.floor(rt / 60000);
if(s1<10)
{
s1="0"+s1;
}
textTime.text = m1+":"+s1;
},63);
var t = arcCommand;
var tween = createjs.Tween.get(arcCommand, { override: true })
.to({startAngle: Math.PI*2 + Math.PI/2+Math.PI}, timeLimit, createjs.Ease.easeIn).call(handleComplete);
function handleComplete()
{
pusk = false;
t.startAngle = -Math.PI / 2 + degrees * Math.PI;
}
}
</script>
</head>
<body onload="Main()">
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>
