Jump to content

Help With Animation Object.


Recommended Posts

Ok so I have this animation Object thing (I'm still kinda new to Objects).Script:

var Widget = {	Default: {		Duration: 0.8,		fps: 10	},	Effect: {		Move: function(Id,oParams) {			var Self = this;			this.Obj = $(Id);			this.fps = oParams.fps || Widget.Default.fps;			this.Timer = null;			this.x = oParams.x;			this.y = oParams.y;			this.FromX = Self.Obj.offsetLeft;			this.FromY = Self.Obj.offsetTop;			this.Duration = (oParams.Duration*1000) || (Widget.Default.Duration*1000);			this.HigherTo = Math.max(Self.x,Self.y);			this.HigherFrom = Math.max(Self.FromX,Self.FromY);			this.Frames = (Self.HigherTo-Self.HigherFrom);			this.XPos = Self.FromX;			this.YPos = Self.FromY;			this.onMove = oParams.onMove || function() {};						this.Animate = function() {				if(Math.max(Self.XPos,Self.YPos) <= Self.HigherTo) {					Self.onMove(Self.Obj,Self.XPos,Self.YPos);					Self.XPos += Self.x/(Self.Frames/Self.fps);					Self.YPos += Self.y/(Self.Frames/Self.fps);				}				else {					clearInterval(Self.Timer);				}			}						Self.Timer = setInterval(Self.Animate,(Self.Duration/Self.Frames));		}	}}


<head><script type="text/javascript" src="External/WidgetDependencies.js"></script><style type="text/css">body {	background: #FFF;}#Foo {	background: #CCF;	border: #36C 1px solid;	width: 120px;	height: auto;	position: absolute;	left: 0px;	top: 0px;}</style></head><body id="Content"><div id="Foo">Hello, World!<br />I am Foo :)</div><script type="text/javascript" language="javascript">addEvent(document,'click',function(e) {	new Widget.Effect.Move('Foo',{		Duration: 0.5,		x: 270,		y: 230,		onMove: function(Obj,x,y) {			console.log('x:',Math.round(x),'y:',Math.round(y));			Obj.style.left = x+'px';			Obj.style.top = y+'px';		}	});});</script></body>

And that seems to work fine if the x and y variables are Multiples of 10 otherwise the "Foo" Element doesn't go to the Exact Coordinate.I'm assuming this is just a math problem but I just can't seem to get it.Any help would be awesome. :)

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

  • Create New...