From bb5eab33fae480ccc56bcee55e54ca9d4af744bb Mon Sep 17 00:00:00 2001 From: Soledad Penades Date: Sun, 16 Feb 2014 21:40:16 +0000 Subject: [PATCH] Example 12: More custom easing functions! --- docs/user_guide.md | 2 +- examples/12_graphs_custom_functions.html | 28 ++++++++++++++++++++++-- 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/docs/user_guide.md b/docs/user_guide.md index 4ffa05c..1b6baf4 100644 --- a/docs/user_guide.md +++ b/docs/user_guide.md @@ -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 diff --git a/examples/12_graphs_custom_functions.html b/examples/12_graphs_custom_functions.html index c48e311..a943843 100644 --- a/examples/12_graphs_custom_functions.html +++ b/examples/12_graphs_custom_functions.html @@ -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); + } + } +