Skip to content

Instantly share code, notes, and snippets.

@Me1000
Created April 22, 2011 18:08
Show Gist options
  • Save Me1000/937268 to your computer and use it in GitHub Desktop.
Save Me1000/937268 to your computer and use it in GitHub Desktop.
Pretty window animations for Cappuccino CPWindow.
/*!
Created by Randy Luecke April 22nd 2011
Copyright RCLConcepts, LLC.
All right reserved.
This code is available under the MIT license.
*/
/*!
Window Animations:
Usage: This category extends CPWindow to allow for
prettier open and close animations.
You can specify where you want the animation to originate from,
and the speed you want the animation to happen.
By defaut the animation is 230ms long and originates from the
center of the window.
*/
CPWindowAnimationCornerTopLeft = "0% 0%";
CPWindowAnimationCornerTopCenter = "50% 0%";
CPWindowAnimationCornerTopRight = "100% 0%";
CPWindowAnimationCornerMiddleLeft = "0% 50%";
CPWindowAnimationCornerMiddleCenter = "50% 50%";
CPWindowAnimationCornerMiddleRight = "100% 50%";
CPWindowAnimationCornerBottomLeft = "0% 100%";
CPWindowAnimationCornerBottomCenter = "50% 100%";
CPWindowAnimationCornerBottomRight = "100% 100%";
@implementation CPWindow (OpenCloseAnimations)
/*!
The length of the animation. Values in ms. This defaults to 230ms;
*/
- (void)setAnimationLength:(float)aDuration
{
self.animationLength = aDuration;
}
/*!
Set the corner from which you want to animate from.
This defaults to the center
*/
- (void)setAnimationLocation:(WindowAnimationCorner)aCorner
{
self.animationOrigin = aCorner;
}
- (void)orderFontWithAnimation:(id)sender
{
[self orderFront:self];
var time = self.animationLength || "230",
corner = self.animationOrigin || CPWindowAnimationCornerMiddleCenter;
// apply the transforms
_DOMElement.style.WebkitTransitionDuration = time + "ms";
_DOMElement.style.WebkitTransitionTimingFunction = "ease-in-out";
_DOMElement.style.WebkitTransitionProperty = "-webkit-transform, opacity";
_DOMElement.style.WebkitTransformOrigin = corner;
_DOMElement.style.MozTransitionDuration = time + "ms";;
_DOMElement.style.MozTransitionTimingFunction = "ease-in-out";
_DOMElement.style.MozTransitionProperty = "-moz-transform, opacity";
_DOMElement.style.MozTransformOrigin = corner;
_DOMElement.style.transitionDuration = time + "ms";;
_DOMElement.style.transitionTimingFunction = "ease-in-out";
_DOMElement.style.transitionProperty = "transform, opacity";
_DOMElement.style.transformOrigin = corner;
// set initial value
_DOMElement.style.WebkitTransform = "scale(0)";
_DOMElement.style.MozTransform = "scale(0)";
_DOMElement.style.transform = "scale(0)";
_DOMElement.style.opacity = 0;
// animate it
window.setTimeout(function(){
// the _DOMElement is almost always 1x1px so we need to fix that.
_DOMElement.style.width = _frame.size.width + "px";
_DOMElement.style.height = _frame.size.height + "px";
_DOMElement.style.WebkitTransform = "scale(1)";
_DOMElement.style.MozTransform = "scale(1)";
_DOMElement.style.transform = "scale(1)";
_DOMElement.style.opacity = 1;
// clean that back up...
window.setTimeout(function(){
_DOMElement.style.width = "1px";
_DOMElement.style.height = "1px";
_DOMElement.style.WebkitTransitionDuration = "";
_DOMElement.style.WebkitTransitionTimingFunction = "";
_DOMElement.style.WebkitTransitionProperty = "";
_DOMElement.style.WebkitTransformOrigin = "";
_DOMElement.style.MozTransitionDuration = "";
_DOMElement.style.MozTransitionTimingFunction = "";
_DOMElement.style.MozTransitionProperty = "";
_DOMElement.style.MozTransformOrigin = "";
_DOMElement.style.transitionDuration = "";
_DOMElement.style.transitionTimingFunction = "";
_DOMElement.style.transitionProperty = "";
_DOMElement.style.transformOrigin = "";
}, self.animationLength);
},0);
}
- (void)orderOutWithAnimation:(id)sender
{
var time = self.animationLength || "230",
corner = self.animationOrigin || CPWindowAnimationCornerMiddleCenter;
// apply the transforms
_DOMElement.style.WebkitTransitionDuration = time + "ms";;
_DOMElement.style.WebkitTransitionTimingFunction = "ease-in-out";
_DOMElement.style.WebkitTransitionProperty = "-webkit-transform, opacity";
_DOMElement.style.WebkitTransformOrigin = corner;
_DOMElement.style.MozTransitionDuration = time + "ms";;
_DOMElement.style.MozTransitionTimingFunction = "ease-in-out";
_DOMElement.style.MozTransitionProperty = "-moz-transform, opacity";
_DOMElement.style.MozTransformOrigin = corner;
_DOMElement.style.transitionDuration = time + "ms";;
_DOMElement.style.transitionTimingFunction = "ease-in-out";
_DOMElement.style.transitionProperty = "transform, opacity";
_DOMElement.style.transformOrigin = corner;
// set initial value
_DOMElement.style.WebkitTransform = "scale(1)";
_DOMElement.style.MozTransform = "scale(1)";
_DOMElement.style.transform = "scale(1)";
_DOMElement.style.opacity = 1;
// animate it
window.setTimeout(function(){
// the _DOMElement is almost always 1x1px so we need to fix that.
_DOMElement.style.width = _frame.size.width + "px";
_DOMElement.style.height = _frame.size.height + "px";
_DOMElement.style.WebkitTransform = "scale(0)";
_DOMElement.style.MozTransform = "scale(0)";
_DOMElement.style.transform = "scale(0)";
_DOMElement.style.opacity = 0;
// clean that back up...
window.setTimeout(function(){
_DOMElement.style.width = "1px";
_DOMElement.style.height = "1px";
_DOMElement.style.WebkitTransitionDuration = "";
_DOMElement.style.WebkitTransitionTimingFunction = "";
_DOMElement.style.WebkitTransitionProperty = "";
_DOMElement.style.WebkitTransformOrigin = "";
_DOMElement.style.MozTransitionDuration = "";
_DOMElement.style.MozTransitionTimingFunction = "";
_DOMElement.style.MozTransitionProperty = "";
_DOMElement.style.MozTransformOrigin = "";
_DOMElement.style.transitionDuration = "";
_DOMElement.style.transitionTimingFunction = "";
_DOMElement.style.transitionProperty = "";
_DOMElement.style.transformOrigin = "";
[self orderOut:self];
}, self.animationLength);
},0);
}
@end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment