Jump to content
Search Community

Bezier data through onUpdateParams

BKENNEDY test
Moderator Tag

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi All, I'm tweening an object using bezier values. I'd like to send the current quadratic data out via onUpdateParams but can't seem to figure out an easy way to do it. I guess I'm looking for something like this:

var points = [{x:100, y:50}, {x:150, y:100}, {x:200, y:50}, {x:350, y:350}];

tl.to(
point, 
3, 
{bezier:{values:points, type:"thru", curviness:2}, 
ease:Expo.easeOut, 
onUpdate: myFunction, 
onUpdateParams:["current x:a,b,c,d and current y:a,b,c,d"]});

Obviously not correct, but hopefully explains what I'm hoping to achieve. 

 

I've seen a bunch of examples that use a tween in combination with a loop to traverse a bezierThrough array, but that just seems way more complex.

 

Any thoughts are appreciated.

Thanks!

-BK

Link to comment
Share on other sites

I was hesitant to create a pen, because I'm actually building in Animate CC and didn't want the to influence a solution that may not be possible in that environment. However, I understand the usefulness in troubleshooting... so I created something similar. It's essentially line drawing animation. Ideally, I would use DrawSVG, but seems like that isn't possible in the Animate IDE, so I'm playing with a workaround.

 

See the Pen mAGNaa by bkennedy (@bkennedy) on CodePen

 

My understanding is that the "thru" type calculates the bezier data to be used in the tween. I was hoping I could send that info through the onUpdate params to use in the draw function. in other words, get the current position (based on tween progress) and use it it to draw the next line segment with quadraticLineTo().

 

I'm probably way off base... but what do I know! I'm just jumping back into this after a few years of mourning the loss of flash!

Link to comment
Share on other sites

Ah, I see what you're trying to do. Hm. That's totally possible but non-trivial. You have to calculate the lengths of all the segments, figure out which one the current progress lands on, then subdivide that segment at that particular progress point so that you can then do all your drawing of the segments accurately. 

 

That's not something BezierPlugin provides for you. Even if it gave you the current segment a, b, c, and d values, it doesn't really solve your problem. 

 

Blake might have something up his sleeve (he's always great at this stuff), but if not and you still need help, feel free to contact us about hiring us on a consulting basis. I've been neck-deep in this type of stuff lately for CustomEase: 

 

I really wish I had a super-easy solution for you. 

 

Oh, and by the way, I noticed you used MorphSVGPlugin.pathDataToBezier() and then fed that in as type:"thru" which won't really work properly (it should be type:"cubic"). Side note: if you want to get all the a/b/c/d values that result from the "thru", you can get those directly via BezierPlugin.bezierThrough(). http://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/bezierThrough/

Link to comment
Share on other sites

  • Solution

Actually, this is trivial.  :D  

 

The problem with trying to draw a path like that is that the update intervals may not be uniform. If there is a framerate drop, it can pass over some key points, causing parts of your path to be cut off or flattened. 

 

Here's a handy little tip. The easiest way to smooth out a path is to apply an ease to the current point. I do this all the time for mouse/touch animations.

http://codepen.io/osublake/pen/JRmGQp/?editors=0010

 

But there's a better solution. Just animate the stroke like an SVG. I made a post about this not too long ago...

http://greensock.com/forums/topic/14879-greensock-canvas-animate/?p=63900

 

To accurately animate the stroke like the DrawSVG plugin, you need to know the length of the path. Unfortunately, canvas does not provide a native way to get this value. But don't worry, I got you covered. I just posted a little script that will calculate this for you. 

 

Just pass in the array of values you get back from the MorphSVGPlugin and it will calculate the length of the path for you. There is also an optional steps parameter you can pass in, although you probably won't need to worry about that unless you have a really long path, or you need a higher degree of accuracy. 

https://gist.github.com/OSUblake/22e6623c005a18412973fe43b65da485

 

Your demo has finally given me reason to test out the new canvas Path2D API. One really cool thing you can do with it is use SVG path data.

var path = new Path2D("M10 10 h 80 v 80 h -80 Z");
context.stroke(path);

Check it out!

 

See the Pen GjYpPr?editors=0010 by osublake (@osublake) on CodePen

 

 

Path2D isn't available in every browser at the moment so I made another version doing it the old-fashioned way.

See the Pen jrZWEJ?editors=0010 by osublake (@osublake) on CodePen

 

.

  • Like 2
Link to comment
Share on other sites

Thanks to both of you for the input.

 

Blake! First glance, this looks awesome! I really appreciate your time and thorough explanation. I totally understand your approach. Now I just need to sit and play with it to fully understand the mechanics. Definitely sparks some ideas for me. I'll comb through those other articles too. Thank you again!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...