[TIMOB-7156] Added support for Ti.UI.Animation.

apidoc/Titanium/UI/Animation.yml

@@ -53,7 +53,7 @@ description: |
 
 extends: Titanium.Proxy
 since: "0.9"
-platforms: [android, iphone, ipad]
+platforms: [android, iphone, ipad, mobileweb]
 events:
   - name: complete
     summary: Fired when the animation completes.
@@ -66,7 +66,7 @@ properties:
   - name: backgroundColor
     summary: Value of the `backgroundColor` property at the end of the animation.
     type: String
-    platforms: [android, iphone, ipad]
+    platforms: [android, iphone, ipad, mobileweb]
   - name: bottom
     summary: Value of the `bottom` property at the end of the animation.
     type: Number
@@ -76,14 +76,14 @@ properties:
   - name: color
     summary: Value of the `color` property at the end of the animation.
     type: String
-    platforms: [iphone, ipad]
+    platforms: [iphone, ipad, mobileweb]
   - name: curve
     summary: Animation curve or easing function to apply to the animation.
     description: |
         Specify one of the `ANIMATION_CURVE` constants from
         <Titanium.UI.iOS>.
     type: Number
-    platforms: [iphone, ipad]
+    platforms: [iphone, ipad, mobileweb]
   - name: delay
     summary: Delay, in milliseconds before starting the animation.
     type: Number
@@ -133,14 +133,14 @@ properties:
   - name: visible
     summary: Value of the `visible` property at the end of the animation.
     type: Boolean
-    platforms: [iphone, ipad]
+    platforms: [iphone, ipad, mobileweb]
   - name: width
     summary: Value of the `width` property at the end of the animation.
     type: Number
   - name: zIndex
     summary: Value of the `zIndex` property at the end of the animation.
     type: Number
-    platforms: [iphone, ipad]
+    platforms: [iphone, ipad, mobileweb]
 
 examples:
   - title: Simple Animation Applied to a View

mobileweb/src/Ti/UI/Animation.js

@@ -0,0 +1,38 @@
+define("Ti/UI/Animation", ["Ti/_/declare", "Ti/_/Evented"], function(declare, Evented) {
+
+	var undef;
+
+	return declare("Ti.UI.Animation", Evented, {
+
+		start: function() {
+			this.fireEvent("start");
+		},
+
+		complete: function() {
+			this.fireEvent("complete");
+		},
+
+		properties: {
+			autoreverse: undef,
+			backgroundColor: undef,
+			bottom: undef,
+			center: undef,
+			color: undef,
+			curve: undef,
+			delay: undef,
+			duration: undef,
+			height: undef,
+			left: undef,
+			opacity: undef,
+			repeat: undef,
+			right: undef,
+			top: undef,
+			transform: undef,
+			visible: undef,
+			width: undef,
+			zIndex: undef
+		}
+
+	});
+
+});

mobileweb/src/Ti/_/UI/Element.js

