archive-gh-me/tween.js
1
0
Fork 0
mirror of https://github.com/tweenjs/tween.js.git synced 2025-12-08 20:16:12 +00:00
Code Issues Projects Releases Wiki Activity

Example 12: More custom easing functions!

Browse Source
This commit is contained in:
Soledad Penades 2014-02-16 21:40:16 +00:00
parent 710fe18470
commit bb5eab33fa
2 changed files with 27 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/user_guide.md
View File

@ -252,7 +252,7 @@ And you could use it in a tween by simply calling its easing method, as we've se
tween.easing(tenStepEasing);
````
TODO: build example for this
Check the [graphs for custom easing functions](../examples/12_graphs_custom_functions.html) example to see this in action (and also some metaprogramming for generating step functions).
## Chaining

28
examples/12_graphs_custom_functions.html
View File

@ -37,15 +37,25 @@
var target = document.getElementById('target');
target.appendChild( createGraph( 'Ten Steps Easing', tenStepsEasing ) );
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 easing', createStepFunction(numSteps)) );
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() {
@ -70,6 +80,20 @@
}
}
function randomEasing(k) {
return Math.random() * k;
}
// Again getting meta: why not use existing functions as the
// base for a new easing?
function createNoisyEasing(randomProportion, easingFunction) {
var normalProportion = 1.0 - randomProportion;
return function(k) {
return randomProportion * Math.random() + normalProportion * easingFunction(k);
}
}
</script>
</body>
</html>