Jump to content
Search Community

bezier in javascript

Alan test
Moderator Tag

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,

 

I wonder if we will have bezier support in javascript version soon? I had a great success with greensock and easelJs together, I can almost 100% duplicate what I have done with actionscript 3 before, apart from bezier curve animation...

Link to comment
Share on other sites

Absolutely, beziers will be supported in the JS flavor. The challenge for me right now is that I have some ideas to IMPROVE upon the BezierPlugin (and it would affect several other things like motion paths and CustomEase) so I don't want to just port the older ActionScript version(s) over. But it will take some dedicated time to accomplish what I envision. The "quick & dirty" way would be to just port the existing code, but I prefer to keep refining and improving things as we go. Unfortunately that's gonna take some patience from dedicated users like yourself (my apologies).

 

There are so many exciting things I'm anxious to get to in JS and this is definitely on the list.

Link to comment
Share on other sites

Thanks very much for your reply! Is it possible to have a rough schedule about when we bezierPlugin will be available for js?

 

I understand it will take time, however, if it's going to be long, is it possible to have a way to use the "quick & dirty" old AS port? I really wish we could have bezier in JS, it'd be awesome!

Link to comment
Share on other sites

Hey Jack,

 

Awesome job on the JS port - I'm still blown away by the blistering performance of the engine :D

 

I too would love to see this feature/plugin introduced ASAP, since I'm putting together a pretty complex timeline animation that would benefit from some bezier love.

 

If it offers any motivation, the project in question is a showcase of my Axonometric Projection Engine working in harmony with your GS12 JS Tweening Engine (both of which are being linked too from the demo).

 

I'm really excited about this one, and can't wait to let it out into the wild.

 

Kind Regards,

 

Matt

Link to comment
Share on other sites

I have good news and bad news. First the bad news: despite investing many hours in reworking the Bezier system, it is very unlikely that it will be ready by next week, particularly because I'll be traveling.

 

The good news is that I have made headway and figured out an algorithm that will result in better, smoother Beziers through the points that you provide. Plus there will be a "curviness" parameter that allows you to control the strength of the curves through points. I'm basically rebuilding the Bezier support from the ground up in the engine, using cubic Beziers rather than quadratic Beziers because they provide a lot more control and flexibility. Like I said, I really didn't want to burn time just porting the old system over to JS because I had all these ideas for improvements that will ultimately serve you better and if I do the "quick and dirty" port, it'll be frustrating for everyone because the syntax would be different than the one that ultimately replaces it, creating confusion and potentially breaking any code you write for the "old/quick/dirty" port when the new one is released in a matter of weeks.

 

In summary, I think you'll really like the new Bezier stuff but you'll need to wait a bit for it.

 

In the mean time, I would like to know what specifically you're wanting to do with Beziers in your project(s), just so that I can make sure it is well supported. For example, are you trying to tween canvas elements along a path? Are you wanting to tween DOM elements' css properties (maybe transforms like x and y or left and top)? Are you wanting to throw raw Bezier data at the engine (with control points) or do you need the bezierThrough functionality where you throw points at the engine and it plots the Beziers for you? Can you write a few sample tweens that show what you're trying to do? And of course if you have feature requests related to Plugins, let me know. The more info you can provide, the better.

 

Thanks for your patience.

Link to comment
Share on other sites

Fantastic news! Very excited to see and play with this plugin as soon as it is ready!

 

To answer your question, flexibility and options are what I have always loved about TweenMax. I have used both bezier and bezierThrough more times than I can count and found them both to be incredibly useful in different situations. The 'curviness' functionality sounds very interesting and would certainly augment the possibilities of what can be done using your platform.

 

My current requirements are simply to modify native Object properties, since I am handling updates to the DOM from within my program. However, it would be great to eventually see CSS integration for manipulating DOM elements directly at some point in the future.

 

I never had any issues with the syntax of an Array of Objects for both bezier and bezierThrough, but if you have any better or alternative ideas for how beziers should be defined, I would love to hear them and would be more than happy to offer my opinion.

 

Again, thank you for all your dedication and hard work.

