CPViewAnimator.j

var CSSStringFromCGAffineTransform = function(anAffineTransform)
{
    // Firefox : add px to the translate values.
    return "matrix(" + anAffineTransform.a + ", " + anAffineTransform.b + ", " + anAffineTransform.c + ", " + anAffineTransform.d + ", " + anAffineTransform.tx + ", " + anAffineTransform.ty + ")";
};

var frameOriginToCSSTransformMatrix = function(start, current)
{
    var affine = CGAffineTransformMakeTranslation(current.x - start.x, current.y - start.y);

    return CSSStringFromCGAffineTransform(affine);
};

var frameSizeToCSSTransformMatrix = function(start, current)
{
    // !! Zero start size
    var offsetX = (current.width - start.width) / 2,
        offsetY = (current.height - start.height) / 2;

    var affine = CGAffineTransformMake(current.width / start.width, 0, 0, current.height / start.height, offsetX, offsetY);

    return CSSStringFromCGAffineTransform(affine);
};

var frameToCSSTransformMatrix = function(start, current)
{
    // !! Zero start size
    var offsetX = (CGRectGetWidth(current) - CGRectGetWidth(start)) / 2,
        offsetY = (CGRectGetHeight(current) - CGRectGetHeight(start)) / 2;

    var affine = CGAffineTransformMake(CGRectGetWidth(current) / CGRectGetWidth(start), 0, 0, CGRectGetHeight(current) / CGRectGetHeight(start), CGRectGetMinX(current) - CGRectGetMinX(start) + offsetX, CGRectGetMinY(current) - CGRectGetMinY(start) + offsetY);

    return CSSStringFromCGAffineTransform(affine);
};

var DEFAULT_CSS_PROPERTIES = nil;

@implementation CPView (CPAnimatablePropertyContainer)

+ (CPDictionary)_defaultCSSProperties
{
    if (DEFAULT_CSS_PROPERTIES == nil)
    {
        var transformProperty = CPBrowserCSSProperty("transform");

        DEFAULT_CSS_PROPERTIES =  @{
            "backgroundColor"  : [@{"property":"background", "value":function(sv, val){return [val cssString];}}],
            "alphaValue"       : [@{"property":"opacity"}],
            "frame"            : [@{"property":transformProperty, "value":frameToCSSTransformMatrix}],
            "frameOrigin"      : [@{"property":transformProperty, "value":frameOriginToCSSTransformMatrix}],
            "frameSize"        : [@{"property":transformProperty, "value":frameSizeToCSSTransformMatrix}]
        };
    }

    return DEFAULT_CSS_PROPERTIES;
}
 ...