Download the free trial version
Basic4android Video
Features
Tutorials and manuals
Showcase
Screenshots

Go Back   Android Development Forum - Basic4android > Basic4android > Basic4android Getting started & Tutorials
Documentation Wiki Register Members List B4P Search Today's Posts Mark Forums Read

Basic4android Getting started & Tutorials Android development starts here. Please do not post questions in this sub-forum.

Android views animation tutorial

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 12-19-2010, 09:53 AM
Erel's Avatar
Administrator
 
Join Date: Apr 2007
Posts: 15,689
Awards Showcase
Basic4ppc Founder 
Total Awards: 1
Default Android views animation tutorial

The Animation library allows you to animate views.
These small animations are really nice and can affect the user overall impression of your application.

The attached program demonstrates the available types of animations which are:
Alpha - Causes a fading in or fading out effect.
Scale - The view's size smoothly changes.
Rotate - The view rotates.
Translate - The view moves to a different position.





Creating an animation is done in four steps:
- Declare the animation object.
- Initialize the object based on the required animation.
- Set the animation parameters (duration, repeat and repeat mode).
- Start the animation by calling Start with the target view.

In this program an animation is attached to each button as its Tag value.
All the buttons click events are caught with Sub Button_Click.
In this sub we take the attached animation from the sender button and start it.
The code for the first five animations and buttons:
Code:
    Dim a1, a2, a3, a4, a5 As Animation
Activity.LoadLayout(
"1")
a1.InitializeAlpha(
""10)
Button1.Tag = a1
a2.InitializeRotate(
""0180)
Button2.Tag = a2
a3.InitializeRotateCenter(
""0180, Button3)
Button3.Tag = a3
a4.InitializeScale(
""1100)
Button4.Tag = a4
a5.InitializeScaleCenter(
""1100, Button4)
Button5.Tag = a5
Dim animations() As Animation
animations = 
Array As Animation(a1, a2, a3, a4, a5)
For i = 0 To animations.Length - 1
    animations(i).Duration = 
1000
    animations(i).RepeatCount = 
1
    animations(i).RepeatMode = animations(i).REPEAT_REVERSE
Next
We are using a temporary array to avoid writing duplicate code.
Setting RepeatCount to 1 means that each animation will play twice.
The REPEAT_REVERSE means that the second time the animation will play it will play backwards.

