Dear Geek,
I really want to try to add some 3d animations to my iOS and Android mobile app built with Titanium SDK. Specifically, I am trying to recreate the Star Wars intro with the scrolling text for May the 4th. I need it to work on both iOS and Android so any guidance you can give me would be very helpful!
— TITANIUM PADAWAN
Dear Padawan,
Do or do not. There is no try! 😃🤓
Titanium Mobile SDK supports all sorts of animations and since today is May the 4th, I will do you one better and not only show you how to do the animations BUT ALSO provide you with the code you need to recreate the Star Wars intro in Titanium Mobile for BOTH iOS and Android!
TL;DR
If you are in a hurry, you can jump to the solution where I provide the source code for a working Titanium app for both iOS and Android, but I encourage you to look at some of the explanations below to help understand what the code is doing.
Check out a demo video of the completed Titanium app with the Star Wars intro!
Taking a look at the code...
Understanding Animations
There are couple things to understand about animations and the differences in the underlying platforms (iOS and Android). iOS supports 3D Matrix type animations whereas Android only supports 2D Matrix animations. That doesn't mean that we can't do what you are looking for. It just means we need to use different functions for each. Here are some of the most common classes/properties used with animating a view.
-
Titanium.UI.Matrix3D
- Apply a 3D Matrix to a view in iOS -
Titanium.UI.Matrix2D
- Apply a 2D Matrix to a view in iOS and Android -
Ti.UI.Animation
- Apply one or more animations to any view in iOS and Android. -
rotationX
- Property available on every Android view that allows rotation around x-axis -
rotationY
- Property available on every Android view that allows rotation around y-axis
Star Wars: The Code
As you know, Titanium Mobile apps for iOS and Android are cross-platform native which means they are written in JavaScript and XML and then a native app (in Objective-C/Swift or Java) is created at compile-time. To accomplish the task of creating the Star Wars Intro
, We only need one view and controller.
There are 3 basic views that we are creating:
- The blue text that starts with "A long time ago in a galaxy..."
- The title (May the 4th 2020 -- for this app)
- The yellow text that scrolls up and back
Everything else is pretty much just the standard, default app that you get when you create a new cross-platform native mobile app using Titanium!
Star Wars: The View
The view starwars.xml
will be used to define the views that we will need to create for this. Notice that some of the views are hidden (visibility = false) so that they can be shown later in the sequence.
<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> |
Star Wars: The Controller
The controller starwars.js
is a JavaScript file where we define and execute the animations. They are broken into 3 different functions, with each one kicking off the next after they are complete.
// 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(); | |
Solution
You can find the code for a complete working mobile application for iOS and Android that includes the Star Wars intro here! Enjoy and May the 4th be with you always!!
brentonhouse / may-the-4th
May the 4th be with you always! - Star Wars intro for iOS and Android mobile app
May the 4th be with you!
How do I add the Star Wars intro to my iOS and Android mobile apps?
Dear Geek,
I really want to try to add some 3D animations to my iOS and Android mobile app built with Titanium SDK. Specifically, I am trying to recreate the Star Wars intro with the scrolling text for May the 4th. I need it to work on both iOS and Android so any guidance you can give me would be very helpful!
— TITANIUM PADAWAN
Blog post
Read the accompanying blog post that talks about using Titanium to build a Star Wars intro in a cross-platform native mobile app for iOS and Android.
Demo video of mobile app with Star Wars intro
Solution
You can find the code for a complete working mobile application for iOS and Android that includes the Star Wars intro here! Enjoy and May…
https://github.com/brentonhouse/may-the-4th
About Brenton House |
---|
With 25 years of experience in the development world, Brenton House leads Developer Relations for Axway's API and mobile products, He has worked closely with many clients across various industries including broadcasting, advertising, retail, financial services, transportation, publishing, supply chain, and non-profits. Brenton's passion for everything API and mobile combined with his strategy and design experience, has enabled him to help developers create captivating products that inspire and delight audiences. |
Ask-a-Geek questions are answered by Brenton House, an API and Mobile geek who has been doing dev work for 25+ years.
Top comments (0)