Цикл анимации обратного отсчета - CreateJS / EaselJS / TweenJS - PullRequest
Новая
       49

Цикл анимации обратного отсчета - CreateJS / EaselJS / TweenJS

0 голосов
/ 18 июня 2019

Я совсем новичок в createJS - я хочу достичь, как анимация таймера обратного отсчета:

Я наткнулся на этот выпуск , у которого есть эта скрипка - я хочу достичь чего-то подобного, но я хочу создать форму дуги:

Я попытался откорректировать код и изменил значения точек, но он дал мне только ромбовидную, а не идеальную кривую.

Нужно ли указывать все значения для достижения идеального круга, например: 

points = [{x: 50, y: 0}, {x: 51, y: 1}, {x:52, y: 2}, ...etc]

Или есть другой способ (возможно, функция или плагин), который делает это? Я не смог ничего найти в их документации

1 Ответ

1 голос
/ 19 июня 2019

Вас может заинтересовать использование графики arc() вместе с подходом EaselJS "Command" к графике:

1) Создание полной дуги 

var s = new createjs.Shape().set({x:100,y:100});
s.strokeCmd = s.graphics.s("red")
    .ss(10,"round")
    .arc(0,0,80,0,Math.PI*2)

2) Storeотключите последнюю «команду» 

var cmd = s.command; // This will be the arc command

3) Установите для команды endAngle значение 0. Вы также можете сделать это в методе arc () 

cmd.endAngle = 0;

4) В вашеманимация, увеличивайте endAngle с течением времени.В этом примере я нормализую 100, чтобы обозначить 100% радиуса (Math.PI*2) 

var index = 0;
function tick(event) {
  index += 1; // Fake Percent
  cmd.endAngle = index/100 * Math.PI*2;
  stage.update(event);
}

Вот быстрая скрипка: https://jsfiddle.net/lannymcnie/pgeut9cr/

Если вместо этого вы просто хотите анимироватькружить в течение фиксированного периода, вы можете изменить значение endAngle.Вот пример использования TweenJS: https://jsfiddle.net/lannymcnie/pgeut9cr/2/

createjs.Tween.get(cmd)
    .to({endAngle:Math.PI*2}, 2000, createjs.Ease.quadInOut);

Cheers,

...