Android - Lecture 10 - Animation
-
Upload
leo-joseph -
Category
Documents
-
view
35 -
download
4
Transcript of Android - Lecture 10 - Animation
ANDROID
Animation
Basic Layout
Start by creating an app with the bare basics
A TextView
First we will fade in this TextView
Specifying your Animation
Create an anim folder under your res directory to
hold your animation files
Then create a new fade_in.xml directory
Fade In Parameters
Parameter Description
fromAlpha The initial opacity
0 is invisible. 1 is fully visible
toAlpha The ending opacity
0 is invisible. 1 is fully visible
duration How long in milliseconds the animation
takes
Applying Animation in Code
1. Create the startAnimation funciton in your
Activity
Access the TextView
Create the fade In Animation
Then start the fade In Animation applying it to the
TextView
Applying Animation in Code
Code should look as follows:
Pause and Resume
Animation can be expensive. Potentially it could
take a while, or it could take resources
Hence, we need to stop the animation when the user
requests to go to another screen, or it is interrupted
by another means
Pause Method
In the pause method you need to:
get the TextView by it’s id
call the clear animation for the TextView
Resume Method
When resume is called you want to re-run the
animation.
Add a Second Title
Fade In After a Duration
Now we will fade the second TextView in after an
amount of seconds.
Create a fade_in2.xml and add the offset property
Apply the Animation
Now apply the fade_in2.xml
Add the code to the startAnimation():
And add it to the onPause():
Add an Image
Let’s add an ImageView between the two titles.
Your page should now look as follows:
Add Custom Animation
Create a new file called custom_anim.xml
Rotating Animation
Rotating
Parameter Description
fromDegrees The degree the item starts out at
0, 360 original position, 180 flipped
toDegrees The degree the item ends out at
0, 360 original position, 180 flipped
pivotX How much it pivots around the x axis in a
percent of it’s width
pivotY How much it pivots around the Y axis in a
percent of its height
duration How long in milliseconds the animation
takes
Add Rotating to your Custom Animation
This will rotate your ImageView once it’s applied:
Apply the Animation
Now apply the custom_anim.xml
Add the code to the startAnimation():
And add it to the onPause():
Adding more Animation
Make it grow and fade in as well by adding it to
the custom_anim.xml
and it should all work
Animate all Views in a Layout
You will create a LayoutAnimationController which
you can use to animate all views within a particular
layout. e.g. Animate all items in your LinearLayout
First assign an Id to your LinearLayout
Animate all Views in a Layout …
Access the custom_anim xml and create an
Animation Object for it
Create a LayoutAnimationController based on the
Animation Object you created
Animate all Views in a Layout …
Now pick up the Linear Layout
Then apply the LayoutAnimationController to it
Full Code to Animate all Views
Code for startAnimation() <comment out previous
code>
Code to put in onPause() <comment out previous
code>
Going to next Activity
Attach an AnimationListener to listen to the end of the Animation
When the end of the animation is encountered we will proceed to the next Activity
Before proceeding make sure to create a new Activity and register it in the Manifest file
Also, take out the code to Animate all views and let’s work with the individual views.
Create an AnimationListener
When the Animation Ends end this Activity and start
the next
Attach the EventListener
We will attach the event listener to the animation
that will finish last as follows:
Then when it finishes the next screen will load