.repeat()
优质
小牛编辑
136浏览
2023-12-01
.repeat( value:Number ) : *
获取或设置时间轴在第一次完成后应该重复的次数。例如,如果 repeat 是1,则时间轴将总共播放两次(初始播放加1次重复)。要无限重复,请使用-1。 repeat 应该始终是一个整数。
要使重复在前进和后退之间yoyo 切换,请设置 为yoyo: true
。要在重复之间添加时间间隔,请使用repeatDelay
。你可以通过时间轴的vars 参数设置初始repeat 值,如:
var tl = new TimelineMax({repeat:2});
这种方法既可以作为获取数值,也可以作为设置数值。省略参数将返回当前值(getter),而定义参数则设置值(setter)并返回实例本身以获得更简单的链接,如 myTimeline.repeat(2).yoyo(true).play()
;
var repeat = myTimeline.repeat(); //获取当前repeat
myTimeline.repeat(2); //将repeat设为2
.repeat()适用于TimelineMax
.repeat()的参数
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
value | Number | 否 | (default = 0) - 省略参数返回当前值,而定义参数则设置值并返回实例本身以便于链式调用。 |
.repeat() 示例
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();