Pr.Pg Next Pg

More about Animations tutorials

  • Now we are going to add real animation.

  • In this example we wont be having our other image extra2, instead we will try to show other concept.

  • Now we want the image icon to move in the direction opposite to where it is dragged from, on releasing it.

  • In simple words, our icon will be set into motion when we pick and drop it in the opposite direction

  • For this we make a few changes to the code and the final code looks like this

 

 

 

package com.example.helloandroid;

 

import android.app.Activity;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Canvas;

import android.os.Bundle;

import android.view.MotionEvent;

import android.view.SurfaceHolder;

import android.view.SurfaceView;

import android.view.View;

import android.view.View.OnTouchListener;

 

public class Graphics_ext extends Activity implements OnTouchListener {

MySurfaceClass surfaceView;

float x1, y1, x2, y2, dX, dY, animX, animY, scaleX, scaleY;

 

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

surfaceView = new MySurfaceClass(this);

surfaceView.setOnTouchListener(this);

x1 = 0;

y1 = 0;

x2 = y2 = 0;

animX = animY = scaleX = scaleY = dX = dY = 0;

setContentView(surfaceView);

}

 

@Override

protected void onPause() {

// TODO Auto-generated method stub

super.onPause();

surfaceView.pause();

}

 

@Override

protected void onResume() {

// TODO Auto-generated method stub

super.onResume();

surfaceView.resume();h3>

}

 

@Override

public boolean onTouch(View arg0, MotionEvent arg1) {

// TODO Auto-generated method stub

x2 = arg1.getX();

y2 = arg1.getY();

switch (arg1.getAction()) {

case MotionEvent.ACTION_DOWN:

x1 = arg1.getX();

y1 = arg1.getY();

animX = animY = scaleX = scaleY = dX = dY = 0;

break;

case MotionEvent.ACTION_UP:

dX = x2-x1;

dY = y2 - y1;

scaleX = dX / 50;

scaleY = dY / 50;

x1=y1=0;

}

return true;

}

 

public class MySurfaceClass extends SurfaceView implements Runnable {

 

SurfaceHolder holder;

Thread mythread = null;

boolean running = false;

Bitmap bm;

 

public MySurfaceClass(Context context) {

// TODO Auto-generated constructor stub

super(context);

 

holder = getHolder();

}

 

@Override

public void run() {

// TODO Auto-generated method stub

while (running) {

if (!holder.getSurface().isValid())

continue;

Canvas mycanvas = holder.lockCanvas();

mycanvas.drawRGB(120, 254, 36);

if (x1 != 0 && y1 != 0) {

bm = BitmapFactory.decodeResource(getResources(),

R.drawable.extra);

mycanvas.drawBitmap(bm, x1 - bm.getWidth() / 2,

y1 - bm.getHeight() / 2, null);

}

if (x2 != 0 && y2 != 0) {

mycanvas.drawBitmap(bm, x2 - bm.getWidth() / 2 - animX, y2

- bm.getHeight() / 2 - animY, null);

}

holder.unlockCanvasAndPost(mycanvas);

animX += scaleX;

animY += scaleY;

 

}

}

 

public void pause() {

running = false;

while (true) {

try {

mythread.join();

} catch (InterruptedException e) {

e.printStackTrace();

}

break;

}

 

}

 

public void resume() {

running = true;

mythread = new Thread(this);

mythread.start();

}

}

}

 

 

  • Here we store the initial position in variables x1 and y1(i.e when the screen is pressed and the final position when the screen is released) in variable x2 and y2..

  • Then we take the difference the difference between initial position and final position and store it in dX and dY respectively.

  • We then use the difference to scale it.

  • The scale is then repeatedly added to the variable anim to make the ball move continuously(animated).

  • The scale will basically decide how fast the ball will move.

  • The greater the difference, the faster the icon will move.

  • Notice the various reintialization we make within the switch case as they are done so as to handle various conditions like removing the old image at old position when it is dragged and released.

  • Below are the screenshots of the application.

 

 

Pr.Pg border                                              Next Pg