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) ...
99 lines
2.8 KiB
HTML
99 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Tween.js / graphs for custom easing functions</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<style>
|
|
body {
|
|
margin: 0px;
|
|
}
|
|
|
|
#target {
|
|
font-size: 13px;
|
|
padding: 0px 32px;
|
|
}
|
|
</style>
|
|
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<body>
|
|
<div id="info" style="position: relative;">
|
|
<h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
|
|
<h2>12 _ graphs for custom easing functions</h2>
|
|
<p>
|
|
A version of the <a href="03_graphs.html">graphs</a> example, but using custom easing functions (not included in
|
|
<a href="https://github.com/tween.js/tween.js">tween.js</a> by default).
|
|
</p>
|
|
</div>
|
|
|
|
<div id="target"></div>
|
|
|
|
<script src="../dist/tween.umd.js"></script>
|
|
<script src="js/RequestAnimationFrame.js"></script>
|
|
<script src="js/createGraph.js"></script>
|
|
<script>
|
|
window.addEventListener('load', function () {
|
|
init()
|
|
animate()
|
|
})
|
|
|
|
function init() {
|
|
var target = document.getElementById('target')
|
|
|
|
target.appendChild(createGraph('Ten Steps', tenStepsEasing))
|
|
|
|
target.appendChild(document.createElement('br'))
|
|
|
|
for (var i = 0; i < 4; i++) {
|
|
var numSteps = (i + 1) * 4
|
|
target.appendChild(createGraph(numSteps + ' steps', createStepFunction(numSteps)))
|
|
}
|
|
|
|
target.appendChild(document.createElement('br'))
|
|
|
|
target.appendChild(createGraph('Random', randomEasing))
|
|
|
|
target.appendChild(document.createElement('br'))
|
|
|
|
target.appendChild(
|
|
createGraph('Noisy Exponential.InOut', createNoisyEasing(0.1, TWEEN.Easing.Exponential.InOut)),
|
|
)
|
|
target.appendChild(createGraph('Noisy Elastic.InOut', createNoisyEasing(0.1, TWEEN.Easing.Elastic.InOut)))
|
|
target.appendChild(createGraph('Noisy Circular.InOut', createNoisyEasing(0.1, TWEEN.Easing.Circular.InOut)))
|
|
}
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate)
|
|
|
|
TWEEN.update()
|
|
}
|
|
|
|
function tenStepsEasing(k) {
|
|
return Math.floor(k * 10) / 10
|
|
}
|
|
|
|
// This is where we get very meta and write a function for
|
|
// generating functions! The returned function is similar to
|
|
// the tenStepsEasing function above, but the number of steps
|
|
// is passed as a parameter
|
|
function createStepFunction(numSteps) {
|
|
return function (k) {
|
|
return Math.floor(k * numSteps) / numSteps
|
|
}
|
|
}
|
|
|
|
function randomEasing(k) {
|
|
return Math.random()
|
|
}
|
|
|
|
// Getting meta again: why not use existing functions as the
|
|
// base for new easing functions?
|
|
function createNoisyEasing(randomProportion, easingFunction) {
|
|
var normalProportion = 1.0 - randomProportion
|
|
return function (k) {
|
|
return randomProportion * Math.random() + normalProportion * easingFunction(k)
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|