mirror of
https://github.com/cappuccino/cappuccino.git
synced 2026-08-31 07:53:35 +00:00
Merge remote-tracking branch 'cappuccino/master'
This commit is contained in:
Didier Korthoudt
+15
-6
@@ -252,6 +252,8 @@ var CPViewHighDPIDrawingEnabled = YES;
|
||||
|
||||
id _animator;
|
||||
CPDictionary _animationsDictionary;
|
||||
BOOL _inhibitDOMUpdates @accessors(setter=_setInhibitDOMUpdates);
|
||||
BOOL _forceUpdates @accessors(setter=_setForceUpdates);
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -404,6 +406,9 @@ var CPViewHighDPIDrawingEnabled = YES;
|
||||
|
||||
[self _setupViewFlags];
|
||||
[self _loadThemeAttributes];
|
||||
|
||||
_inhibitDOMUpdates = NO;
|
||||
_forceUpdates = NO;
|
||||
}
|
||||
|
||||
return self;
|
||||
@@ -1013,7 +1018,7 @@ var CPViewHighDPIDrawingEnabled = YES;
|
||||
*/
|
||||
- (void)setFrame:(CGRect)aFrame
|
||||
{
|
||||
if (CGRectEqualToRect(_frame, aFrame))
|
||||
if (CGRectEqualToRect(_frame, aFrame) && !_forceUpdates)
|
||||
return;
|
||||
|
||||
_inhibitFrameAndBoundsChangedNotifications = YES;
|
||||
@@ -1084,7 +1089,7 @@ var CPViewHighDPIDrawingEnabled = YES;
|
||||
{
|
||||
var origin = _frame.origin;
|
||||
|
||||
if (!aPoint || CGPointEqualToPoint(origin, aPoint))
|
||||
if (!aPoint || (CGPointEqualToPoint(origin, aPoint) && !_forceUpdates))
|
||||
return;
|
||||
|
||||
origin.x = aPoint.x;
|
||||
@@ -1097,9 +1102,12 @@ var CPViewHighDPIDrawingEnabled = YES;
|
||||
[[self superview] viewFrameChanged:[[CPNotification alloc] initWithName:CPViewFrameDidChangeNotification object:self userInfo:nil]];
|
||||
|
||||
#if PLATFORM(DOM)
|
||||
var transform = _superview ? _superview._boundsTransform : NULL;
|
||||
if (!_inhibitDOMUpdates)
|
||||
{
|
||||
var transform = _superview ? _superview._boundsTransform : NULL;
|
||||
|
||||
CPDOMDisplayServerSetStyleLeftTop(_DOMElement, transform, origin.x, origin.y);
|
||||
CPDOMDisplayServerSetStyleLeftTop(_DOMElement, transform, origin.x, origin.y);
|
||||
}
|
||||
#endif
|
||||
|
||||
if (!_inhibitUpdateTrackingAreas && !_inhibitFrameAndBoundsChangedNotifications)
|
||||
@@ -1116,7 +1124,7 @@ var CPViewHighDPIDrawingEnabled = YES;
|
||||
{
|
||||
var size = _frame.size;
|
||||
|
||||
if (!aSize || CGSizeEqualToSize(size, aSize))
|
||||
if (!aSize || (CGSizeEqualToSize(size, aSize) && !_forceUpdates))
|
||||
return;
|
||||
|
||||
var oldSize = CGSizeMakeCopy(size);
|
||||
@@ -1270,7 +1278,8 @@ var CPViewHighDPIDrawingEnabled = YES;
|
||||
#if PLATFORM(DOM)
|
||||
var scale = [self scaleSize];
|
||||
|
||||
CPDOMDisplayServerSetStyleSize(_DOMElement, aSize.width * 1 / scale.width, aSize.height * 1 / scale.height);
|
||||
if (!_inhibitDOMUpdates)
|
||||
CPDOMDisplayServerSetStyleSize(_DOMElement, aSize.width * 1 / scale.width, aSize.height * 1 / scale.height);
|
||||
|
||||
if (_DOMContentsElement)
|
||||
{
|
||||
|
||||
@@ -83,7 +83,9 @@ var _CPAnimationContextStack = nil,
|
||||
{
|
||||
if (!_animationFlushingObserver)
|
||||
{
|
||||
#if (DEBUG)
|
||||
CPLog.debug("create new observer");
|
||||
#endif
|
||||
_animationFlushingObserver = CFRunLoopObserverCreate(2, true, 0, _animationFlushingObserverCallback,0);
|
||||
CFRunLoopAddObserver([CPRunLoop mainRunLoop], _animationFlushingObserver);
|
||||
}
|
||||
@@ -115,7 +117,9 @@ var _CPAnimationContextStack = nil,
|
||||
[context _flushAnimations];
|
||||
[_CPAnimationContextStack removeLastObject];
|
||||
|
||||
CPLog.debug(_cmd + "context stack =" + _CPAnimationContextStack);
|
||||
#if (DEBUG)
|
||||
CPLog.debug(_cmd + "context stack =" + _CPAnimationContextStack);
|
||||
#endif
|
||||
return YES;
|
||||
}
|
||||
|
||||
@@ -152,24 +156,32 @@ CPLog.debug(_cmd + "context stack =" + _CPAnimationContextStack);
|
||||
|
||||
duration = [animation duration] || [self duration];
|
||||
|
||||
var needsFrameTimer = (aKeyPath == @"frame" || aKeyPath == @"frameSize") &&
|
||||
([anObject hasCustomLayoutSubviews] || [anObject hasCustomDrawRect]) &&
|
||||
(objectId = [anObject UID]);
|
||||
var needsPeriodicFrameUpdates = (((aKeyPath == @"frame" || aKeyPath == @"frameSize") &&
|
||||
([anObject hasCustomLayoutSubviews] || [anObject hasCustomDrawRect])) || [[anObject animator] wantsPeriodicFrameUpdates]) &&
|
||||
(objectId = [anObject UID]);
|
||||
|
||||
if (_completionHandlerAgent)
|
||||
_completionHandlerAgent.increment();
|
||||
|
||||
var completionFunction = function()
|
||||
{
|
||||
if (needsFrameTimer)
|
||||
if (needsPeriodicFrameUpdates)
|
||||
{
|
||||
[self stopFrameUpdaterWithIdentifier:objectId];
|
||||
|
||||
if ([anObject respondsToSelector:@selector(_setForceUpdates:)])
|
||||
[anObject _setForceUpdates:YES];
|
||||
}
|
||||
|
||||
if (animationCompletion)
|
||||
animationCompletion();
|
||||
|
||||
if (needsFrameTimer || animationCompletion)
|
||||
if (needsPeriodicFrameUpdates || animationCompletion)
|
||||
[[CPRunLoop currentRunLoop] performSelectors];
|
||||
|
||||
if (needsPeriodicFrameUpdates && [anObject respondsToSelector:@selector(_setForceUpdates:)])
|
||||
[anObject _setForceUpdates:NO];
|
||||
|
||||
if (_completionHandlerAgent)
|
||||
_completionHandlerAgent.decrement();
|
||||
};
|
||||
@@ -247,7 +259,9 @@ CPLog.debug(_cmd + "context stack =" + _CPAnimationContextStack);
|
||||
var k = timers.length;
|
||||
while(k--)
|
||||
{
|
||||
#if (DEBUG)
|
||||
CPLog.debug("START TIMER " + timers[k].identifier());
|
||||
#endif
|
||||
timers[k].start();
|
||||
}
|
||||
|
||||
@@ -255,7 +269,9 @@ CPLog.debug(_cmd + "context stack =" + _CPAnimationContextStack);
|
||||
var n = cssAnimations.length;
|
||||
while(n--)
|
||||
{
|
||||
#if (DEBUG)
|
||||
CPLog.debug("START ANIMATION " + cssAnimations[n].animationsnames);
|
||||
#endif
|
||||
cssAnimations[n].start();
|
||||
}
|
||||
}
|
||||
@@ -266,7 +282,7 @@ CPLog.debug(_cmd + "context stack =" + _CPAnimationContextStack);
|
||||
isFrameKeyPath = (keyPath == @"frame" || keyPath == @"frameSize"),
|
||||
customLayout = [aTargetView hasCustomLayoutSubviews],
|
||||
customDrawing = [aTargetView hasCustomDrawRect],
|
||||
needsFrameTimer = isFrameKeyPath && (customLayout || customDrawing);
|
||||
needsPeriodicFrameUpdates = ((isFrameKeyPath && (customLayout || customDrawing)) || [[aTargetView animator] wantsPeriodicFrameUpdates]);
|
||||
|
||||
if (needsCSSAnimation)
|
||||
{
|
||||
@@ -305,7 +321,7 @@ CPLog.debug(_cmd + "context stack =" + _CPAnimationContextStack);
|
||||
}];
|
||||
}
|
||||
|
||||
if (needsFrameTimer)
|
||||
if (needsPeriodicFrameUpdates)
|
||||
{
|
||||
var timer = [self addFrameUpdaterWithIdentifier:[rootView UID] forView:aTargetView keyPath:keyPath duration:anAction.duration];
|
||||
|
||||
@@ -314,35 +330,37 @@ CPLog.debug(_cmd + "context stack =" + _CPAnimationContextStack);
|
||||
}
|
||||
|
||||
var subviews = [aTargetView subviews],
|
||||
count = [subviews count];
|
||||
count = [subviews count],
|
||||
customLayout = [aTargetView hasCustomLayoutSubviews];
|
||||
|
||||
if (count && isFrameKeyPath)
|
||||
{
|
||||
var frameTimerId = [rootView UID],
|
||||
lastIndex = count - 1;
|
||||
lastIndex = count - 1;
|
||||
|
||||
[subviews enumerateObjectsUsingBlock:function(aSubview, idx, stop)
|
||||
{
|
||||
var action = [self actionFromAction:anAction forAnimatedSubview:aSubview],
|
||||
{
|
||||
var action = [self actionFromAction:anAction forAnimatedSubview:aSubview],
|
||||
targetFrame = [action.values lastObject];
|
||||
|
||||
if (CGRectEqualToRect([aSubview frame], targetFrame))
|
||||
return;
|
||||
if (CGRectEqualToRect([aSubview frame], targetFrame))
|
||||
return;
|
||||
|
||||
if ([aSubview hasCustomDrawRect])
|
||||
{
|
||||
action.completion = function()
|
||||
{
|
||||
[aSubview setFrame:targetFrame];
|
||||
if ([aSubview hasCustomDrawRect])
|
||||
{
|
||||
action.completion = function()
|
||||
{
|
||||
[aSubview setFrame:targetFrame];
|
||||
#if (DEBUG)
|
||||
CPLog.debug(aSubview + " setFrame: ");
|
||||
#endif
|
||||
if (idx == lastIndex)
|
||||
[self stopFrameUpdaterWithIdentifier:frameTimerId];
|
||||
};
|
||||
}
|
||||
|
||||
if (idx == lastIndex)
|
||||
[self stopFrameUpdaterWithIdentifier:frameTimerId];
|
||||
};
|
||||
}
|
||||
|
||||
[self getAnimations:cssAnimations getTimers:timers forView:aSubview usingAction:action rootView:rootView cssAnimate:!customLayout];
|
||||
}];
|
||||
[self getAnimations:cssAnimations getTimers:timers forView:aSubview usingAction:action rootView:rootView cssAnimate:!customLayout];
|
||||
}];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -422,6 +440,7 @@ CPLog.debug(_cmd + "context stack =" + _CPAnimationContextStack);
|
||||
{
|
||||
var mask = [self autoresizingMask];
|
||||
|
||||
|
||||
if (mask == CPViewNotSizable)
|
||||
return _frame;
|
||||
|
||||
@@ -543,7 +562,9 @@ CompletionHandlerAgent.prototype.invalidate = function()
|
||||
|
||||
var _animationFlushingObserverCallback = function()
|
||||
{
|
||||
CPLog.debug("_animationFlushingObserverCallback");
|
||||
#if (DEBUG)
|
||||
CPLog.debug("_animationFlushingObserverCallback");
|
||||
#endif
|
||||
if ([_CPAnimationContextStack count] == 1)
|
||||
{
|
||||
var context = [_CPAnimationContextStack lastObject];
|
||||
@@ -551,11 +572,15 @@ CPLog.debug("_animationFlushingObserverCallback");
|
||||
[_CPAnimationContextStack removeLastObject];
|
||||
}
|
||||
|
||||
CPLog.debug("_animationFlushingObserver "+_animationFlushingObserver+" stack:" + [_CPAnimationContextStack count]);
|
||||
#if (DEBUG)
|
||||
CPLog.debug("_animationFlushingObserver "+_animationFlushingObserver+" stack:" + [_CPAnimationContextStack count]);
|
||||
#endif
|
||||
|
||||
if (_animationFlushingObserver && ![_CPAnimationContextStack count])
|
||||
{
|
||||
#if (DEBUG)
|
||||
CPLog.debug("removeObserver");
|
||||
#endif
|
||||
CFRunLoopObserverInvalidate([CPRunLoop mainRunLoop], _animationFlushingObserver);
|
||||
_animationFlushingObserver = nil;
|
||||
}
|
||||
@@ -674,31 +699,43 @@ FrameUpdater.prototype.addTarget = function(target, keyPath, duration)
|
||||
|
||||
var createUpdateFrame = function(aView, aKeyPath)
|
||||
{
|
||||
if (aKeyPath !== "frame" && aKeyPath !== "frameSize")
|
||||
if (aKeyPath !== "frame" && aKeyPath !== "frameSize" && aKeyPath !== "frameOrigin")
|
||||
return nil;
|
||||
|
||||
var style = getComputedStyle(aView._DOMElement),
|
||||
getCSSPropertyValue = function(prop) {
|
||||
return ROUND(parseFloat(style.getPropertyValue(prop)));
|
||||
};
|
||||
|
||||
var updateFrame = function(timestamp)
|
||||
getCSSPropertyValue = function(prop) {
|
||||
return ROUND(parseFloat(style.getPropertyValue(prop)));
|
||||
},
|
||||
initialOrigin = CGPointMakeCopy([aView frameOrigin]),
|
||||
transformProperty = CPBrowserCSSProperty("transform"),
|
||||
updateFrame = function(timestamp)
|
||||
{
|
||||
var width = getCSSPropertyValue("width"),
|
||||
height = getCSSPropertyValue("height");
|
||||
|
||||
if (aKeyPath == "frame")
|
||||
{
|
||||
var left = getCSSPropertyValue("left"),
|
||||
top = getCSSPropertyValue("top"),
|
||||
frame = CGRectMake(left, top, width, height);
|
||||
|
||||
[aView setFrame:frame];
|
||||
}
|
||||
else if (aKeyPath == "frameSize")
|
||||
if (aKeyPath === "frameSize")
|
||||
{
|
||||
[aView setFrameSize:CGSizeMake(width, height)];
|
||||
}
|
||||
else
|
||||
{
|
||||
[aView _setInhibitDOMUpdates:YES];
|
||||
|
||||
var matrix = style[transformProperty].split('(')[1].split(')')[0].split(','),
|
||||
x = ROUND(initialOrigin.x + parseFloat(matrix[4])),
|
||||
y = ROUND(initialOrigin.y + parseFloat(matrix[5]));
|
||||
|
||||
if (aKeyPath === "frame")
|
||||
{
|
||||
[aView setFrame:CGRectMake(x, y, width, height)];
|
||||
}
|
||||
else
|
||||
{
|
||||
[aView setFrameOrigin:CGPointMake(x, y)];
|
||||
}
|
||||
|
||||
[aView _setInhibitDOMUpdates:NO];
|
||||
}
|
||||
|
||||
[[CPRunLoop currentRunLoop] performSelectors];
|
||||
};
|
||||
|
||||
@@ -1,9 +1,20 @@
|
||||
|
||||
@import "_CPObjectAnimator.j"
|
||||
@import "CPView.j"
|
||||
@import "CPCompatibility.j"
|
||||
|
||||
@implementation CPViewAnimator : _CPObjectAnimator
|
||||
{
|
||||
BOOL _wantsPeriodicFrameUpdates @accessors(property=wantsPeriodicFrameUpdates);
|
||||
}
|
||||
|
||||
- (id)initWithTarget:(id)aTarget
|
||||
{
|
||||
self = [super initWithTarget:aTarget];
|
||||
|
||||
_wantsPeriodicFrameUpdates = NO;
|
||||
|
||||
return self;
|
||||
}
|
||||
|
||||
- (void)removeFromSuperview
|
||||
@@ -76,16 +87,6 @@
|
||||
|
||||
@end
|
||||
|
||||
var transformOrigin = function(start, current)
|
||||
{
|
||||
return "translate(" + (current.x - start.x) + "px," + (current.y - start.y) + "px)";
|
||||
};
|
||||
|
||||
var transformFrameToTranslate = function(start, current)
|
||||
{
|
||||
return transformOrigin(start.origin, current.origin);
|
||||
};
|
||||
|
||||
var transformFrameToWidth = function(start, current)
|
||||
{
|
||||
return current.size.width + "px";
|
||||
@@ -106,6 +107,25 @@ var transformSizeToHeight = function(start, current)
|
||||
return current.height + "px";
|
||||
};
|
||||
|
||||
var CSSStringFromCGAffineTransform = function(anAffineTransform)
|
||||
{
|
||||
return "matrix(" + anAffineTransform.a + ", " + anAffineTransform.b + ", " + anAffineTransform.c + ", " + anAffineTransform.d + ", " + anAffineTransform.tx + (CPBrowserIsEngine(CPGeckoBrowserEngine) ? "px, " : ", ") + anAffineTransform.ty + (CPBrowserIsEngine(CPGeckoBrowserEngine) ? "px)" : ")");
|
||||
};
|
||||
|
||||
var frameOriginToCSSTransformMatrix = function(start, current)
|
||||
{
|
||||
var affine = CGAffineTransformMakeTranslation(current.x - start.x, current.y - start.y);
|
||||
|
||||
return CSSStringFromCGAffineTransform(affine);
|
||||
};
|
||||
|
||||
var frameToCSSTranslationTransformMatrix = function(start, current)
|
||||
{
|
||||
var affine = CGAffineTransformMakeTranslation(current.origin.x - start.origin.x, current.origin.y - start.origin.y);
|
||||
|
||||
return CSSStringFromCGAffineTransform(affine);
|
||||
};
|
||||
|
||||
var DEFAULT_CSS_PROPERTIES = nil;
|
||||
|
||||
@implementation CPView (CPAnimatablePropertyContainer)
|
||||
@@ -117,15 +137,15 @@ var 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":transformFrameToTranslate},
|
||||
@{"property":"width", "value":transformFrameToWidth},
|
||||
@{"property":"height", "value":transformFrameToHeight}],
|
||||
"frameOrigin" : [@{"property":transformProperty, "value":transformOrigin}],
|
||||
"frameSize" : [@{"property":"width", "value":transformSizeToWidth},
|
||||
@{"property":"height", "value":transformSizeToHeight}]
|
||||
};
|
||||
"backgroundColor" : [@{"property":"background", "value":function(sv, val){return [val cssString];}}],
|
||||
"alphaValue" : [@{"property":"opacity"}],
|
||||
"frame" : [@{"property":transformProperty, "value":frameToCSSTranslationTransformMatrix},
|
||||
@{"property":"width", "value":transformFrameToWidth},
|
||||
@{"property":"height", "value":transformFrameToHeight}],
|
||||
"frameOrigin" : [@{"property":transformProperty, "value":frameOriginToCSSTransformMatrix}],
|
||||
"frameSize" : [@{"property":"width", "value":transformSizeToWidth},
|
||||
@{"property":"height", "value":transformSizeToHeight}]
|
||||
};
|
||||
}
|
||||
|
||||
return DEFAULT_CSS_PROPERTIES;
|
||||
|
||||
@@ -3,7 +3,7 @@ var ANIMATIONS_GLOBAL_ID = 0,
|
||||
CURRENT_ANIMATIONS = {},
|
||||
|
||||
ANIMATION_END_EVENT_NAME,
|
||||
ANIMATION__PROPERTY,
|
||||
ANIMATION_PROPERTY,
|
||||
ANIMATION_NAME_PROPERTY,
|
||||
ANIMATION_DURATION_PROPERTY,
|
||||
ANIMATION_TIMING_FUNCTION_PROPERTY,
|
||||
@@ -15,18 +15,26 @@ var defineCSSProperties = function()
|
||||
if (this.done)
|
||||
return;
|
||||
|
||||
ANIMATION_END_EVENT_NAME = CPBrowserStyleProperty("animationend"),
|
||||
ANIMATION_PROPERTY = CPBrowserCSSProperty("animation"),
|
||||
ANIMATION_NAME_PROPERTY = CPBrowserCSSProperty("animation-name"),
|
||||
ANIMATION_DURATION_PROPERTY = CPBrowserCSSProperty("animation-duration"),
|
||||
ANIMATION_TIMING_FUNCTION_PROPERTY = CPBrowserCSSProperty("animation-timing-function"),
|
||||
ANIMATION_FILL_MODE_PROPERTY = CPBrowserCSSProperty("animation-fill-mode"),
|
||||
ANIMATION_KEYFRAMES_RULE = "@" + ANIMATION_PROPERTY.substring(0, ANIMATION_PROPERTY.indexOf("animation")) + "keyframes";
|
||||
ANIMATION_END_EVENT_NAME = CPBrowserStyleProperty("animationend");
|
||||
ANIMATION_PROPERTY = CPBrowserCSSProperty("animation");
|
||||
ANIMATION_NAME_PROPERTY = CPBrowserCSSProperty("animation-name");
|
||||
ANIMATION_DURATION_PROPERTY = CPBrowserCSSProperty("animation-duration");
|
||||
ANIMATION_TIMING_FUNCTION_PROPERTY = CPBrowserCSSProperty("animation-timing-function");
|
||||
ANIMATION_FILL_MODE_PROPERTY = CPBrowserCSSProperty("animation-fill-mode");
|
||||
ANIMATION_KEYFRAMES_RULE = "@" + ANIMATION_PROPERTY.substring(0, ANIMATION_PROPERTY.indexOf("animation")) + "keyframes";
|
||||
|
||||
this.done = true;
|
||||
}
|
||||
};
|
||||
|
||||
CSSAnimation = function(aTarget/*DOM Element*/, anIdentifier)
|
||||
var removeFromParent = function(aNode)
|
||||
{
|
||||
var parentNode = aNode.parentNode;
|
||||
|
||||
if (parentNode)
|
||||
parentNode.removeChild(aNode);
|
||||
};
|
||||
|
||||
CSSAnimation = function(aTarget/* DOM Element */, anIdentifier)
|
||||
{
|
||||
defineCSSProperties();
|
||||
|
||||
@@ -37,7 +45,9 @@ CSSAnimation = function(aTarget/*DOM Element*/, anIdentifier)
|
||||
animation = CURRENT_ANIMATIONS[anIdentifier];
|
||||
|
||||
if (animation)
|
||||
console.warn("Animation "+ anIdentifier + " is already in use. Ignoring.");
|
||||
{
|
||||
console.warn("Animation " + anIdentifier + " is already in use. Ignoring.");
|
||||
}
|
||||
else
|
||||
{
|
||||
this.target = aTarget;
|
||||
@@ -57,25 +67,27 @@ CSSAnimation = function(aTarget/*DOM Element*/, anIdentifier)
|
||||
}
|
||||
|
||||
return animation;
|
||||
}
|
||||
};
|
||||
|
||||
CSSAnimation.prototype.addPropertyAnimation = function(propertyName/*String*/, valueFunction/*Function*/, aDuration/*float*/, aKeyTimes/*d, [d]*/, aValues/*Array*/, aTimingFunctions/*[d,d,d,d],[[d,d,d,d]]*/, aCompletionfunction/*Function*/)
|
||||
CSSAnimation.prototype.addPropertyAnimation = function(propertyName/* String */, valueFunction/* Function */, aDuration/* float */, aKeyTimes/* (d, [d]) */, aValues/* Array */, aTimingFunctions/* [d,d,d,d], [[d,d,d,d]] */, aCompletionfunction/* Function */)
|
||||
{
|
||||
if (this.islive)
|
||||
return false;
|
||||
// TODO: If a property already exist, replace its values & valueFunctions.
|
||||
|
||||
var name = this.animationName + "_" + propertyName;
|
||||
var fullAnimationName = this.animationName + "_" + propertyName;
|
||||
|
||||
var animation = {name:name,
|
||||
property:propertyName,
|
||||
valuefunction:valueFunction,
|
||||
keytimes:aKeyTimes,
|
||||
values:aValues,
|
||||
duration:aDuration,
|
||||
completionfunction:aCompletionfunction};
|
||||
var animation = {
|
||||
name: fullAnimationName,
|
||||
property: propertyName,
|
||||
valuefunction: valueFunction,
|
||||
keytimes: aKeyTimes,
|
||||
values: aValues,
|
||||
duration: aDuration,
|
||||
completionfunction: aCompletionfunction };
|
||||
|
||||
var animationTimingFunction;
|
||||
|
||||
if (aTimingFunctions && (aTimingFunctions[0] instanceof Array))
|
||||
{
|
||||
animation.keyframestimingFunctions = aTimingFunctions;
|
||||
@@ -83,22 +95,25 @@ CSSAnimation.prototype.addPropertyAnimation = function(propertyName/*String*/, v
|
||||
animationTimingFunction = "linear";
|
||||
}
|
||||
else
|
||||
{
|
||||
animationTimingFunction = "cubic-bezier(" + aTimingFunctions + ")";
|
||||
}
|
||||
|
||||
this.animationstimingfunctions.push(animationTimingFunction);
|
||||
|
||||
this.propertyanimations.push(animation);
|
||||
this.animationsnames.push(name);
|
||||
this.animationsnames.push(fullAnimationName);
|
||||
this.animationsdurations.push(aDuration + "s");
|
||||
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
CSSAnimation.prototype.keyFrames = function()
|
||||
{
|
||||
var keyframesRules = [];
|
||||
|
||||
var count = this.propertyanimations.length;
|
||||
|
||||
for (var i = 0; i < count; i++)
|
||||
{
|
||||
var animation = this.propertyanimations[i],
|
||||
@@ -118,7 +133,7 @@ CSSAnimation.prototype.keyFrames = function()
|
||||
value = values[j],
|
||||
timingFunction;
|
||||
|
||||
if (valuefunction !== nil)
|
||||
if (valuefunction !== null)
|
||||
value = valuefunction(start_value, value);
|
||||
|
||||
var keyframeContent = property + ": " + value + ";";
|
||||
@@ -129,15 +144,17 @@ CSSAnimation.prototype.keyFrames = function()
|
||||
}
|
||||
|
||||
var keyframe = "\t" + Math.round(keytime * 100) + "% {\n\t\t" + keyframeContent + "\n\t}\n";
|
||||
|
||||
keyframes.push(keyframe);
|
||||
}
|
||||
// TODO ! Add keyframe rule to CPCompatibility
|
||||
var rule = ANIMATION_KEYFRAMES_RULE + " " + animation.name + " {\n" + keyframes.join(" ") + "}\n";
|
||||
|
||||
keyframesRules.push(rule);
|
||||
}
|
||||
|
||||
return keyframesRules.join("\n");
|
||||
}
|
||||
};
|
||||
|
||||
CSSAnimation.prototype.appendKeyFramesRule = function()
|
||||
{
|
||||
@@ -147,20 +164,21 @@ CSSAnimation.prototype.appendKeyFramesRule = function()
|
||||
|
||||
styleElement.appendChild(nodeText);
|
||||
document.head.appendChild(styleElement);
|
||||
}
|
||||
};
|
||||
|
||||
CSSAnimation.prototype.createKeyFramesStyleElement = function()
|
||||
{
|
||||
if (!this.styleElement)
|
||||
{
|
||||
var styleElement = document.createElement("style");
|
||||
|
||||
styleElement.setAttribute("type", "text/css");
|
||||
|
||||
this.styleElement = styleElement;
|
||||
}
|
||||
|
||||
return this.styleElement;
|
||||
}
|
||||
};
|
||||
|
||||
CSSAnimation.prototype.endEventListener = function()
|
||||
{
|
||||
@@ -173,6 +191,7 @@ CSSAnimation.prototype.endEventListener = function()
|
||||
var AnimationEndListener = function(event)
|
||||
{
|
||||
var idx = inFlightAnimationsNames.indexOf(event.animationName);
|
||||
|
||||
if (idx !== -1)
|
||||
inFlightAnimationsNames.splice(idx, 1);
|
||||
|
||||
@@ -182,6 +201,7 @@ CSSAnimation.prototype.endEventListener = function()
|
||||
for (var i = 0; i < animationsNames.length; i++)
|
||||
{
|
||||
var completion = animation.completionFunctionForAnimationName(animationsNames[i]);
|
||||
|
||||
if (completion)
|
||||
completion();
|
||||
}
|
||||
@@ -189,22 +209,25 @@ CSSAnimation.prototype.endEventListener = function()
|
||||
var eventTarget = event.target,
|
||||
style = eventTarget.style;
|
||||
|
||||
try {
|
||||
try
|
||||
{
|
||||
style.removeProperty(ANIMATION_NAME_PROPERTY);
|
||||
style.removeProperty(ANIMATION_DURATION_PROPERTY);
|
||||
style.removeProperty(ANIMATION_FILL_MODE_PROPERTY);
|
||||
style.removeProperty("-webkit-backface-visibility");
|
||||
|
||||
if (animation.animationstimingfunctions.length)
|
||||
style.removeProperty(ANIMATION_TIMING_FUNCTION_PROPERTY);
|
||||
style.removeProperty(ANIMATION_TIMING_FUNCTION_PROPERTY);
|
||||
|
||||
removeFromParent(animation.styleElement);
|
||||
|
||||
eventTarget.removeEventListener(ANIMATION_END_EVENT_NAME, AnimationEndListener);
|
||||
animation.listener = null;
|
||||
delete (CURRENT_ANIMATIONS[animation.identifier]);
|
||||
} catch (err) {
|
||||
CPLog.warn("CSSAnimation.j - " + err);
|
||||
}
|
||||
catch (err)
|
||||
{
|
||||
console.warn("CSSAnimation.j - " + err);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -212,7 +235,7 @@ CSSAnimation.prototype.endEventListener = function()
|
||||
}
|
||||
|
||||
return this.listener;
|
||||
}
|
||||
};
|
||||
|
||||
CSSAnimation.prototype.completionFunctionForAnimationName = function(aName)
|
||||
{
|
||||
@@ -222,18 +245,20 @@ CSSAnimation.prototype.completionFunctionForAnimationName = function(aName)
|
||||
while (count--)
|
||||
{
|
||||
var anim = propanims[count];
|
||||
if (anim.name == aName)
|
||||
|
||||
if (anim.name === aName)
|
||||
return anim.completionfunction;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
CSSAnimation.prototype.addAnimationEndEventListener = function()
|
||||
{
|
||||
var listener = this.endEventListener();
|
||||
|
||||
this.target.addEventListener(ANIMATION_END_EVENT_NAME, listener, false);
|
||||
}
|
||||
};
|
||||
|
||||
CSSAnimation.prototype.setTargetStyleProperties = function()
|
||||
{
|
||||
@@ -248,7 +273,7 @@ CSSAnimation.prototype.setTargetStyleProperties = function()
|
||||
|
||||
// http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css3-animations-the-hiccups-and-bugs-youll-want-to-avoid/
|
||||
style.setProperty("-webkit-backface-visibility", "hidden");
|
||||
}
|
||||
};
|
||||
|
||||
CSSAnimation.prototype.buildDOMElements = function()
|
||||
{
|
||||
@@ -259,11 +284,11 @@ CSSAnimation.prototype.buildDOMElements = function()
|
||||
this.setTargetStyleProperties();
|
||||
|
||||
this.didBuildDOMElements = true;
|
||||
}
|
||||
};
|
||||
|
||||
CSSAnimation.prototype.start = function()
|
||||
{
|
||||
if (this.propertyanimations.length == 0 || this.islive)
|
||||
if (this.propertyanimations.length === 0 || this.islive)
|
||||
return false;
|
||||
|
||||
if (!this.didBuildDOMElements)
|
||||
@@ -274,11 +299,4 @@ CSSAnimation.prototype.start = function()
|
||||
this.islive = true;
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
var removeFromParent= function(aNode)
|
||||
{
|
||||
var parentNode = aNode.parentNode;
|
||||
if (parentNode)
|
||||
parentNode.removeChild(aNode);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -19,7 +19,7 @@ var ANIMATIONS_NAMES = ["Fade In", "Fade Out", "Background Color", "Frame Origin
|
||||
@outlet CPBox group1Box;
|
||||
@outlet CPBox group2Box;
|
||||
|
||||
@outlet CPView animationSandbox;
|
||||
@outlet AnimationSandbox animationSandbox;
|
||||
|
||||
CPView leftView;
|
||||
CPView rightView;
|
||||
@@ -37,6 +37,7 @@ var ANIMATIONS_NAMES = ["Fade In", "Fade Out", "Background Color", "Frame Origin
|
||||
|
||||
CPString timingFunction1 @accessors;
|
||||
CPString timingFunction2 @accessors;
|
||||
BOOL periodicFrameUpdates;
|
||||
}
|
||||
|
||||
- (id)init
|
||||
@@ -63,6 +64,8 @@ var ANIMATIONS_NAMES = ["Fade In", "Fade Out", "Background Color", "Frame Origin
|
||||
selectedTimingFunction1 = 1;
|
||||
selectedTimingFunction2 = 1;
|
||||
|
||||
periodicFrameUpdates = NO;
|
||||
|
||||
return self;
|
||||
}
|
||||
|
||||
@@ -186,6 +189,7 @@ var ANIMATIONS_NAMES = ["Fade In", "Fade Out", "Background Color", "Frame Origin
|
||||
{
|
||||
[self setupGroup1:nil];
|
||||
[self setupGroup2:nil];
|
||||
[animationSandbox setNeedsDisplay:YES];
|
||||
}
|
||||
/*
|
||||
- (IBAction)addSubview:(id)sender
|
||||
@@ -233,6 +237,7 @@ var ANIMATIONS_NAMES = ["Fade In", "Fade Out", "Background Color", "Frame Origin
|
||||
size.width += 100;
|
||||
size.height += 100;
|
||||
|
||||
[[aView animator] setWantsPeriodicFrameUpdates:periodicFrameUpdates];
|
||||
[[aView animator] setFrame:frame];
|
||||
return;
|
||||
}
|
||||
@@ -242,6 +247,7 @@ var ANIMATIONS_NAMES = ["Fade In", "Fade Out", "Background Color", "Frame Origin
|
||||
[[aView animations] setObject:[self bounceAnimation:aView] forKey:@"frameOrigin"];
|
||||
|
||||
var origin = CGPointMakeCopy([aView frameOrigin]);
|
||||
[[aView animator] setWantsPeriodicFrameUpdates:periodicFrameUpdates];
|
||||
[[aView animator] setFrameOrigin:origin];
|
||||
}
|
||||
else if ([enabledIndexes containsIndex:3])
|
||||
@@ -251,6 +257,7 @@ var ANIMATIONS_NAMES = ["Fade In", "Fade Out", "Background Color", "Frame Origin
|
||||
var origin = CGPointMakeCopy([aView frameOrigin]);
|
||||
origin.x +=550;
|
||||
origin.y +=300;
|
||||
[[aView animator] setWantsPeriodicFrameUpdates:periodicFrameUpdates];
|
||||
[[aView animator] setFrameOrigin:origin];
|
||||
}
|
||||
|
||||
@@ -315,10 +322,10 @@ var ANIMATIONS_NAMES = ["Fade In", "Fade Out", "Background Color", "Frame Origin
|
||||
easein = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn],
|
||||
easeout = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
|
||||
|
||||
[anim setKeyTimes:[0, 0.25, 0.5, 0.75, 1]];
|
||||
[anim setKeyTimes:[0, 0.2, 0.3, 0.5, 0.7, 0.8]];
|
||||
var origin = CGPointMakeCopy([aView frameOrigin]);
|
||||
[anim setValues:[origin, CGPointMake(origin.x, origin.y + 50), origin, CGPointMake(origin.x, origin.y + 25), origin]];
|
||||
[anim setTimingFunctions:[easeout, easein, easeout, easein]];
|
||||
[anim setValues:[origin, CGPointMake(origin.x, origin.y + 200), origin, CGPointMake(origin.x, origin.y + 100), origin, CGPointMake(origin.x, origin.y + 50)]];
|
||||
[anim setTimingFunctions:[easeout, easein, easeout, easein, easeout]];
|
||||
|
||||
return anim;
|
||||
}
|
||||
@@ -352,6 +359,7 @@ var ANIMATIONS_NAMES = ["Fade In", "Fade Out", "Background Color", "Frame Origin
|
||||
if (leftView)
|
||||
{
|
||||
[leftView setFrame:CGRectMake(0, 0, 200, 200)];
|
||||
[leftView setTag:1];
|
||||
[animationSandbox addSubview:leftView];
|
||||
}
|
||||
|
||||
@@ -374,11 +382,15 @@ var ANIMATIONS_NAMES = ["Fade In", "Fade Out", "Background Color", "Frame Origin
|
||||
if (rightView)
|
||||
{
|
||||
[rightView setFrame:CGRectMake(250, 0, 200, 200)];
|
||||
[rightView setTag:2];
|
||||
[animationSandbox addSubview:rightView];
|
||||
}
|
||||
|
||||
if (leftView)
|
||||
{
|
||||
[leftView setTag:1];
|
||||
[animationSandbox addSubview:leftView];
|
||||
}
|
||||
|
||||
if (hasSubviews)
|
||||
[self addSubviewsToView:rightView autoLayout:!customLayout customDrawSubviews:NO];
|
||||
@@ -453,6 +465,12 @@ var ANIMATIONS_NAMES = ["Fade In", "Fade Out", "Background Color", "Frame Origin
|
||||
return self;
|
||||
}
|
||||
|
||||
- (void)setFrameOrigin:(CGPoint)anOrigin
|
||||
{
|
||||
[super setFrameOrigin:anOrigin];
|
||||
[[self superview] setNeedsDisplay:YES];
|
||||
}
|
||||
|
||||
@end
|
||||
|
||||
@implementation DrawView : CPView
|
||||
@@ -530,4 +548,27 @@ var ANIMATIONS_NAMES = ["Fade In", "Fade Out", "Background Color", "Frame Origin
|
||||
}];
|
||||
}
|
||||
|
||||
@end
|
||||
@end
|
||||
|
||||
@implementation AnimationSandbox : CPView
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
- (void)drawRect:(CGRect)aRect
|
||||
{
|
||||
if ([[self subviews] count] < 2)
|
||||
return;
|
||||
|
||||
var context = [[CPGraphicsContext currentContext] graphicsPort],
|
||||
leftViewCenter = [[self viewWithTag:1] center],
|
||||
rightViewCenter = [[self viewWithTag:2] center];
|
||||
|
||||
CGContextBeginPath(context);
|
||||
CGContextMoveToPoint(context, leftViewCenter.x, leftViewCenter.y);
|
||||
CGContextAddLineToPoint(context, rightViewCenter.x, rightViewCenter.y);
|
||||
CGContextSetLineWidth(context, 2);
|
||||
CGContextStrokePath(context);
|
||||
}
|
||||
|
||||
@end
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user