gistfile1.js

var Rich = SC.Object.create();

Rich.animation = SC.Object.create({
	startValue: 0,
	endValue: 0,
	value: 0,
	progress: 0,
	period: 1,
	framesPerSecond: 60,
	transformationType: "sinusoidal",
	
	transformedProgress: function(progress)
	{
		if(this.get("transformationType") == "sinusoidal")
		{
			return (Math.sin(Math.PI * ((1 - progress) + .5)) + 1) / 2;
		}
		else
		{
			return progress;
		}
	},
	
	start: function()
	{
		this.set("value", this.get("startValue"));
		
		this._timer = SC.Timer.schedule({
	      target: this,
	      action: "_updateProgress",
	      interval: 1000 / this.get("framesPerSecond"),
	      repeats: YES,
	      until: new Date().getTime() + this.get("period") * 1000
	    });
	},

	_updateProgress: function(timer)
	{
		//console.log(this._timer.get("fireTime"));
		//The timer appears to be broken.  It returns the same fireTime twice in a row and then 
		//stops sending sending action messages to the target.

		var rawProgress = Math.min(1, (new Date().getTime() - this._timer.get("startTime")) / this.get("period") / 1000);
		this.set("progress", this.transformedProgress(rawProgress));
		this.set("value", this.get("startValue") + (this.get("endValue") - this.get("startValue")) * this.get("progress"));
	}
});

Rich.mainPage = SC.Page.design({
	layout: { left: 0, right: 0, top: 0, bottom: 0 },
	
	mainPane: SC.MainPane.design(
	{
		childViews: ["boxView"],
		boxView: SC.View.design(
		{
			layout: { left: 0, top: 0, width: 100, height: 100 },
			classNames: ["box"]
		})
	})
});

Rich.animationController = SC.Object.create(
{
	animation: Rich.get("animation"),
	boxView: Rich.getPath("mainPage.mainPane.boxView"),
	
	moveBoxView: function() //layout doesn"t support KVO otherwise I could use bind
	{
		var layout = this.getPath("boxView.layout");
		this.get("boxView").set("layout",
		{
			left: this.getPath("animation.value"),
			right: layout.right,
			width: layout.width,
			height: layout.height
		});
	}.observes("Rich.animation.value"),
	
	updateAnimationEndValue: function() //in unlikely event of resize
	{
		this.get("animation").set("endValue", this.getPath("boxView.parentView.frame").width - this.getPath("boxView.layout").width);
	}.observes("Rich.animation.progress"),
	
	startAnimation: function()
	{
		this.get("animation").start();
	}
})

Rich.main = function() {
	this.getPath("mainPage.mainPane").append();
	this.get("animationController").startAnimation();
};

function main() { return Rich.main(); }