Animating Objects in Appcelerator Titanium

Animating Objects in Appcelerator Titanium

17:07 15 July in Appcelerator Titanium
0 Comments

One thing that I struggled with for awhile was animating objects within my views for Appcelerator Titanium. I wanted to get a simple image view to animate on the stage when that view was loaded onto the screen. For some reason this seemed to be hidden within the documentation of Titanium and I wanted to show you simply how this can be done

First you need to add your ImageView to the main or subclass view of Titanium. While this can be done in Classic code I am going to show you how to do this within Alloy code. Here os is my ImageView within Alloy:

 

Step 1: Adding an ImageView to your XML

You can see that I added the code to the stage using the tags. I assigned two attributes. First being the image reference so it knows where to bring in the image. I have stored this image in the assets folder and then within a folder I created called images. The PNG name is called Logo.png. I have not added any attributes to position this image yet but I did give it the second attribute which is id=”logo”. The name of the ID can really be anything you want but you do need to have it within a ID attribute. Now we are ready to add some CSS (or TSS as Titanium calls it).

Step 3: Adding TSS (or CSS) attributes to your ImageView

Now that we have the image view in place let’s go ahead and add some style attributes to that image view. Within the main TSS file for our view let’s add the following code:


"#logo":{
bottom:10,
width:"50%"
}

By added on the style elements of bottom:10 we are saying to Titanium start this image from the bottom and move it up 10px. This means no matter what the size is the logo will always be 10px up from the bottom.

Now since I may be targeting iPads and iPhones both 3.5″ sizes and 4″ sizes we may want the image to be responsive so instead of defining definite attributes of width at a certain size and height at a certain size let’s add a width of a percentage. So you can see from the above code that the logo will always be 50% of the screen size. Make sure that your actual image size is greater than what you see on the screen so once you get into larger screens like the iPad you don’t see any pixelization to your image.

Ok so we have everything set up visually, now let’s add the code to animate the logo. But before I do I want to stop and think about where and how I am wanting the logo to animate. Now this will change with every project, but let’s say we want it to start off the screen and then animate on the screen, in that case we may want to go back into the TSS and change the bottom attribute for the logo to be a negative so it starts off the screen and then we can animate it on the screen to bottom:10. So let’s start it way off the screen. Take a look at the modified TSS code and the we can move onto the JS file.


"#logo":{
bottom:-100,
width:"50%"
}

Step 3: Adding the animation code within the JS file

Now that we have the code in place to have the logo on the stage and not only that have it moved off the stage area, now we can animate the logo in when the view is launched. The Javascript file is really where you place the action of your code within Titanium Alloy. When you are working with the Classic code you are already inside a JS file so you can just place the code to animate right in the main file.

So here is the code we need to add inside of the JS file:


$.logo.animate({
bottom:10
});

We need to reference what object we are going to animate and we do that but first typing the $ then the ID name which in this case is logo and then after that we add the function of animate and within that ({}) we add what attributes of logo we are going to animate. You can have more than one attribute in there but for now I just want to animate it to the position of bottom:10 so I type that within the brackets.

That is it! I can now preview and see that my logo will animate in from the bottom to the position of bottom:10. If I want it to come in from the left or right as well I can simply add on the following:


$.logo.animate({
bottom:10,
left:10
});

That will come in from the bottom and animate along an angle to the position of left:10. I will be doing a video on this shortly but hopefully that gets you started for now.

To learn more about Appcelerator Titanium check out my courses by clicking the button below.

View Course
Be Sociable, Share!

Jeff Batt

jeff@kinetic-media.com
No Comments

Post A Comment