added transition support for a few special properties

h2d/domkit/BaseComponents.hx

@@ -2,8 +2,15 @@ package h2d.domkit;
 import domkit.Property;
 import domkit.CssValue;
 
+typedef FlowBg = { tile : #if macro Bool #else h2d.Tile #end, borderL : Int, borderT : Int, borderR : Int, borderB : Int, ?color : Int }
+
 class CustomParser extends CssValue.ValueParser {
 
+	public function new() {
+		super();
+		defaultColor = -1;
+	}
+
 	function parseScale( value ) {
 		switch( value ) {
 		case VGroup([x,y]):
@@ -38,6 +45,12 @@ class CustomParser extends CssValue.ValueParser {
 	}
 
 
+	function transitionColorF( v1 : h3d.Vector, v2 : h3d.Vector, t : Float ) : h3d.Vector {
+		var v = new h3d.Vector();
+		v.lerp(v1,v2,t);
+		return v;
+	}
+
 	function parseColorF( v : CssValue ) : h3d.Vector {
 		var f = new h3d.Vector();
 		switch( v ) {
@@ -199,7 +212,19 @@ class CustomParser extends CssValue.ValueParser {
 		}
 	}
 
-	public function parseFlowBackground(value) {
+	function transitionFlowBackground( bg1 : FlowBg, bg2 : FlowBg, v : Float ) : FlowBg {
+		var color = transitionColor(bg1.color, bg2.color, v);
+		return {
+			tile : #if macro true #else h2d.Tile.fromColor(color&0xFFFFFF,(color>>>24)/255) #end,
+			borderL : Std.int(hxd.Math.lerp(bg1.borderL, bg2.borderL, v)),
+			borderR : Std.int(hxd.Math.lerp(bg1.borderR, bg2.borderR, v)),
+			borderT : Std.int(hxd.Math.lerp(bg1.borderT, bg2.borderT, v)),
+			borderB : Std.int(hxd.Math.lerp(bg1.borderB, bg2.borderB, v)),
+			color : color,
+		};
+	}
+
+	public function parseFlowBackground(value) : FlowBg {
 		return switch( value ) {
 		case VIdent("transparent"): null;
 		case VGroup([tile,VInt(w),VInt(h)]):
@@ -209,13 +234,13 @@ class CustomParser extends CssValue.ValueParser {
 		case VGroup([color,alpha]):
 			var c = parseColor(color);
 			var a = parseFloat(alpha);
-			return { tile : #if macro true #else h2d.Tile.fromColor(c,a) #end, borderL : 0, borderT : 0, borderR : 0, borderB : 0 };
+			return { tile : #if macro true #else h2d.Tile.fromColor(c,a) #end, borderL : 0, borderT : 0, borderR : 0, borderB : 0, color : c | (Std.int(hxd.Math.clamp(a)*255)<<24) };
 		case VCall("disc",args) if( args.length == 1 || args.length == 2 ):
 			var c = parseColor(args[0]);
 			var a = args[1] == null ? 1. : parseFloat(args[1]);
 			return { tile : #if macro true #else h2d.Tile.fromTexture(h3d.mat.Texture.genDisc(256,c,a)) #end, borderL : 0, borderT : 0, borderR : 0, borderB : 0 };
 		default:
-			{ tile : parseTile(value), borderL : 0, borderT : 0, borderR : 0, borderB : 0 };
+			{ tile : parseTile(value), borderL : 0, borderT : 0, borderR : 0, borderB : 0, color : try parseColor(value) catch( e : Dynamic ) null };
 		}
 	}
 
@@ -501,7 +526,7 @@ class ObjectComp implements h2d.domkit.Object implements domkit.Component.Compon
 @:uiComp("drawable") @:domkitDecl
 class DrawableComp extends ObjectComp implements domkit.Component.ComponentDecl<h2d.Drawable> {
 
-	@:p(colorF) #if domkit_drawable_color var color #else var tint #end : h3d.Vector;
+	@:p(colorF) @:t(colorF) #if domkit_drawable_color var color #else var tint #end : h3d.Vector;
 	@:p(auto) var smooth : Null<Bool>;
 	@:p(colorAdjust) var colorAdjust : Null<h3d.Matrix.ColorAdjust>;
 	@:p var tileWrap : Bool;
@@ -605,7 +630,7 @@ class TextComp extends DrawableComp implements domkit.Component.ComponentDecl<h2
 	@:p(none) var maxWidth : Null<Int>;
 	@:p var textAlign : h2d.Text.Align = Left;
 	@:p(textShadow) var textShadow : { dx : Float, dy : Float, color : Int, alpha : Float };
-	@:p(color) var #if domkit_drawable_color textColor #else color #end : Null<Int>;
+	@:p(color) @:t(color) var #if domkit_drawable_color textColor #else color #end : Null<Int>;
 
 	static function create( parent : h2d.Object ) {
 		return new h2d.Text(hxd.res.DefaultFont.get(),parent);
@@ -667,7 +692,7 @@ class FlowComp extends ObjectComp implements domkit.Component.ComponentDecl<h2d.
 	@:p var maxWidth : Null<Int>;
 	@:p var maxHeight : Null<Int>;
 	@:p var backgroundId : Bool;
-	@:p(flowBackground) var background : { tile : h2d.Tile, borderL : Int, borderT : Int, borderR : Int, borderB : Int };
+	@:p(flowBackground) @:t(flowBackground) var background : FlowBg;
 	@:p(tile) var backgroundTile : h2d.Tile;
 	@:p(tilePos) var backgroundTilePos : { p : Int, y : Int };
 	@:p var backgroundTilePosX : Null<Int>;
@@ -881,7 +906,7 @@ class InputComp extends TextComp implements domkit.Component.ComponentDecl<h2d.T
 	@:p(tile) var cursor : h2d.Tile;
 	@:p(tile) var selection : h2d.Tile;
 	@:p var edit : Bool;
-	@:p(color) var backgroundColor : Null<Int>;
+	@:p(color) @:t(color) var backgroundColor : Null<Int>;
 
 	static function create( parent : h2d.Object ) {
 		return new h2d.TextInput(hxd.res.DefaultFont.get(),parent);

h2d/domkit/Style.hx

@@ -43,10 +43,13 @@ class Style extends domkit.CssStyle {
 	/**
 		Returns number of dom elements that were updated
 	**/
-	public function sync() {
+	public function sync( ?dt : Float ) {
+		if( dt == null )
+			dt = hxd.Timer.elapsedTime;
 		var T0 = domkit.CssStyle.TAG;
 		for( o in currentObjects )
 			o.dom.applyStyle(this, true);
+		updateTime(dt);
 		return domkit.CssStyle.TAG - T0;
 	}
 

samples/domkit_res/style.css

@@ -16,6 +16,7 @@ button {
 	background: #333;
 	fill-width: true;
 	height: 30;
+	transition: background 0.5;
 }
 
 button.highlight {
@@ -30,6 +31,16 @@ button:hover {
 	background: #444;
 }
 
+button text {
+	align: middle middle;
+	color : #aaa;
+	transition : color;
+}
+
+button:hover text {
+	color : white;
+}
+
 button:active {
-	background: #222;
+	background: #666;
 }