Created
February 19, 2013 20:22
-
-
Save dawsontoth/4989555 to your computer and use it in GitHub Desktop.
CommonJS module to make animations easier, like fading stuff out. Tested on iOS, Android, and Mobile Web.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
State. | |
*/ | |
var simplify = Ti.Platform.osname === 'mobileweb'; | |
var currentFlashes = {}; | |
/* | |
Public API. | |
*/ | |
exports.chainAnimateForever = chainAnimateForever; | |
exports.chainAnimate = chainAnimate; | |
exports.toggleFlashing = toggleFlashing; | |
exports.flash = flash; | |
exports.shake = shake; | |
exports.popOut = popOut; | |
exports.popIn = popIn; | |
exports.fade = fade; | |
exports.fadeOutAndRemove = fadeOutAndRemove; | |
exports.crossFade = crossFade; | |
/* | |
Implementation. | |
*/ | |
function crossFade(viewFadingOut, viewFadingIn, duration, callback) { | |
if (simplify) { | |
viewFadingOut && (viewFadingOut.opacity = 0); | |
viewFadingIn && (viewFadingIn.opacity = 1); | |
callback && callback(); | |
return; | |
} | |
if (viewFadingOut) { | |
viewFadingOut.animate({ | |
opacity: 0, | |
duration: duration || 300 | |
}); | |
} | |
if (viewFadingIn) { | |
viewFadingIn.animate({ | |
opacity: 1, | |
duration: duration || 300 | |
}); | |
} | |
if (callback) { | |
setTimeout(callback, duration + 300); | |
} | |
} | |
function fadeOutAndRemove(view, container, duration, callback) { | |
if (view && container) { | |
if (simplify) { | |
view.opacity = 0; | |
container.remove(view); | |
callback && callback(); | |
return; | |
} | |
view.animate({ | |
opacity: 0, | |
duration: duration || 300 | |
}, function() { | |
container.remove(view); | |
callback && callback(); | |
container = view = duration = callback = null; | |
}); | |
} | |
} | |
function fade(view, opacity, duration, delay, callback) { | |
if (!view) { | |
return; | |
} | |
if (simplify) { | |
view.opacity = opacity || 0; | |
callback && callback(); | |
return; | |
} | |
if (delay && delay > 0) { | |
setTimeout(function() { | |
view.animate({ | |
opacity: opacity || 0, | |
duration: duration || 300 | |
}); | |
callback && callback(); | |
view = null; | |
}, delay); | |
} else { | |
view.animate({ | |
opacity: opacity || 0, | |
duration: duration || 300 | |
}); | |
callback && callback(); | |
} | |
} | |
function popIn(view, sourceCenter, dialogCenter, callback) { | |
if (simplify) { | |
callback && callback(); | |
return; | |
} | |
view.transform = (sourceCenter && dialogCenter) | |
? Ti.UI.create2DMatrix().translate(sourceCenter.x - dialogCenter.x, sourceCenter.y - dialogCenter.y).scale(0.1, 0.1) | |
: Ti.UI.create2DMatrix().scale(0, 0); | |
var animate1 = Ti.UI.createAnimation({ | |
transform: Ti.UI.create2DMatrix().scale(1.1, 1.1), | |
duration: 300 | |
}); | |
var animate2 = Ti.UI.createAnimation({ | |
transform: Ti.UI.create2DMatrix().scale(0.94, 0.94), | |
duration: 100 | |
}); | |
var animate3 = Ti.UI.createAnimation({ | |
transform: Ti.UI.create2DMatrix(), | |
duration: 150 | |
}); | |
exports.chainAnimate(view, Ti.Platform.name === 'iPhone OS' | |
? [ animate1, animate2, animate3 ] // iOS bounces when popping things in | |
: [ animate3 ], callback); // Others just pops them straight to size. | |
} | |
function popOut(view, sourceCenter, dialogCenter) { | |
if (simplify) { | |
view.transform = Ti.UI.create2DMatrix().scale(0, 0); | |
return; | |
} | |
view.animate(Ti.UI.createAnimation({ | |
transform: (sourceCenter && dialogCenter) | |
? Ti.UI.create2DMatrix().translate(sourceCenter.x - dialogCenter.x, sourceCenter.y - dialogCenter.y).scale(0.1, 0.1) | |
: Ti.UI.create2DMatrix().scale(0, 0), | |
duration: 200 | |
})); | |
} | |
function shake(view, delay) { | |
var shake1 = Ti.UI.createAnimation({ | |
transform: Ti.UI.create2DMatrix().translate(5, 0), | |
duration: 100 | |
}); | |
var shake2 = Ti.UI.createAnimation({ | |
transform: Ti.UI.create2DMatrix().translate(-5, 0), | |
duration: 100 | |
}); | |
var shake3 = Ti.UI.createAnimation({ | |
transform: Ti.UI.create2DMatrix().translate(5, 0), | |
duration: 80 | |
}); | |
var shake4 = Ti.UI.createAnimation({ | |
transform: Ti.UI.create2DMatrix().translate(-5, 0), | |
duration: 100 | |
}); | |
var shake5 = Ti.UI.createAnimation({ | |
transform: Ti.UI.create2DMatrix(), | |
duration: 100 | |
}); | |
if (delay) { | |
setTimeout(function() { | |
exports.chainAnimate(view, [ shake1, shake2, shake3, shake4, shake5 ]); | |
view = shake1 = shake2 = shake3 = shake4 = shake5 = null; | |
}, delay); | |
} | |
else { | |
exports.chainAnimate(view, [ shake1, shake2, shake3, shake4, shake5 ]); | |
} | |
} | |
function flash(view, delay) { | |
var flash1 = Ti.UI.createAnimation({ | |
opacity: 0.7, | |
duration: 100 | |
}); | |
var flash2 = Ti.UI.createAnimation({ | |
opacity: 1, | |
duration: 100 | |
}); | |
var flash3 = Ti.UI.createAnimation({ | |
opacity: 0.7, | |
duration: 100 | |
}); | |
var flash4 = Ti.UI.createAnimation({ | |
opacity: 1, | |
duration: 100 | |
}); | |
if (delay) { | |
setTimeout(function() { | |
exports.chainAnimate(view, [ flash1, flash2, flash3, flash4 ]); | |
view = flash1 = flash2 = flash3 = flash4 = null; | |
}, delay); | |
} | |
else { | |
exports.chainAnimate(view, [ flash1, flash2, flash3, flash4 ]); | |
} | |
} | |
function toggleFlashing(on, id, view) { | |
if (on) { | |
currentFlashes[id] = setInterval(function() { | |
exports.flash(view); | |
}, 1000); | |
} | |
else { | |
clearInterval(currentFlashes[id]); | |
} | |
} | |
function chainAnimate(view, animations, callback) { | |
var animation; | |
function step() { | |
if (animation) { | |
animation.removeEventListener('complete', step); | |
animation = null; | |
} | |
if (animations.length == 0) { | |
callback && callback(); | |
view = animations = callback = step = null; | |
return; | |
} | |
animation = animations.shift(); | |
animation.addEventListener('complete', step); | |
view.animate(animation); | |
} | |
step(); | |
} | |
function chainAnimateForever(view, animations) { | |
for (var i = 0, l = animations.length; i < l; i++) { | |
animations[i].addEventListener('complete', step); | |
} | |
var currentStep = 0; | |
function step() { | |
if (currentStep === -1) { | |
return; | |
} | |
if (currentStep === animations.length) { | |
currentStep = 0; | |
} | |
view.animate(animations[currentStep]); | |
currentStep += 1; | |
} | |
function stop() { | |
for (var i = 0, l = animations.length; i < l; i++) { | |
animations[i].removeEventListener('complete', step); | |
} | |
view = animations = step = stop = currentStep = null; | |
} | |
step(); | |
return stop; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Any sample code to show how to use it?
:)