lmgonzalves / segment

A JavaScript library to draw and animate SVG path strokes
http://lmgonzalves.github.io/segment
MIT License
1.74k stars 98 forks source link

d3-ease has new API? #10

Closed nightire closed 8 years ago

nightire commented 8 years ago

I found the example use d3-ease as below:

ease.ease('elastic-out', 1, 0.3)

but according its documentation on github, the API seems different than your demo, something like:

d3.easeElasticOut(t, 1.00, 0.2)

since I'm not a d3 user, I really don't know which way I should follow. I use npm to install the latest version (I believe it is v1.0.0) and follow your demo, but it doesn't work. Later I change the syntax like:

import ease from 'd3-ease'

// somewhere

ease.easeElasticOut(1, 0.3)

it works...but it doesn't have any elastic-ish effect, very confusing.

Would you mind to explain a little more about how to use d3-ease with segment-js?

lmgonzalves commented 8 years ago

Yes, d3-ease has changed its API, but it has been just that. In other words, you can still use it along with Segment, just with the new API. I am sorry not to have updated the version of d3-ease in the demo, I've done now to prevent someone else get confused.

Now, the correct way to get the desired easing function (for example 'elastic-out') is as follows:

d3.easeElasticOut

If you want to customize the default 'elastic-out' easing, you can create it first, then use it as customElastic instead d3.easeElasticOut:

// Before the animation starts, create your custom easing function
var customElastic = d3.easeElasticOut.period(0.4);

Find out more information on the d3-ease project.

I hope this has been clear the issue, just let me know if you have any further questions. And thank you very much for using Segment!