.repeatDelay()

优质
小牛编辑
142浏览
2023-12-01

.repeatDelay( value:Number ) : *
获取或设置重复之间的秒数(或基于帧的时间轴的帧)的时间量。例如,如果 repeat 是2并且 repeatDelay 是1,则时间轴将首先播放,然后在重复之前等待1秒,然后再播放,然后等待1秒钟,然后再进行最后的重复。你可以通过vars 参数设置初始repeatDelay值 ,如:

var tl = new TimelineMax({repeat:2, repeatDelay:1});

这种方法既可以获取数值,也可以设置数值。省略参数将返回当前值(getter),而定义参数则设置值(setter)并返回实例本身以获得更简单的链接,如 myTimeline.repeat(2).yoyo(true).repeatDelay(0.5).play();

var repeatDelay = myTimeline.repeatDelay(); //获取repeatDelay的值
myTimeline.repeatDelay(2); //设置repeatDelay的值为2

.repeatDelay()适用于TimelineMax

.repeatDelay()的参数

参数类型必填说明
valueNumber(default = 0) - 省略参数返回当前值,而定义参数则设置值并返回实例本身以便于链式调用。

.repeatDelay() 示例


  duration: 0 单次动画持续的时间
  totalDuration: 0 全部重复动画加重复间隔的持续时间
  repeat: 0 of  重复次数
  repeatDelay: 0 每次重复动画的间隔
  time: 1 时间
  totalTime: 1 总时间
  progress: 1 单次动画进程
  totalProgress: 1 总进程
body {
    background: #f8f8f8;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0 10px;
    padding: 0;
}
.box {
    width:50px;
    height:50px;
    border-radius:6px;
    margin-top:4px;
    display:inline-block
  }
.green{
    background-color:#6fb936;
  }
#stats{
    line-height:2;
margin-top:1em;
}
var tm = new TimelineMax({repeat: 3, repeatDelay:2, onUpdate:updateStats, onRepeat:updateReps, });
tm.to('.box', 3, {x: 500});
var duration = document.getElementById("duration"),
    totalDuration = document.getElementById("totalDuration"),
    repeatCount = document.getElementById("repeatCount"),
    repeatDelay = document.getElementById("repeatDelay"),
    totalRepeatCount = document.getElementById("totalRepeatCount"),
    time = document.getElementById("time"),
    totalTime = document.getElementById("totalTime"),
    progress = document.getElementById("progress"),
    totalProgress = document.getElementById("totalProgress"),
    reps = 0;
function updateReps() {
  reps++;
  repeatCount.innerHTML = reps;
}
function updateStats() {
  time.innerHTML = tm.time().toFixed(2);
  totalTime.innerHTML = tm.totalTime().toFixed(2);
  progress.innerHTML = tm.progress().toFixed(2);
  totalProgress.innerHTML = tm.totalProgress().toFixed(2);
}
function reset() {
  reps = 0;
  duration.innerHTML = tm.duration().toFixed(2);
  totalDuration.innerHTML = tm.totalDuration().toFixed(2);
  repeatCount.innerHTML = reps;
  repeatDelay.innerHTML = tm.repeatDelay().toFixed(2);
  totalRepeatCount.innerHTML = tm.repeat();
}
reset();

.repeatDelay()返回值

.repeatDelay()的补充说明