android10

  • Increase font size
  • Default font size
  • Decrease font size

Bounce Animation on Android

Thursday, 02 December 2010 23:38 Fernando Cejas Graphics/Audio/Video
E-mail Print
( 4 Votes )
Share
Share

Introduction

In this brief post I’ll go over how to implement an animation on some hard-coded text in an Android app. To achieve this effect, we will be using both a translate animation class and a bounce interpolator class, both provided by the Android SDK.
[Edit:] Some readers wanted to see what this effect looked like, and I was thinking the same thing when I first published this. So below is a sample of what the effect looks.
In this brief post I’ll go over how to implement an animation on some hard-coded text in an Android app. To achieve this effect, we will be using both a translate animation class and a bounce interpolator class, both provided by the Android SDK.

[Edit:] Some readers wanted to see what this effect looked like, and I was thinking the same thing when I first published this. So below is a sample of what the effect looks.




The Setup

To demonstrate a simple bounce animation, we will capture any touch events and “bounce” some hard-coded text to the touched location with a horizontal offset of 100.

To start out, we’ll create our own View to work with, called BounceView. First we create a new Android application, and then add a new class file. We inherit from View, and prepare to override the below methods.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
public class BounceView extends View {
 
    public BounceView(Context context) {
        super(context);
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
    }
 
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // TODO Auto-generated method stub
        return super.onTouchEvent(event);
    }
}

The touch event is where we will capture the location where we will insert our bounce animation. The draw event is where we will actually draw our hard-coded text.


Capturing Touch Events

In the touch event, we will save off the touched coordinates for use in the draw event. Here, we will also reset our animation, and associate said animation with our custom view. Our touch event now looks like below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
float _currentX;
float _currentY;
 
@Override
public boolean onTouchEvent(MotionEvent event) {
    _currentX = event.getX();
    _currentY = event.getY();
 
    TranslateAnimation _tAnim = new TranslateAnimation(-100, 0, 0, 0);
    _tAnim.setInterpolator(new BounceInterpolator());
    _tAnim.setDuration(1000);
 
    startAnimation(_tAnim);
    invalidate();
    return true;
}

We have introduced two new class level variables to hold the coordinates. In the touch event, we create a new TranslateAnimation object, telling it to start our animation 100 pixels to the left of the starting location, with no vertical offset. We then set the animation interpolator to a new BounceInterpolator object, which will give us a bounce effect during the animation. Then, we set the duration of the entire animation to 1000 ms. Finally, we start the animation.


Drawing it

The draw event is very bare bones, and is shown below.

1
2
3
4
5
6
7
8
9
10
 
@Override
protected void onDraw(Canvas canvas) {
    if (_currentX > 0 && _currentY > 0) {
        Paint p = new Paint();
        p.setColor(Color.WHITE);
        p.setTextSize(20);
 
        canvas.drawText("hey there", _currentX, _currentY, p);
    }
}

Here we are simply instantiation a new Paint object, setting the color to white and the text size to 40, and then using that new brush to draw our hard-coded test on the canvas.


The final results

Unfortunately still shots don’t do the app justice, as the whole point is an animation; just don’t forget to change your call to setContentView in the main activity to use a new instance of our custom view that we defined above. The effect is that anywhere you click on your screen, our canned text of “hey there” appears 100 pixels to the left and slides over to where we clicked, bouncing into position.


Next steps

The Android SDK provides a number of different animations that you can swap in for our TranslateAnimation, such as:
In addition to these, we have a handful of different interpolators that we can incorporate as well:
Finally, you can compose different animations and interpolators using the AnimationSet class. As you can see, there are lots of different ways you can animate your text (or pictures) in your Android apps.

Via: Barebones Coder

Comments (0)
Only registered users can write comments!
 

Related Articles

ANDROID10 --- TIP!!!

android10 tipIf you are writing an article and want to include your source code or a file...is pretty simple: first you save your article for first time to create it, then you edit it and at bottom of the editor, you have a button "Add Attachment"...just click it, upload your file...and that's all...too easy...
contact android10!!!