mirror of
https://github.com/tweenjs/tween.js.git
synced 2025-12-08 20:16:12 +00:00
899a0e3a59
* master: (38 commits) update dist files rename some tests to better reflect what they test improve the conditional logic more so that values in nested arrays can also be animated add and example and test for animating values in an array start values aren't arrays, only to values are move _updateProperties function back out to a method fix yoyo with array values test temporary, move updateProperties function to make diff with master more clear move some code and update variable names to make mergin with master easier (less conflict) update dist improve state reset when stopping and starting a tween (fixes #512 where yoyo wouldn't restart properly) move value-swapping code for repeated tweens to a function (it will be re-used in an upcoming change) consolidate duplicate handling of relative values update dist files ignore VS Code's config folder small refactor to prevent update from doing anything when a tween has finished, yet still allow tweens to go back in time fix lint error rename _isFinished to _isComplete to match other wording add one more test for relative array values add editorconfig to settings editors can be consistently unique (because we use tabs so people can set their own tab width) ...
98 lines
2.3 KiB
HTML
98 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Tween.js / repeat</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<body>
|
|
<div id="info">
|
|
<h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
|
|
<h2>08 _ repeat</h2>
|
|
<p>Demonstrating the repeat() feature.</p>
|
|
</div>
|
|
<div style="position: absolute; top: 100px; left: 400px;">
|
|
<div id="target1" data-rotation="0" class="box">
|
|
repeat once
|
|
</div>
|
|
<div id="target2" data-rotation="0" class="box">
|
|
repeat five times
|
|
</div>
|
|
<div id="target3" data-rotation="0" class="box">
|
|
repeat forever
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../dist/tween.umd.js"></script>
|
|
<script src="js/RequestAnimationFrame.js"></script>
|
|
<script>
|
|
init()
|
|
animate()
|
|
|
|
function init() {
|
|
var target1 = document.getElementById('target1'),
|
|
tween1 = new TWEEN.Tween(target1.dataset)
|
|
.to({rotation: 360}, 2000)
|
|
.repeat(1)
|
|
.delay(1000)
|
|
.onUpdate(function (object) {
|
|
updateBox(target1, object)
|
|
})
|
|
.start(),
|
|
target2 = document.getElementById('target2'),
|
|
tween2 = new TWEEN.Tween(target2.dataset)
|
|
.to({rotation: 360}, 2000)
|
|
.repeat(5)
|
|
.delay(1000)
|
|
.onUpdate(function (object) {
|
|
updateBox(target2, object)
|
|
})
|
|
.start(),
|
|
target3 = document.getElementById('target3'),
|
|
tween3 = new TWEEN.Tween(target3.dataset)
|
|
.to({rotation: 360}, 2000)
|
|
.repeat(Infinity)
|
|
.delay(1000)
|
|
.onUpdate(function (object) {
|
|
updateBox(target3, object)
|
|
})
|
|
.start()
|
|
}
|
|
|
|
function animate(time) {
|
|
requestAnimationFrame(animate)
|
|
|
|
TWEEN.update(time)
|
|
}
|
|
|
|
function updateBox(box, params) {
|
|
var s = box.style,
|
|
transform = 'rotate(' + Math.floor(params.rotation) + 'deg)'
|
|
s.webkitTransform = transform
|
|
s.mozTransform = transform
|
|
s.transform = transform
|
|
}
|
|
</script>
|
|
|
|
<style type="text/css">
|
|
.box {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 10px;
|
|
padding: 10px;
|
|
display: inline-block;
|
|
float: left;
|
|
}
|
|
#target1 {
|
|
background: #fcc;
|
|
}
|
|
#target2 {
|
|
background: #cfc;
|
|
}
|
|
#target3 {
|
|
background: #ccf;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|