@@ -8,6 +8,7 @@ define("Ti/_/UI/Element",
 		on = require.on,
 		set = style.set,
 		isDef = require.isDef,
+		val = lang.val,
 		is = require.is,
 		transitionEvents = {
 			webkit: "webkitTransitionEnd",
@@ -16,7 +17,8 @@ define("Ti/_/UI/Element",
 			presto: "oTransitionEnd"
 		},
 		transitionEnd = transitionEvents[browser.runtime] || "transitionEnd",
-		curTransform;
+		curTransform,
+		curves = ["ease", "ease-in", "ease-in-out", "ease-out", "linear"];
 
 	return declare("Ti._.UI.Element", Evented, {
 
@@ -287,7 +289,8 @@ define("Ti/_/UI/Element",
 		},
 
 		animate: function(anim, callback) {
-			var curve = "ease",
+			var anim = anim || {},
+				curve = curves[anim.curve] || "ease",
 				fn = lang.hitch(this, function() {
 					var transform = "";
 
@@ -300,20 +303,24 @@ define("Ti/_/UI/Element",
 					var dimensions = this._computeDimensions(
 						this._parent ? this._parent._measuredWidth : "auto", 
 						this._parent ? this._parent._measuredHeight : "auto", 
-						isDef(anim.left) ? anim.left : this.left,
-						isDef(anim.top) ? anim.top : this.top,
-						isDef(anim.right) ? anim.right : this.right,
-						isDef(anim.bottom) ? anim.bottom : this.bottom,
+						val(anim.left, this.left),
+						val(anim.top, this.top),
+						val(anim.right, this.right),
+						val(anim.bottom, this.bottom),
 						isDef(anim.center) ? anim.center.x : isDef(this.center) ? this.center.x : undef,
 						isDef(anim.center) ? anim.center.y : isDef(this.center) ? this.center.y : undef,
-						isDef(anim.width) ? anim.width : this.width,
-						isDef(anim.height) ? anim.height : this.height,
-						isDef(anim.borderWidth) ? anim.borderWidth : this.borderWidth);
-					style.set(this.domNode, "left", unitize(dimensions.left));
-					style.set(this.domNode, "top", unitize(dimensions.top));
-					style.set(this.domNode, "width", unitize(dimensions.width));
-					style.set(this.domNode, "height", unitize(dimensions.height));
-					style.set(this.domNode, "borderWidth", unitize(dimensions.borderWidth));
+						val(anim.width, this.width),
+						val(anim.height, this.height),
+						val(anim.borderWidth, this.borderWidth)
+					);
+
+					style.set(this.domNode, {
+						left: unitize(dimensions.left),
+						top: unitize(dimensions.top),
+						width: unitize(dimensions.width),
+						height: unitize(dimensions.height),
+						borderWidth: unitize(dimensions.borderWidth)
+					});
 
 					// Set the z-order
 					!isDef(anim.zIndex) && style.set(this.domNode, "zIndex", anim.zIndex);
@@ -325,32 +332,30 @@ define("Ti/_/UI/Element",
 					}
 
 					style.set(this.domNode, "transform", transform);
-				});
+				}),
+				done = function() {
+					is(anim.complete, "Function") && anim.complete();
+					is(callback, "Function") && callback();
+				};
 			Ti.UI._doForcedFullLayout();
 
-			switch (anim.curve) {
-				case Ti.UI.ANIMATION_CURVE_LINEAR: curve = "linear"; break;
-				case Ti.UI.ANIMATION_CURVE_EASE_IN: curve = "ease-in"; break;
-				case Ti.UI.ANIMATION_CURVE_EASE_OUT: curve = "ease-out"; break
-				case Ti.UI.ANIMATION_CURVE_EASE_IN_OUT: curve = "ease-in-out";
-			}
-
 			anim.duration = anim.duration || 0;
 			anim.delay = anim.delay || 0;
 			anim.transform && style.set("transform", "");
+			anim.start && anim.start();
 
 			if (anim.duration > 0) {
 				// Create the transition, must be set before setting the other properties
 				style.set(this.domNode, "transition", "all " + anim.duration + "ms " + curve + (anim.delay ? " " + anim.delay + "ms" : ""));
-				callback && on.once(window, transitionEnd, lang.hitch(this, function(e) {
+				on.once(window, transitionEnd, lang.hitch(this, function(e) {
 					// Clear the transform so future modifications in these areas are not animated
 					style.set(this.domNode, "transition", "");
-					callback();
+					done();
 				}));
 				setTimeout(fn, 0);
 			} else {
 				fn();
-				callback && callback();
+				done();
 			}
 		},
 

mobileweb/src/loader.js

@@ -1604,7 +1604,7 @@ require.cache({
 
 			function hitchArgs(scope, method) {
 				var pre = toArray(arguments, 2);
-					named = require.is(method, "String");
+					named = is(method, "String");
 				return function() {
 					var s = scope || global,
 						f = named ? s[method] : method;
@@ -1613,6 +1613,10 @@ require.cache({
 			}
 
 			return {
+				val: function(originalValue, defaultValue) {
+					return is(originalValue, "Undefined") ? defaultValue : originalValue;
+				},
+
 				hitch: function(scope, method) {
 					if (arguments.length > 2) {
 						return hitchArgs.apply(global, arguments);
@@ -1621,7 +1625,7 @@ require.cache({
 						method = scope;
 						scope = null;
 					}
-					if (require.is(method, "String")) {
+					if (is(method, "String")) {
 						scope = scope || global;
 						if (!scope[method]) {
 							throw(['hitch: scope["', method, '"] is null (scope="', scope, '")'].join(''));

support/mobileweb/compiler.py

@@ -93,6 +93,7 @@ def __init__(self,project_dir,deploytype):
 				'Ti/UI/2DMatrix.js',
 				'Ti/UI/ActivityIndicator.js',
 				'Ti/UI/AlertDialog.js',
+				'Ti/UI/Animation.js',
 				'Ti/UI/Button.js',
 				'Ti/UI/ImageView.js',
 				'Ti/UI/Label.js',