Link to comment
Share on other sites

  • 2 weeks later...

Can't be happier to know JS version will have bezier!

 

We use quite a lot of bezier curves to create animations for games. Basically, simple tweens with a few bezier points to move things in curve rather than straightly from x to y.

 

Its too bad that we can't do it in JS as we are converting many Flash games into HTML5. Our current work around is to have a few points tween in a timeline to simulate a beizer curve, of course, it's not as good and dirty, but at least, it gets the job done.

Link to comment
Share on other sites

Yep, I've been working hard on the Bezier stuff for weeks and it is coming along nicely. I think you'll really like it. The plugin will accommodate not only quadratic Beziers but also Cubic ones and of course it'll support plotting Beziers directly through the values you provide (so that you don't have to mess with figuring out control points if you don't want to). And when you use the "through" mode, you'll be able to control the curviness of the Bezier. I'm also working on enabling a mode that will figure out the lengths of the segments and ensure that easing along them is handled proportionally (something the old system didn't do). Obviously this is no trivial task to bake all this stuff in and optimize it, but I really hope to have something for you to look at within the next week or two. Stand by...

  • Like 1
Link to comment
Share on other sites

I have good news: I just posted the first crack at the BezierPlugin which is also integrated with CSSPlugin, so you should be able to not only do regular Bezier tweening on any generic objects, but also css-related properties as well. Download the latest JavaScript zip and you'll see the plugin (it's also integrated into the TweenMax file, so you don't need to load it separately if you're using TweenMax).

 

Read the docs at: http://api.greensock...zierPlugin.html

 

If you've used the BezierPlugin in the Flash version, you should notice that this new one is far more capable in many ways:

  1. The algorithm it uses for drawing Beziers through points is much better (more natural) and more flexible (you even can define a "curviness" value)
  2. It has a timeResolution parameter that virtually eliminates the problem that plagues most Bezier animation tools - uneven movement on the Bezier based on the control points and lengths. For example, in the old system if you constructed a Bezier that had multiple segments that were vastly different in length, the object would move much faster on one segment than the other. And on an individual curve, the pace could change too. Not anymore.
  3. You can define straight-up Cubic Bezier data or Quadratic Bezier data. You can even use the BezierPlugin's bezierThrough() method to parse your point data and have it spit back to you the Bezier data that it drew through those points. You can get it back in either cubic or quadratic format so that you could, for example, use the canvas drawing API to draw the path. Very flexible.
  4. The autoRotate (previously called "orientToBezier") functionality has been improved so that it is even more precise and more quickly calculated. Yes, you can animate regular dom elements along a Bezier path and have its rotation follow the path's. Even seems to work in older versions of IE!

I'd love to have you guys hammer away at this and let me know what you think. If you have suggestions for improvements to the API, I'm all ears. I'd also love it if you could post some samples of what you're doing with it.

 

Thanks for your patience. This plugin took an insane number of hours to construct, but I'm pretty happy with how it is turning out.

 

Happy tweening!

  • Like 3
Link to comment
Share on other sites

Hi,

 

I've just download the v12 JS from the website, I think it's the latest one as it includes the BezierPlugin.

 

Code:

 

The following line works fine:

TweenMax.to(obj,1,{ bezier: {values:[{x:907, y:555}, {x:244, y:524}]}});

 

However,this line does not:

TweenMax.to(obj,1,{ bezier: {values:[{x:907, y:555}, {x:244, y:524}], autoRotate:true}});

 

Firebugs gives the following error:

this._beziers[b[e][0]] is undefined At TweenMax.min.js (line 16)

Link to comment
Share on other sites

I love to post some samples, but they're not ready yet. We are creating tons of simple games and will be packaged by phonegap and ready for Apple's appstore later. Sure will show you our work when it's ready, probably need another 2 months time.

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

I'm having some trouble getting this working. I have an object (div) that i'm trying to moving in a circle. The code I'm using is below. It doesn't throw out an error nor does it move at all. What am I missing here?

 

TweenMax.to(c1,10,{bezier:{values:[{x:102,y:430},{x:530,y:293}]}});

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...