cerulean Posted May 14, 2013 Share Posted May 14, 2013 I've been trying to work up a 'shaking' effect on elements, using RoughEase. Rotations, x, y all get stuck at the end and don't return to their original spots, as yoyo:true, repeat:1 would seem to indicate they would. (centPoint is stageWidth/2, stageHeight/2) —I'm sure I'm missing something but I was curious whether doing yoyo and repeat with transformAroundPoint and RoughEase was a problem in some way… private function makeNewShakeUpTimeline($objects:Array):TimelineMax { var tl:TimelineMax = new TimelineMax; var centPoint:Point = new Point(TTConstants.FULL_WIDTH/2,TTConstants.FULL_HEIGHT/2); var dirx:String = Math.random() > .5 ? "+=20" : "-=20"; var diry:String = Math.random() > .5 ? "+=20" : "-=20"; tl.add(TweenMax.to($objects,.5,{transformAroundPoint:{point:centPoint},rotation:dirx,yoyo:true,repeat:1,x:dirx,y:diry, ease:RoughEase.ease.config({clamp:false,points:50,strength:3})}),0); dirx= Math.random() > .5 ? "+=10" : "-=10"; diry = Math.random() > .5 ? "+=10" : "-=10"; tl.add(TweenMax.to($objects,.25,{transformAroundPoint:{point:centPoint},rotation:dirx,yoyo:true,repeat:3,x:dirx,y:diry, ease:RoughEase.ease.config({clamp:false,points:40,strength:2})}),.5); dirx= Math.random() > .5 ? "+=5" : "-=5"; diry = Math.random() > .5 ? "+=5" : "-=5"; tl.add(TweenMax.to($objects,.25,{transformAroundPoint:{point:centPoint},rotation:dirx,yoyo:true,repeat:3,x:dirx,y:diry, ease:RoughEase.ease.config({clamp:true,taper:"out",points:30,strength:1})}),.75); return tl; } Link to comment Share on other sites More sharing options...
Carl Posted May 15, 2013 Share Posted May 15, 2013 Hi, Thanks for providing the code. The problem is that you've got the transform-related values like rotation, x, and y OUTSIDE the transformAroundPoint object. That means that there's overwriting happening because whenever a transformAroundPoint tween starts, it says "I'm in control of all transformations – kill any other rotation, x, y, scaleX, or scaleY stuff on this target". In order to transform around a particular point, the plugin MUST alter the x/y position of the target. So, for example, let's say we've got a 200x200 MovieClip whose registration point is in the upper left corner, and it's at x:0, y:0; the following would be a logical impossibility: TweenLite.to(obj, 1, {transformAroundPoint:{point:new Point(100, 100), scaleX:2, scaleY:2}, x:50, y:50}); Imagine it scaling around the center (100, 100) - where would the upper left corner end up? At –100, -100! So we can't tween x and y to 50 at the same time, otherwise it's not really scaling around that 100,100 point. Make sense? So tuck things like this: //GOOD transformAroundPoint:{point:point, rotation:rotation} //BAD: transformAroundPoint:{point:point}, rotation:rotation Let us know if you need more help. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now