gsap中的动画进度条答案

【问题标题】：animating progress bar in gsapgsap中的动画进度条
【发布时间】：2020-08-05 10:50:23
【问题描述】：

我是 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;


}

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)

有一个圆圈，一开始，我想将宽度从原来的 26px 增加到 46px，这样球在动画序列的中间应该有 46px，最后应该回到 26px 宽度。加上它应该有 repeat: -1 到整个序列和 yoyo: true

【问题讨论】：

标签： javascript animation gsap

【解决方案1】：

我知道诀窍是将属性设置为时间线本身

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)

【讨论】：

您不需要在数值周围加上 px 或引号。您还可以使用更简洁的轻松形式，在本例中为 ease: "none"。我还建议您查看 GSAP 的关键帧和默认值，以免您输入太多内容。了解更多关于他们的信息here。另外，您有点滥用 position 参数。详细了解here。