Created
July 1, 2014 13:55
-
-
Save philsmithsonuk/3ee8de53c410d4ffbebb to your computer and use it in GitHub Desktop.
Given a sentence as a string, fade in each word and play a sound when the word has been faded in. Titanium Appcelerator.
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
//import builtin alloy animations | |
var animation = require('alloy/animation'); | |
var wordString = "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program"; | |
var wordArray = wordString.split(" "); | |
var lblArray = []; | |
var lbl = null; | |
//Generate Label element for each word | |
for (var i in wordArray) | |
{ | |
//create label, set text and hide label | |
lbl = Ti.UI.createLabel({ | |
text: " "+wordArray[i], | |
opacity: 0 | |
}); | |
//store in label array which we'll use later for the fadeIn affect | |
lblArray.push(lbl); | |
//add label to view | |
$.paragraph.add(lbl); | |
} | |
//Play sound, called when fade in on label has finished | |
function playSound(){ | |
sound = Titanium.Media.createSound({url:"/bell-ring-01.mp3"}); | |
sound.play(); | |
} | |
//counter used for tracking which label we're fading in | |
var x = 0; | |
animation.fadeIn(lblArray[0], 300, fadeInNext); | |
function fadeInNext(){ | |
//increment current label counter | |
x = x+1; | |
//Make sure we don't try to add more labels than there are | |
if(x < lblArray.length){ | |
//playSound(); //commented this out, it's kind of annoying | |
animation.fadeIn(lblArray[x], 500, | |
fadeInNext | |
); | |
} | |
} | |
$.container.open(); |
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
<Alloy> | |
<Window class="container" id="container"> | |
<View id="paragraph"> | |
</View> | |
</Window> | |
</Alloy> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment