Skip to content

Instantly share code, notes, and snippets.

@brentonhouse

brentonhouse/starwars.js Secret

Last active May 1, 2020
Embed
What would you like to do?
// Android does not support Matrix3D so it will use rotationX instead
if (OS_IOS) {
// this code rotates the text and changes perspective
let matrix = Ti.UI.createMatrix3D();
// Alter the perspective of the view
matrix.m34 = -1 / 200;
// Rotate the image around the x-axis
matrix = matrix.rotate(50, 1, 0, 0);
// Scale the image down to fit
matrix = matrix.scale(0.7, 0.7);
// Apply the transformation
$.wrapper.transform = matrix;
// This code moves the background image further back
// on z-index so that text does not go behind image.
let matrix2 = Ti.UI.createMatrix3D();
// Move the background image further back (z-axis)
matrix2 = matrix2.translate(0, 0, -100);
// Apply the transformation to the ImageView
$.backgroundImage.transform = matrix2;
}
// Preload the intro music
const music = Titanium.Media.createSound({
url: '/audio/starwars-intro.mp3',
preload: true,
});
const executeAnimation1 = () => {
const animation = Ti.UI.createAnimation({
opacity: 1,
duration: 6000,
curve: Ti.UI.ANIMATION_CURVE_LINEAR,
});
// Set the visibility of the different views
$.galaxy.visible = true;
$.starwars.visible = false;
$.wrapper.visible = false;
$.backgroundImage.visible = false;
animation.addEventListener('complete', function onComplete1() {
animation.removeEventListener('complete', onComplete1);
// Execute the next animation sequence
executeAnimation2();
});
// Begin showing first view
$.galaxy.animate(animation);
};
const executeAnimation2 = () => {
// scale the title text out and then bring it back in
const matrix = Ti.UI.createMatrix2D({ scale: 14 });
$.starwars.transform = matrix;
const matrix2 = Ti.UI.createMatrix2D({ scale: 1 });
const animation = Ti.UI.createAnimation({
opacity: 1,
duration: 7000,
curve: Ti.UI.ANIMATION_CURVE_LINEAR,
transform: matrix2,
});
// Set the visibility of the different views
$.galaxy.visible = false;
$.starwars.visible = true;
$.wrapper.visible = false;
$.backgroundImage.visible = false;
animation.addEventListener('complete', function onComplete2() {
animation.removeEventListener('complete', onComplete2);
// Wait for a bit before executing the next animation sequence
_.delay(executeAnimation3, 2000);
});
// Start playing the intro music here
music.play();
// Begin showing the title screen
$.starwars.animate(animation);
};
const executeAnimation3 = () => {
// Animation to scroll the text up
const animation = Ti.UI.createAnimation({
top: -1400,
duration: 120000,
curve: Ti.UI.ANIMATION_CURVE_LINEAR,
});
// Animation to show the background image (stars)
const animation2 = Ti.UI.createAnimation({
opacity: 0.8,
duration: 10000,
curve: Ti.UI.ANIMATION_CURVE_LINEAR,
});
// Set the visibility of the different views
$.galaxy.visible = false;
$.starwars.visible = false;
$.wrapper.visible = true;
$.backgroundImage.visible = true;
// Begin showing the background stars
$.backgroundImage.animate(animation2);
// Start the text crawl
$.intro.animate(animation);
};
// Execute the first animation sequence
executeAnimation1();
<Alloy>
<Window
id="window"
layout="composite"
backgroundColor="black"
>
<ImageView
id="backgroundImage"
image="/images/starwars-bg-vertical.jpg"
height="fill"
zIndex="100"
visible="false"
opacity="0"
/>
<View
id="wrapper"
layout="vertical"
ios:top="-400"
android:top="0"
rotationX="40"
height="fill"
visible="false"
zIndex="200"
>
<Label
id="intro"
font.fontWeight="bold"
font.fontSize="20"
color="yellow"
android:textAlign="Ti.UI.TEXT_ALIGNMENT_CENTER"
ios:textAlign="Ti.UI.TEXT_ALIGNMENT_JUSTIFY"
verticalAlign="top"
ios:top="900"
android:top="500"
ios:width="40%"
android:width="50%"
backgroundColor="transparent"
>
EPISODE MMXX
It is a period of confusion. Medical personnel, striking from hospitals and makeshift camps, have won their first victory against the evil Coronavirus Empire.
During the battle, Medical heroes managed to find the secret plans for the Empire's ultimate weapon, the FEAR-19, a weapon with enough power to destroy an entire planet.
Pursued by the Empire's sinister viruses, our heroes race against time to ensure that everyone can be trained in the secret art of hand washing and good hygiene and restore freedom to the galaxy....
</Label>
</View>
<Label
id="galaxy"
text="A long time ago in a galaxy far, far away...."
visible="false"
zIndex="300"
color="#33b2c5"
font.fontSize="35"
left="8%"
right="8%"
opacity="0"
/>
<Label
id="starwars"
text="may the 4th\n2020"
visible="false"
font.fontFamily="StarJediHollow"
font.fontSize="40"
color="yellow"
zIndex="400"
textAlign="center"
font.fontWeight="bold"
opacity="0"
/>
</Window>
</Alloy>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment