Jump to content
Search Community

Half Circle rotation animation

Drumknott 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. This is my firs post.

 

I'm trying to learn animation in html5 and javascript.
So far, I worked a little bit with Flash.
But I do not understand a few things, I would ask for example, based on

 

See the Pen Guwtq by anon (@anon) on CodePen



I want to animate "item2".
So animation rotation, the path (inside) "elementu1".

I hope I wrote it correctly.

Thanks.

Link to comment
Share on other sites

You could try something like this:

http://codepen.io/GreenSock/pen/ijKvA

 

Note the

 

  //NEXT LINE VERY IMPORTANT
  context.clearRect(0, 0, canvas.width, canvas.height/2);

 

If you remove it, the anti-aliasing is really jagged as multiple strokes are getting piled on top of each other. 

 

The bad news is clearing the context gets rid of the light grey top semi-circle.

 

---

 

We can't tween arcs directly, but we can tween any numeric property of any javascript object and then apply those values however we want.

 

var props = {endAngle:1};


var tween = TweenLite.to(props, 3, {endAngle:2, onUpdate:updateAngle});

The onUpdate callback is pretty much your original arc-drawing function

  • Like 1
Link to comment
Share on other sites

oh, it appears you just want to rotate the circles, or more specifically the strokes.

 

Unfortunately, rotating individual canvas elements is non-trivial:

http://creativejs.com/2012/01/day-10-drawing-rotated-images-into-canvas/

 

I'd recommend looking into a canvas library like KineticJS or EaselJS and experiment a bit with using those libraries to create the artwork you want to rotate. Once you've created Kinetic or Easel objects its quite easy to animate their rotation with TweenLite.

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