v1.0 Notes

[ProLoser]

1. All the code in the non-minified version is double spaced. Normally wouldn't note it but it's extra data to load, feel free to ignore.
2. Curious: you know how to merge other forks into your branch, right? I have come to find many git users (initially, including myself) were unable to do this and found that they were manually re-implementing fixes I had already done.
3. I see you added an 'easing' option to the scale animations. My easing addition was a personal fix I needed, to be more versatile and conventional, you should actually drop the 'easing' option for both scale and rotate and instead use the animOpts object for both with .animate( properties, options ). This way you don't obfuscate control from the user. I'll add a commit with the suggested changes in a minute. Nice to see you notice other people's contributions :)

[ProLoser]

Here is a possible alternative setup

After toying with it for a bit (and considering other enhancements) there are some tradeoffs to consider, so I wouldn't just jump at merging this in.

• Linear is the default rotate easing. This was the original goal of my previous mod. I actually am using the plugin alongside mousewheel to create a really nifty scrolling ability. Here are my notes:
  • I'm not really sure any other easing is good EXCEPT linear. It creates a much smoother animation when rotating more than once
  • Swing (the default) or any other easing would be too clicky and visually jarring.
  • A started to consider physics enhancements (spinning the wheel and having gravity pull it back onto the last item) like on smartphones. The problem with adding this to easing is the animation applies to individual rotations, not the rotation as a whole. It would either have to apply to all rotations together (which seems impossible to keep all items moving around the edges) or the last one.
  • Since linear may be the only good easing, perhaps the ability to customize this should be removed and linear should be hardcoded?
• If you declare an whateverAnimOpts object you will have to redeclare the default speed/easing (can be fixed by adding $.extend() to the code however)
• Options are namespaced and more sensibly named/organized
• Users can customize $.animate(props, opts) how they see fit
• Although users can supply callbacks to animate, there are no passed params

Anywho food for thought really. I'm noticing that the rotationOffset is not working the same way as before I tried to make the main item in the bottom left corner but different #'s of items reposition this differently.

My other bug/note is that I'm trying to make items fade out and in upon scaling/hovering (if you refer to my demo) and am having a hard time coordinating this with the scale animation. Try rotating and then mouseout mid-animation

[nirvanatikku]

Re: double spaced code -- I decided that the extra bytes were ok in an effort to provide more comments in the code while not cluttering it up. It's a new style I'm trying out - I appreciate the feedback, though.

Re: merging forks - to be honest I haven't actually gone through with it before. That said, I didn't make an effort to merge the fix which was my bad! I think what you've updated is great, and frankly what I should have done in terms of properly implementing animation control to the end user.

Re: animation - I can't believe that I used "swing" as the default animation easing type, and completely agree it is too jarring. I was playing around with them and rushed the release out -- I agree linear is the best.

Onto the notes:

Linear - default for sure. I don't think it's worth hard coding it in -- some effects could be used (or so I think, FYI i'm not a designer though I do enjoy design).

I like the breakout of the animation properties. It makes sense.

W/ regards to the event after an animation occurs, params may not be passed in - but that is easy to rectify. Do you not see the value in that method? If after an animation you want to perform some operation? I've found it useful in a couple of demos.

With regards to the Radmenu in general - I'm going to take a step back and try and see how this is easily implemented, because while I think that the power of the plugin is great, I'm not so sure how comfortable people are implementing it. I find myself needing to play with angles, transforms and programatically doing things more so than I feel like I should. I'm not sure how thats received. I've tried my best to make it accessible and documented, though.

About the physics enhancements - I would love to do this. I have been wanting to turn this project into a wonderwheel - an interface thats becoming more popular particularly in discovery (i.e. music - discovr ipad app). If you have any tips I'de welcome them - and will try to get into this soon.

Thanks for taking the time to work through the enhancements. I absolutely value feedback and simply want this interface to be a fun and exciting interface w/out flash. I appreciate the feedback and look forward to the next update.

[ProLoser]

Re: easing - If you think about it, every animation happens for 1 individual rotation. Any easing that isn't constant will cause fluctuations while the wheel rotates (such as stopping and starting or speeding up and slowing down). I can't really think of any easing in which this would look good.

Re: callback params - I actually wasn't able to visualize a good use since when I had 20 items and scaled the entire wheel, it executed the callback 20 times, which seemed strange (even if I DO make changes to individual items). I went back and looked at all of your demos, and the only callback you use is the onSelect event, not onScale or onRotate. Also, the developer still has access to $(this). In fact I don't even get how scaling individual items works at all.

Re: in general - Uh.... huh? I'm not exactly sure I follow what you're referring to specifically? I have found it fairly easy to implement the plugin (aside from a small bug or two). If you're talking about extending the plugin, I actually didn't look at the physic calculations too much. Can you be more specific what problems you were having or was trying to build?

Re: enhancements - Would be interesting to be able to control the entire rotation animation queue together (aka having rotation slow down as it reaches the end, etc). Also, simply adding a mousewheel example (such as my implementation) I think would be nifty.

[ProLoser]

Check this code out (I haven't tested it personally yet):

(Assuming the beginning co-ordinates of the box to be 200px to the right and 250px from the top and radius of the circle to be 200px, i.e. centre is at 400px to the right and 250px from the top. If you want different figures, change the values accordingly, it is very easy.). The HTML and CSS is not given..

$(function() {
  $("div#hot").bind('click',function() {
    $("div#hot").unbind('click');
    var phi=0;
    var int= 2*(Math.PI)/1000;
    function cool() {
      phi= (phi>=2*(Math.PI))? 0:(phi+int);
      var $m= 400-200*Math.cos(phi);
      var $n= 250-200*Math.sin(phi);
      $("div#hot").animate({marginLeft: $m+'px', marginTop: $n+'px'},1,cool);
    }
  cool();
});