Comments (5)
How is yours more generic? This library has no dependencies.
from d3-ease.
Also, there are a few differences here:
The names have been changed. (I chose names that are were consistent with JavaScript, such as “sin” for Math.sin instead of “sine”, and “exp” for Math.exp instead of “expo”.) I also introduced a generic “poly” easing function rather than exposing “quart” and “quint”. This is a matter of preference, of course, but this API also needs to be backwards-compatible with D3 3.x.
The easing functions have been simplified to remove the b (bias), c (change), d (domain) parameters that Penner used: only the t (time) parameter is used. D3’s transitions compute the normalized time t in [0,1] so there is no reason for the extra parameters. That makes the implementation here slightly simpler and faster.
If you want those sort of parameters without a transition, you could use a linear scale:
function easedInterpolate(ease) {
return function(a, b) {
var interpolate = d3.interpolate(a, b);
return function(t) {
return interpolate(ease(t));
};
};
}
var scale = d3.scale.linear()
.domain([0, d])
.range([b, b + c])
.interpolate(easedInterpolate(d3.ease("cubic-in-out")));
The d3-scale module has not yet been implemented, but it will also be available for use independent of the rest of D3 as part of the 4.0 restructuring.
Or, with a little math:
function modifiedEase(ease, b, c, d) {
return function(t) {
return b + ease(t / d) * c;
};
}
The ease function takes a string rather than exposing symbols: you say ease("cubic-in-out")
rather than d3.ease.cubicInOut. This is mainly for brevity in the context of transition.ease. You can say:
transition.ease("cubic-in-out");
Rather than:
transition.ease(d3.ease.cubicInOut);
Lastly, this API allows you to tweak the behavior of easing functions through parameters that are captured with closures, rather than needing to pass the parameters in every time you call the easing function. This approach makes the generic application of easing functions easier—the consumer of the easing function doesn’t need to know whether additional parameters are needed. Even better, because the ease function takes a string, the caller doesn’t need to know which easing functions are parameterizable. They can just change ease("elastic")
to ease("elastic", 1.3)
to set the parameter. For example, you can say:
transition.ease("cubic-in");
transition.ease("elastic-in", 1.3);
Rather than:
transition.ease(d3.ease.cubicIn); // Note: no parens, since not configurable.
transition.ease(d3.ease.elasticIn(1.3));
I hope this explanation clarified some of the API decisions here and why I can’t just drop in a replacement implementation of Penner’s functions. I appreciate your desire to avoid yet another implementation. If it’s any consolation, my implementation predates yours by three years—it’s just taken me this long to formally decouple it from D3! 😁
from d3-ease.
If you want those sort of parameters without a transition, you could use a linear scale:
That's a really cool way to deal with the other params!
Even better, because the ease function takes a string, the caller doesn’t need to know which easing functions are parameterizable.
What do you think of using partial application here?
let myTransition = transition.ease("elastic-in")
let myTransition2 = myTransition(1.3)
let myTransition3 = myTransition2(1.4)
If it’s any consolation, my implementation predates yours by three years—it’s just taken me this long to formally decouple it from D3!
That is a bit of a consolation :)
from d3-ease.
What do you think of using partial application here?
The difficulty is disambiguating between an easing function and a function that returns an easing function (in Java speak, an “easing function factory” or perhaps an “easing factory”). In the d3-ease API, the ease function is the easing factory, and the returned function is the easing function. So:
var e = ease("elastic-in");
e(.2); // -0.0019531250000000004
Or, with parameters:
var e = ease("elastic-in", 1.3);
e(.2); // -0.0047631825331910455
I suppose you could have multiple levels of factories, but that gets messy…
var e = ease("elastic-in")(); // With no parameters?
var e = ease("elastic-in")(1.3);
var e = ease("cubic-in-out")(); // Necessary even if this easing mode isn’t parameterizable?
from d3-ease.
ah, that makes sense - it's not clear whether the arg should configure the easing function or invoke it. thanks for the explanation!
from d3-ease.
Related Issues (17)
- Accelerate, then coast?
- Rename ease(type[, parameters…]) to bind?
- Remove non-in aliases.
- Need an ease interface. HOT 14
- Easing/Transitioning in Chrome HOT 4
- update docs with npm version HOT 1
- README needs API reference.
- README references obsolete APIs. HOT 3
- Return values of 0 and 1 are not always as expected HOT 2
- Cubic Bézier easing? HOT 1
- LICENSE: Is ISC not BSD-3
- broken Map polyfill HOT 1
- Register with bower. HOT 1
- Don’t ignore NaN parameters? HOT 2
- Symbols, not strings? HOT 1
- bounce optional params HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from d3-ease.