The animation attached to Button6 is made of 4 chained animations. The button moves down, then left, then up and then right back to the start.
We are using these animations:
Code:
    a6.InitializeTranslate("Animation"000dip200dip'we want to catch the AnimationEnd event for these animations
a7.InitializeTranslate("Animation"0dip200dip, -200dip200dip
a8.InitializeTranslate(
"Animation", -200dip200dip, -200dip0dip
a9.InitializeTranslate(
"Animation", -200dip0dip0dip0dip)
Button6.Tag = a6
animations = 
Array As Animation(a6, a7, a8, a9)
For i = 0 To animations.Length - 1
    animations(i).Duration = 
500
Next
In this case we do not want to repeat each animation.

Starting the animations:
Code:
Sub Button_Click
    
Dim b As Button
    b = 
Sender
    
'Safety check. Not really required in this case.
    If Not(b.Tag Is AnimationThen Return
    
Dim a As Animation
    a = b.Tag
    a.Start(b)
End Sub
Last part if the usage of AnimationEnd event to start the next animation for Button6:
Code:
Sub Animation_AnimationEnd
    
If Sender = a6 Then
        a7.Start(Button6)
    
Else If Sender = a7 Then
        a8.Start(Button6)
    
Else If Sender = a8 Then
        a9.Start(Button6)
    
End If
End Sub
This program looks really nice on a real device. It also works on the emulator but the animations are less smooth.
Attached Files
File Type: zip AnimationExample.zip (10.6 KB, 1188 views)
File Type: apk Animation.apk (77.1 KB, 547 views)
Reply With Quote
  #2 (permalink)  
Old 12-22-2010, 04:41 AM
Basic4ppc Expert
 
Join Date: May 2008
Posts: 550
Default

I use Animation library to animate the activity (main layout, screen size 480x800)

Quote:
Ani.InitializeScaleCenter("", 0,0,1,1, Activity)
It works but not scale from center, it's inclined to the right. Can you check again?
__________________
I'm not good at English, please understand. Thank you.
Reply With Quote
  #3 (permalink)  
Old 12-22-2010, 07:26 AM
Erel's Avatar
Administrator
 
Join Date: Apr 2007
Posts: 15,689
Awards Showcase
Basic4ppc Founder 
Total Awards: 1
Default

Again you are correct. This bug is now fixed: http://www.basic4ppc.com/forum/addit...html#post40138
Reply With Quote
  #4 (permalink)  
Old 12-28-2010, 01:53 AM
Junior Member
 
Join Date: Mar 2010
Posts: 28
Default

Good library, but is there a way to rotate an object (view) around itself for a certain angel (say 45 degrees) and keep it rotated (I don’t want the object to get back to its initial state)? Thanks
Reply With Quote
  #5 (permalink)  
Old 12-28-2010, 05:42 AM
Erel's Avatar
Administrator
 
Join Date: Apr 2007
Posts: 15,689
Awards Showcase
Basic4ppc Founder 
Total Awards: 1
Default

For now you can't keep it rotated.
You can use the Canvas object to draw rotated bitmaps and rotated drawables.
Reply With Quote
  #6 (permalink)  
Old 12-31-2010, 03:07 PM
Junior Member
 
Join Date: Dec 2010
Posts: 10
Default

Is there any way to combine the animations ?

Say to move to the right and fade away ?
Reply With Quote
  #7 (permalink)  
Old 12-31-2010, 03:18 PM
Junior Member
 
Join Date: Dec 2010
Posts: 10
Default

Quote:
Originally Posted by John de Murga View Post
Is there any way to combine the animations ?

Say to move to the right and fade away ?
Actually, on reading the SDK docs ... I am assume you are using this ?

2D Graphics | Android Developers

Even if I could use the xml as in "AnimationUtils.loadAnimation" that would be awesome.

Then again I guess I can use the reflection API to do this ...
Reply With Quote
  #8 (permalink)  
Old 12-31-2010, 05:52 PM
Erel's Avatar
Administrator
 
Join Date: Apr 2007
Posts: 15,689
Awards Showcase
Basic4ppc Founder 
Total Awards: 1
Default

Yes, this is the package used. I did intent to include AnimationSet object that will allow animating multiple animations concurrently. However both myself and others have found it to be too buggy at the moment.

It seems like the complete Android animations package still require some work. The current B4A Animations library is more than a wrapper as it works around an underlying bug related to the views refreshing.
Reply With Quote
  #9 (permalink)  
Old 04-25-2011, 08:03 PM
Standa's Avatar
Junior Member
 
Join Date: May 2007
Location: Czech Republic
Posts: 38
Send a message via MSN to Standa
Awards Showcase
Beta Tester 
Total Awards: 1
Default

Quote:
Originally Posted by ashrafidkaidek View Post
Good library, but is there a way to rotate an object (view) around itself for a certain angel (say 45 degrees) and keep it rotated (I don’t want the object to get back to its initial state)? Thanks
Quote:
Originally Posted by Erel View Post
For now you can't keep it rotated.
You can use the Canvas object to draw rotated bitmaps and rotated drawables.
I want to use this library for animated resizing of button. I think it is the same problem as with rotating, so it is not possible - view is always going back to its initial size/position, right?
Will it be possible in future?
__________________
BlackBerry 8900, Dell Streak, SE MBW-150
Reply With Quote
  #10 (permalink)  
Old 04-26-2011, 05:52 AM
Erel's Avatar
Administrator
 
Join Date: Apr 2007
Posts: 15,689
Awards Showcase
Basic4ppc Founder 
Total Awards: 1
Default

The proper way to do it is to use the EndAnimation event and set the button position and size manually.
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Android Serial tutorial Erel Basic4android Getting started & Tutorials 78 05-20-2012 05:39 AM
Android JSON tutorial Erel Basic4android Getting started & Tutorials 5 05-07-2012 03:33 AM
Adding / Removing views diego Basic4android Updates and Questions 13 05-11-2011 06:31 AM
DirectX For 3D Views ceaser Chit Chat 4 12-19-2008 07:07 AM
Newbie: animation texaspoker11 Questions (Windows Mobile) 3 11-05-2008 05:43 PM


All times are GMT. The time now is 10:25 AM.


Powered by vBulletin® Version 3.6.12
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.3.0