New interpolate API proposal

[joelambert]

Hi,

I love the idea of Shifty and how it only deals with generating interpolated values but not doing anything with them, this is perfect for my use case!

Unfortunately I can't quite figure out how to make it work with my code with the current API.

What I'd love to be able to do is the following:

shifty.interpolate(from, to, easingFn, progress);

or

shifty.interpolate({
    from: from, 
    to: to, 
    easing: easing, 
    progress: progress
});

So an example of this would be:

var from = {
    width: 100px,
    color: #FFF
};  

var to = {
    width: 200px,
    color: #CCC
};

// Work out interpolated states for various positions in the animation
var p10   = shifty.interpolate(from, to, 'linear', 0.1); // 10%
var p30   = shifty.interpolate(from, to, 'linear', 0.3); // 30%
var p50   = shifty.interpolate(from, to, 'linear', 0.5); // 50%
var p70   = shifty.interpolate(from, to, 'linear', 0.7); // 70%
var p100  = shifty.interpolate(from, to, 'linear', 1.0); // 100%

The return value of the function should be a key/value object containing the CSS values at the given percentage complete.

Is this something that could be added?

[jeremyckahn]

Ahhh, this is interesting. It looks like you just want the tween values that are generated at certain percentages, but you don't want Shifty to actually do anything with them. This kind of turns Shifty into a fancy position calculator. This is what Tweenable has to do internally to manage the state over the course of real time anyways, it should be pretty easy to modify the core code to just generate the values based on supplied intervals.

The interpolate function doesn't need to be part of the core, that would be an extension much the same way queue is. I'll start hacking on this as soon as I get some time, thanks for sharing the idea.

[joelambert]

Yeah thats exactly it! Fancy position calculator pretty much sums it up.

I started trying to write my own tweening lib for my project but figured it would be easier (more robust) to use something that already existed. Given that you have plugins for colour and px/em etc Shifty seemed like a real win!

I wonder if the tweaking to the core code you're talking about would required you to re-write the easing functions to be more like Scripty2's? I have another part of the codebase I'm writing that wont be able to use Shifty but still needs access to Robert Penner's functions. In Scripty the functions have a single input (0-1) and the functions modify this value based on the function. e.g.

Scripty2:easeInQuad

easeInQuad: function(pos){
    return Math.pow(pos, 2);
}

If not, I'll just use the functions from Scripty2 but it would be great to be able to repurpose them from Shifty to save deployment space ;)

[jeremyckahn]

Thanks, I'm glad to see that someone is actually using a library I wrote. :)

You shouldn't need to maintain two mathematically-equivalent copies of the Penner equations. You can access all of Shifty's Penner methods publicly via Tweenable.prototype.formula._whateverMethod_. You can just alias the formula property so it's shorter:

var ease = Tweenable.prototype.formula;

What might make the most sense is using Tweenable's public Penner methods and then just wrapping them in a function, so you can have the syntax that Scripty2 uses. I'd have to think about how to best accomplish that from a mathematical standpoint, but in the end it should just be a simple function, because the formula methods all have the same function signature.

I'll make a new Shifty issue for the wrapped easing functions.

[jeremyckahn]

Code for this issue lives in the interpolate branch. It's basically done, I just want to do some more testing and documenting before I merge it to the master branch.

It follows the proposed API syntax very closely.

[jeremyckahn]

Implemented and documented in SHA: d3181e011d3afcc0b20d136cf8367bfade95c152 and merged to master. Deleting the "interpolate" branch and closing the issue.