.progress()
优质
小牛编辑
128浏览
2023-12-01
.progress( value:Number, suppressEvents:Boolean ) : *
获取或者设置单次动画的进程(从0到1)
var progress = myTween.progress(); //gets current progress
myTween.progress( 0.25 ); //sets progress to one quarter finished
.progress()适用于TweenMaxTweenLite
.progress()的参数
.progress() 示例
duration: 0 单次动画持续的时间
totalDuration: 0 全部重复动画加重复间隔的持续时间
repeat: 0 of 重复次数
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 myTween=new TweenMax('.box', 3, {
x: 500,
repeat: 3,
repeatDelay:2,
onUpdate:updateStats,
onRepeat:updateReps,
});
var duration = document.getElementById("duration"),
totalDuration = document.getElementById("totalDuration"),
repeatCount = document.getElementById("repeatCount"),
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 = myTween.time().toFixed(2);
totalTime.innerHTML = myTween.totalTime().toFixed(2);
progress.innerHTML = myTween.progress().toFixed(2);
totalProgress.innerHTML = myTween.totalProgress().toFixed(2);
}
function reset() {
reps = 0;
duration.innerHTML = myTween.duration().toFixed(2);
totalDuration.innerHTML = myTween.totalDuration().toFixed(2);
repeatCount.innerHTML = reps;
totalRepeatCount.innerHTML = myTween.repeat();
}
reset();