I have created an animation (by below Code) of a bouncing ball.
I wanted to know how to stop this animation on a particular condition, like after 10 seconds or when the ball reaches at particular coordinates.
The code:
public class MyDemoView extends ImageView{
private Context mContext;
int x = -1;
int y = -1;
private int xVelocity = 10;
private int yVelocity = 5;
private Handler h;
private final int FRAME_RATE = 30;
public MyDemoView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
h = new Handler();
}
private Runnable r = new Runnable() {
#Override
public void run() {
invalidate();
}
};
protected void onDraw(Canvas c) {
BitmapDrawable ball = (BitmapDrawable) mContext.getResources().getDrawable(R.drawable.ball);
if (x<0 && y <0) {
x = this.getWidth()/2;
y = this.getHeight()/2;
} else {
x += xVelocity;
y += yVelocity;
if ((x > this.getWidth() - ball.getBitmap().getWidth()) || (x < 0)) {
xVelocity = xVelocity*-1;
}
if ((y > this.getHeight() - ball.getBitmap().getHeight()) || (y < 0)) {
yVelocity = yVelocity*-1;
}
}
c.drawBitmap(ball.getBitmap(), x2, y2, null);
h.postDelayed(r, FRAME_RATE);
}
}
To stop animation use the code below:
object.clearAnimation();
or
animation.cancel();
The latter may not work for 2.1, can't remember.
Based on your code , simply call h.removeCallbacks(r) ?
Related
I want to make floating 4 circles with animation on a screen like bubbles, I have tried a lot but I haven't got any solutions, please any one help me, Thanks in advance.
I tried using below code this is for one circle I want make it for 4 circles.
public class AnimatedView extends ImageView{
private Context mContext;
int x = -1;
int y = -1;
private int xVelocity = 10;
private int yVelocity = 5;
private Handler h;
private final int FRAME_RATE = 30;
public AnimatedView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
h = new Handler();
}
private Runnable r = new Runnable() {
#Override
public void run() {
invalidate();
}
};
protected void onDraw(Canvas c) {
BitmapDrawable ball = (BitmapDrawable) mContext.getResources().getDrawable(R.drawable.ball);
if (x<0 && y <0) {
x = this.getWidth()/2;
y = this.getHeight()/2;
} else {
x += xVelocity;
y += yVelocity;
if ((x > this.getWidth() - ball.getBitmap().getWidth()) || (x < 0)) {
xVelocity = xVelocity*-1;
}
if ((y > this.getHeight() - ball.getBitmap().getHeight()) || (y < 0)) {
yVelocity = yVelocity*-1;
}
}
c.drawBitmap(ball.getBitmap(), x, y, null);
h.postDelayed(r, FRAME_RATE);
}
}
improve your code according to below
public class AnimatedView extends ImageView{
private Context mContext;
int x = -1;
int y = -1;
private int xVelocity = 10;
private int yVelocity = 5;
private Handler h;
private int FRAME_RATE = 30;
private boolean showAnimation=true;
int width ,height;
public AnimatedView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
width = displayMetrics.widthPixels;
height = displayMetrics.heightPixels;
h = new Handler();
loadStateFromAttrs(attrs);
}
private void loadStateFromAttrs(AttributeSet attributeSet) {
if (attributeSet == null) {
return; // quick exit
}
TypedArray a = null;
try {
a = getContext().obtainStyledAttributes(attributeSet, R.styleable.AnimatedView);
FRAME_RATE = a.getInt(R.styleable.AnimatedView_FRAME_RATE, FRAME_RATE);
} finally {
if (a != null) {
a.recycle(); // ensure this is always called
}
}
}
private Runnable r = new Runnable() {
#Override
public void run() {
invalidate();
}
};
protected void onDraw(Canvas c) {
//BitmapDrawable ball = (BitmapDrawable) mContext.getResources().getDrawable(R.drawable.ball);
BitmapDrawable ball = (BitmapDrawable) getDrawable();
if(showAnimation)
{
if (x<0 && y <0) {
x = width/2;
y = height/2;
} else {
x += xVelocity;
y += yVelocity;
if ((x > width - ball.getBitmap().getWidth()) || (x < 0)) {
xVelocity = xVelocity*-1;
}
if ((y > height - ball.getBitmap().getHeight()) || (y < 0)) {
yVelocity = yVelocity*-1;
}
}
}
c.drawBitmap(ball.getBitmap(), x, y, null);
if(showAnimation)
h.postDelayed(r, FRAME_RATE);
}
public void startAnimation()
{
showAnimation=true;
}
public void stopAnimation()
{
showAnimation=false;
}
}
I have an image(ball) its a BitmapDrawable and it moves in all directions on the screen for that i am taking onDraw(canvas) in AnimatedView.java its working fine.
My Requirement:
I want to click on the image, but unfortunately the whole screen takes the event.
Please help me.
How to get click event only on the image?
So that i can proceed with further development.
Here is the code:
MainActivity
public class MainActivity extends Activity {
Context context;
int count=0;
EditText text;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
AnimatedView animatedView=(AnimatedView) findViewById(R.id.anim_view);
animatedView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
EditText text=(EditText) findViewById(R.id.editText1);
ImageView imageView=(ImageView) findViewById(R.drawable.ball);
v.startAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.animation));
}
});
animatedview.java:
public class AnimatedView extends ImageView{
private Context mContext;
int x = -1;
int y = -1;
private int xVelocity = 10;
private int yVelocity = 5;
private Handler h;
private final int FRAME_RATE = 30;
BitmapDrawable ball;
public AnimatedView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
h = new Handler();
}
private Runnable r = new Runnable() {
#Override
public void run() {
invalidate();
}
};
#Override
protected void onDraw(Canvas c) {
BitmapDrawable ball = (BitmapDrawable) mContext.getResources().getDrawable(R.drawable.ball);
if (x<0 && y <0) {
x = this.getWidth()/2;
y = this.getHeight()/2;
} else {
x += xVelocity;
y += yVelocity;
if ((x > this.getWidth() - ball.getBitmap().getWidth()) || (x < 0)) {
xVelocity = xVelocity*-1;
}
if ((y > this.getHeight() - ball.getBitmap().getHeight()) || (y < 0)) {
yVelocity = yVelocity*-1;
}
}
c.drawBitmap(ball.getBitmap(), x, y, null);
h.postDelayed(r, FRAME_RATE);
}
main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#000000">
<com.example.example.AnimatedView
android:id="#+id/anim_view"
android:layout_width="fill_parent"
android:layout_height="420dp"
android:onClick="imageClicked" />
</LinearLayout>
**I hope This codes Works for you, what you are looking for.....**
This is the complete code representing both ball movement and touch on ball.
public class MainActivity extends Activity implements OnTouchListener
{
BubbleGraphic bubbleGraphic;
int bm_x = 0, bm_y = 0, bm_offsetx, bm_offsety, bm_w, bm_h, subBM_w, subBM_h;
int f = 0;
private float x, y;
Canvas canvas;
boolean dm_touched = false;
static int random_x;
static int random_y;
boolean touching;
// These variable for position in x_axis direction
int w1;
// These variable for position in y_axis direction
int h1;
// These variable for velocity in x_axis direction
private int w1_V;
// These variable for velocity in y_axis direction
private int h1_V;
Bitmap mainBG;
Bitmap bmpBall;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
bubbleGraphic = new BubbleGraphic(this);
bubbleGraphic.setOnTouchListener(this);
// Your Background Image of Canvas
mainBG = BitmapFactory.decodeResource(getResources(), R.drawable.bg1);
w1 = -1;
h1 = -1;
w1_V = 1;
h1_V = 1;
// This is used to create bitmap object and decode the input stream into bitmap
bmpBall = BitmapFactory.decodeResource(getResources(),
R.drawable.myBall);
bm_w = bmpBall.getWidth();
bm_h = bmpBall.getHeight();
setContentView(bubbleGraphic);
}
protected void onPause() {
super.onPause();
bubbleGraphic.pause();
}
protected void onResume() {
super.onResume();
bubbleGraphic.resume();
}
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_MOVE:
x = event.getX();
y = event.getY();
touching = true;
if (dm_touched) {
w1 = (int) x - bm_offsetx;
h1 = (int) y - bm_offsety;
}
break;
case MotionEvent.ACTION_DOWN:
x = event.getX();
y = event.getY();
touching = true;
// checking if Ball is touched
if ((x > w1) && (x < bm_w + w1) && (y > h1) && (y < bm_h + h1)) {
bm_offsetx = (int) x - w1;
bm_offsety = (int) y - h1;
}
dm_touched = true;
break;
case MotionEvent.ACTION_UP:
default:
dm_touched = false;
touching = false;
}
return true;
}
// **************************************************************************************//
// Creating Canvas graphic Class and running thread //
// *************************************************************************************//
class BubbleGraphic extends SurfaceView implements Runnable {
SurfaceHolder holder;
Thread thread = null;
boolean isRunning = false;
boolean holdingBubble = true;
private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
public BubbleGraphic(Context context) {
super(context);
holder = getHolder();
}
public void pause() {
isRunning = false;
while (true) {
try {
thread.join();
} catch (Exception e) {
}
break;
}
thread = null;
}
public void resume() {
isRunning = true;
thread = new Thread(this);
thread.start();
}
public void run() {
while (isRunning) {
if (!holder.getSurface().isValid())
continue;
canvas = holder.lockCanvas();`enter code here`
canvas.drawBitmap(mainBG, 0, 0, null);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(1);
paint.setColor(Color.TRANSPARENT);
if (touching) {
canvas.drawRect(x, y, x + bm_w, y + bm_h, paint);
}
canvas.drawBitmap(bmpBall, w1, h1, null);
// Method Responsible for ball movement and its position
checkBallMovementAndPosition();
holder.unlockCanvasAndPost(canvas);
}
}
private void checkBallMovementAndPosition() {
if (w1 < 0 && h1 < 0) {
w1 = this.getWidth() / 2;
h1 = this.getHeight() / 2;
} else {
w1 += w1_V;
h1 += h1_V;
if ((w1 > this.getWidth() - bm_w) || (w1 < 0)) {
w1_V = w1_V * -1;
w1 += w1_V;
}
if ((h1 > this.getHeight() - bm_h) || (h1 < 0)) {
h1_V = h1_V * -1;
h1 += h1_V;
}
}
}
}
}
Note: Replace the images with Your images.
i have an image and it is moving all directions on the screen.Its fine.My requirement is, i want to click on that image and immediately change the direction of the image to other. Here is the code .Please help me friends.
MainActivity
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
public class AnimatedView extends ImageView{
private Context mContext;
int x = -1;
int y = -1;
private int xVelocity = 10;
private int yVelocity = 5;
private Handler h;
private final int FRAME_RATE = 30;
public AnimatedView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
h = new Handler();
}
private Runnable r = new Runnable() {
#Override
public void run() {
invalidate();
}
};
protected void onDraw(Canvas c) {
BitmapDrawable ball = (BitmapDrawable) mContext.getResources().getDrawable(R.drawable.ball);
if (x<0 && y <0) {
x = this.getWidth()/2;
y = this.getHeight()/2;
} else {
x += xVelocity;
y += yVelocity;
if ((x > this.getWidth() - ball.getBitmap().getWidth()) || (x < 0)) {
xVelocity = xVelocity*-1;
}
if ((y > this.getHeight() - ball.getBitmap().getHeight()) || (y < 0)) {
yVelocity = yVelocity*-1;
}
}
c.drawBitmap(ball.getBitmap(), x, y, null);
h.postDelayed(r, FRAME_RATE);
}
}
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#000000">
<com.example.example.AnimatedView
android:id="#+id/anim_view"
android:layout_height="fill_parent"
android:layout_width="fill_parent" />
</RelativeLayout>
Try this and modify
public class AnimatedView extends ImageView {
private Context mContext;
int x = -1;
int y = -1;
private int xVelocity = 10;
private int yVelocity = 5;
private Handler h;
private final int FRAME_RATE = 1000;
BitmapDrawable ball;
public AnimatedView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
h = new Handler();
}
private Runnable r = new Runnable() {
#Override
public void run() {
invalidate();
}
};
protected void onDraw(Canvas c) {
ball = (BitmapDrawable) mContext.getResources()
.getDrawable(R.drawable.ic_launcher);
if (x < 0 && y < 0) {
x = this.getWidth() / 2;
y = this.getHeight() / 2;
} else {
x += xVelocity;
y += yVelocity;
if ((x > this.getWidth() - ball.getBitmap().getWidth()) || (x < 0)) {
xVelocity = xVelocity * -1;
}
if ((y > this.getHeight() - ball.getBitmap().getHeight())
|| (y < 0)) {
yVelocity = yVelocity * -1;
}
}
c.drawBitmap(ball.getBitmap(), x, y, null);
h.postDelayed(r, FRAME_RATE);
}
int xStart, yStart, xEnd, yEnd;
#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
xStart = (int) event.getX();
yStart = (int) event.getY();
break;
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_UP:
xEnd = (int) event.getX();
yEnd = (int) event.getY();
break;
}
if(xStart >= x && yStart >= y && xEnd <= (x+ball.getBitmap().getWidth()) && yEnd <= (y+ball.getBitmap().getHeight())){
Log.i("MainActivity","AnimatedView Clicked................");
}
return false;
}
}
i have image animation(moves bottom to top and top to bottom),and it is loading automatically when ever i am install into device but i won't that,my requirement is i want click on that image then only animation has to start,
please help me
ondraw method is:
protected void onDraw(Canvas c) {
int z= c.getHeight()/2;
Log.e("bharat","z is"+z);
BitmapDrawable ball = (BitmapDrawable) mContext.getResources().getDrawable(R.drawable.ball);
if (x<0 && y <0) {
//x = this.getWidth()/2;
y = c.getHeight()/2;
} else {
//x += xVelocity;
y += yVelocity;
if ((x > this.getWidth() - ball.getBitmap().getWidth()) || (x < 0)) {
xVelocity = xVelocity*-1;
}
if (((y > this.getHeight() - ball.getBitmap().getHeight()) || (y < 0))) {
yVelocity = yVelocity*-1;
}
}
c.drawBitmap(ball.getBitmap(), x, y, null);
if(touching){
h.postDelayed(r, FRAME_RATE);
bm_w=ball.getBitmap().getWidth();
bm_h=ball.getBitmap().getHeight();
}
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<com.example.example.AnimatedView
android:id="#+id/anim_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:onClick="imageClicked" />
</RelativeLayout>
**animatedview.java**
//this is for image moving from bottom to top
public class AnimatedView extends ImageView{
static int count=0;
private Context mContext;
int x = 150;
int y = 450;
private float a,b;
private int xVelocity = 10;
private int yVelocity = 15;
private Handler h;
private final int FRAME_RATE = 25;
BitmapDrawable ball;
boolean touching;
boolean dm_touched = false;
int bm_x = 0, bm_y = 0, bm_offsetx, bm_offsety,bm_w,bm_h;
public AnimatedView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
h = new Handler();
}
private Runnable r = new Runnable() {
#Override
public void run() {
invalidate();
}
};
#Override
protected void onDraw(Canvas c) {
BitmapDrawable ball = (BitmapDrawable) mContext.getResources().getDrawable(R.drawable.ball);
if (x<0 && y <0) {
//x = this.getWidth()/2;
y = c.getHeight()/2;
} else {
//x += xVelocity;
y += yVelocity;
if ((x > this.getWidth() - ball.getBitmap().getWidth()) || (x < 0)) {
xVelocity = xVelocity*-1;
}
if ((y > this.getHeight() - ball.getBitmap().getHeight()) || (y < 0)) {
yVelocity = yVelocity*-1;
}
}
c.drawBitmap(ball.getBitmap(), x, y, null);
h.postDelayed(r, FRAME_RATE);
bm_w=ball.getBitmap().getWidth();
bm_h=ball.getBitmap().getHeight();
}
#Override
public boolean onTouchEvent(MotionEvent event) {
Log.d("bharat","ontouch called");
int touchType = event.getAction();
switch(touchType){
case MotionEvent.ACTION_MOVE:
a = event.getX();
b = event.getY();
touching = true;
if (dm_touched) {
x = (int) a - bm_offsetx;
y = (int) b - bm_offsety;
}
break;
case MotionEvent.ACTION_DOWN:
//x and y give you your touch coordinates
a = event.getX();
b = event.getY();
touching = true;
Log.d("bharat","action_down called");
if ((a > x) && (a < bm_w + x) && (b > y) && (b < bm_h + y)) {
count++;
Log.i("bharat",""+count);
Intent intent1 = new Intent();
intent1.putExtra("score", count);
}
dm_touched = true;
case MotionEvent.ACTION_UP:
default:
dm_touched = false;
touching = false;
}
return true;
}
}
**MainActivity.java**
//here i am want to get the image the view and by clicking on that image only animation should loaded
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
View animatedView = findViewById(R.id.anim_view);
ImageView imageView=(ImageView) findViewById(R.id.imageView1);
}
You are not attaching any click listners in the AnimatedView. Modify your constructor as
public AnimatedView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
h = new Handler();
setOnTouchListener(this)
}
Also call invalidate() in the onTouchEvent()
public boolean onTouchEvent(MotionEvent event) {
int touchType = event.getAction();
switch(touchType){
case MotionEvent.ACTION_MOVE:
a = event.getX();
b = event.getY();
touching = true;
invalidate();
break;
}
}
i have class i.e., animatedview.java. this class gives an animation like, image moving from bottom to top and top to bottom.my requirement is i want to move the image from bottom to midpoint of center and bottom like the following screen!
i want to reach this position later i will get down continuously
mycode is:
public class AnimatedView extends ImageView{
static int count=0;
private Context mContext;
int x = 150;
int y = 450;
private float a,b;
private int yVelocity = 20;
private Handler h;
private final int FRAME_RATE = 25;
BitmapDrawable ball;
boolean touching;
boolean dm_touched = false;
int bm_x = 0, bm_y = 0, bm_offsetx, bm_offsety,bm_w,bm_h;
public AnimatedView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
h = new Handler();
}
private Runnable r = new Runnable() {
#Override
public void run() {
if(touching = true)
invalidate();
}
};
#Override
protected void onDraw(Canvas c) {
BitmapDrawable ball = (BitmapDrawable) mContext.getResources().getDrawable(R.drawable.ball);
if (x<0 && y <0) {
//x = this.getWidth()/2;
y = c.getHeight()/2;
} else {
y += yVelocity;
if (y >( this.getHeight() - ball.getBitmap().getHeight()) ||(y <0)) {
yVelocity = yVelocity*-1;
}
}
c.drawBitmap(ball.getBitmap(), x, y, null);
if(touching){
h.postDelayed(r, FRAME_RATE);
bm_w=ball.getBitmap().getWidth();
bm_h=ball.getBitmap().getHeight();
}
}
#Override
public boolean onTouchEvent(MotionEvent event) {
int touchType = event.getAction();
switch(touchType){
case MotionEvent.ACTION_MOVE:
a = event.getX();
b = event.getY();
touching = true;
break;
case MotionEvent.ACTION_DOWN:
//x and y give you your touch coordinates
a = event.getX();
b = event.getY();
touching = true;
Log.d("bharat","action_down called");
if ((a > x) && (a < bm_w + x) && (b > y) && (b < bm_h + y)) {
count++;
Log.i("bharat",""+count);
}
dm_touched = true;
case MotionEvent.ACTION_UP:
a = event.getX();
b = event.getY();
if(a>x+20&&a<330&&b<=y+320&&b>y)
invalidate();
default:
dm_touched = true;
touching = true;
}
return true;
}
}
please help me
if I understand you correctly this should fix it:
instead of y< 0, you should put y < c.getHeight()/2
#Override
protected void onDraw(Canvas c) {
BitmapDrawable ball = (BitmapDrawable) mContext.getResources().getDrawable(R.drawable.ball);
if (x<0 && y <0) {
//x = this.getWidth()/2;
y = c.getHeight()/2;
} else {
y += yVelocity;
if (y >( this.getHeight() - ball.getBitmap().getHeight()) ||(y <c.getHeight()/2)) {
yVelocity = yVelocity*-1;
}
}
c.drawBitmap(ball.getBitmap(), x, y, null);
if(touching){
h.postDelayed(r, FRAME_RATE);
bm_w=ball.getBitmap().getWidth();
bm_h=ball.getBitmap().getHeight();
}
}