Как сделать анимацию 2 с половиной оборотов?

Question

[Sector567]

Сейчас по клику анимация оборота происходит единожды, чтобы произошло 2 оборота, нужно дважды произвести клик, но как сделать, чтобы кликнув один раз, анимация сработала 2,5 раза? (То есть сначала один оборот, потом второй оборот и потом прогресс остановился на половине оборота).
Пробовал цикл, но он не ждет анимации - получается что сначала как бы идет нормальный оборот, а после он идет уже в обратную сторону.
Вот код https://codepen.io/catcliff/pen/RwNyzvq?editors=0010

Answer 1

[twobomb]

Установить при инициализации прогресс на 0.

setProgress(0, '.progressbar__thumb');
click__me.addEventListener('click', function() {  
   setProgress(number += 200, '.progressbar__thumb');
});

Ну и конструкция

for(let i = 0; i < 2; i++){
   setProgress(number += 100, '.progressbar__thumb');
  }

мне не понятна, почему сразу нельзя поставить +200?

Comments

[Антон Усачев]

Да. И тогда уж сразу 250, раз нужны 2,5 оборота.

setProgress(0, '.progressbar__thumb');
click__me.addEventListener('click', function() {
   setProgress(number = 250, '.progressbar__thumb');
});

[twobomb]

Антон Усачев, Да хоть все 380, только если напишите number = 250
При втором клике он уже не провернет на 250, а если это и не нужно тогда зачем вообще number, можно просто setProgress( 250, '.progressbar__thumb');. Если конечно number, где то не используется

[Sector567]

twobomb, здесь возникает проблема в том, что при первом обороте все нормально, то есть желтая полоса прогрессбара заполняет черный круг, но вот второй оборот уже косячный, потому что здесь наоборот как бы черный фон запоняет желтый круг. А по идее нужно чтобы на втором круге также желтый фон заполнял черный =(

https://codepen.io/catcliff/pen/RwNyzvq?editors=0010

[twobomb]

Sector567, ну придумайте что нибудь типа такого

setProgress(0, '.progressbar__thumb');
var _isD = false;
click__me.addEventListener('click', function() {  
   setProgress(_isD ? number += 200: number += 250, '.progressbar__thumb');
  _isD= true;
});

Вы программист или как? Зачем вы этим занимаетесь, учите основы

[Sector567]

twobomb, в том и дело, что ничего в голову не лезет, уже несколько часов сижу и пытаюсь подобрать разные варианты, но все безрезультатно. Предложенный вариант, кстати, тоже не работает.

Как я понимаю проблема в settimeout, но если его убрать то анимация не успеет отработать....

[twobomb]

Sector567, я не понимаю что вам нужно

[Sector567]

twobomb, как происходит оборот? - желтое "кольцо" по часовой стрелке перекрывает черное, но сейчас
первый оборот происходит корректно, а второй оборот происходит так: черное кольцо перекрывает желтое - это не правильно ведь второй оборот должен быть визуально таким же как и первый- то часовой стрелке желтое "кольцо" перекрывает черное. Не понять?)

[twobomb]

Sector567, Я так понимаю сейчас поворот происходит на 250%, и в итоге он наполовину перекрыт черный, наполовину желтым. А второй оборот полностью всё перекрывает желтым.
Визуально таким же он не может быть как и первый, потому что изначально всё кольцо серое до начала анимации, а вторая анимация происходит когда кольцо наполовину перекрыто желтым.
Попробуйте всетаки поиграться с этими параметрами, может здесь нужно 200 на 100 изменить или я не пойму как вам нужно. Нарисуйте позиции хотябы в которых должен останавливаться круг на первом, втором, третьем шаге...

var _isD = false;
click__me.addEventListener('click', function() {  
   setProgress(_isD ? number += 200: number += 250, '.progressbar__thumb');
  _isD= true;
});

[Sector567]

twobomb, вот, попробовал проиллюстрировать какой должна быть анимация что у меня не получается


ссылка на картинку в полном размере
https://hsto.org/webt/5e/1c/6c/5e1c6c03d9042697635...

[twobomb]

Sector567,
https://jsfiddle.net/twobomb/srgp67un/

[Sector567]

twobomb, сейчас анимация выглядит так.
Изначально круг черный (правильно)
Потом круг моментально становится желтым цветом (без анимации) и после происходит анимация заполнения черного цвета поверх желтого, а это не совсем верно - ведь анимация должна быть желтого цвета поверх черного.
P.S. а вот полуоборот, который идет за первым полным оборотом у вас выполнен правильно

[Sector567]

twobomb, вот сделал например, как должен анимироваться полный оборот.
https://codepen.io/catcliff/pen/RwNyzvq?editors=0010

Сложность у меня в том, что дальше анимаии этого полного оборота я продвинуться не могу.
То есть я не могу сделать например чтобы такой полный оборот произошел два раза подряд или полтора раза...

[Sector567]

twobomb, вот, нашел другой пример прогрессбара в сети и изменил его немного.
То есть нужно, чтобы анимация была такая как на данном примере.
Но проблема в том, что сейчас все завязано на setTimeout, может быть можно реализовать такую же анимацию, но чтобы без setTimeout?
https://codepen.io/catcliff/pen/MWYBygO?editors=1010

Answer 2

[Karpion]

Как можно сделать заливку круга жёлтым - более одного раза?

Comments

[Sector567]

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

[Karpion]

Я ни фига не понял. Что значит "сбросить плавность и после обнулить значения"?

Я могу предложить примерно так:
Изначально круг имеет какой-то цвет Икс. На первом круге его постепенно заливают цветом Игрек. По окончании - начинают заливать цветом Зет. И так по скольким-то цветам.

Или так:
Круг заливается цветами с постепенным изменением. Трёхмерный цвет в координатах RGB меняется так, чтобы не было самопересечений. Периодичность изменения цвета н совпадает с периодичностью обхода круга.

[Sector567]

Karpion, вот, нашел другой пример прогрессбара в сети и изменил его немного.
То есть нужно, чтобы анимация была такая как на данном примере.
Но проблема в том, что сейчас все завязано на setTimeout, может быть можно реализовать такую же анимацию, но чтобы без setTimeout?
https://codepen.io/catcliff/pen/MWYBygO?editors=1010

[Karpion]

Чем плох setTimeout? Работает - не трогай!

Работу анимациии всё равно не понял. Можно её словами?