анимация индикатора выполнения в gsap - PullRequest
Новая
       103

анимация индикатора выполнения в gsap

0 голосов
/ 22 апреля 2020

Я новичок в платформе Greenock и пытаюсь анимировать индикатор выполнения. вот ссылка https://codepen.io/sriramhegdeofficial/pen/YzyGEeJ

Вот код: HTML

<div class="slider">
  <div class="ball"></div>
</div>

css

body {
  box-sizing: border-box;
  background: #F7F7F7;
}

.slider {
  width: 300px;
  height: 30px;
  margin: 100px;
  background: rgba(0,0,0,0.1);
  border-radius: 50px;
  border: 1px solid black;
  position: relative;
  padding: 0px 2px;
}
.ball {
  width: 26px;
  height: 26px;
 border-radius: 50px; 
  background: black;
  position: absolute;
  transform-origin: 50% 50%;
  top: 2px;


}

js

gsap.timeline()
  .to(".ball", {x: 298-26,duration: 1,ease:Linear.easeNone, repeat: -1})
   .to(".ball", { duration: 0.5, width: "46px"}, 0)
   // .to(".ball", { duration: 0.5, width: "26px", repeat: -1}, 0.5)

В начале есть круг, я хочу увеличить ширину до 46px с 26px оригинала, поэтому шар должен иметь 46px в середине последовательности анимации и вернуться к ширине 26px в конец. плюс должно быть повторение: -1 для всей последовательности и yoyo: true

1 Ответ

0 голосов
/ 22 апреля 2020

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

gsap.timeline({duration: 1, repeat: -1, yoyo: true})
  .to(".ball", {x: 298-26,duration: 1,ease:Linear.easeNone},0)
   .to(".ball", { duration: 0.5, width: "86px"}, 0)
    .to(".ball", { duration: 0.5, width: "26px"}, 0.5)
...