Today I got, as I suppose, very interesting question. On my job we are creating a dating service and one of the main features will be the screen, where photos of different girls (or guys) are shown and the user press either "Hot" or "Not" button. Both of these buttons are displayed below the photo on the screen.
Our analytics say that we should implement some kind of "gaming" mechanics, so the want such a thing: when user press, for example, "Not" button - it starts freezing and covering with ice, then it breaks and then the next photo is shown. That is not scale or rotate or translate animation... the button itself, its content should be changing over some small period of time (a second or two maybe).
That scares me a lot, because when I'm thinking about scaling these buttons on different devices, and different troubles with ninepatch and hand-made-frames animations I'm likely going to make.
Is it possible to make such thing? Or maybe there are any kind of workarounds or something.
Make images for your animation and keep in a folder in png format.
Animate those images with code below.
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="#drawable/rocket_thrust1" android:duration="200" />
<item android:drawable="#drawable/rocket_thrust2" android:duration="200" />
<item android:drawable="#drawable/rocket_thrust3" android:duration="200" />
</animation-list>
Then
AnimationDrawable rocketAnimation;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
}
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
rocketAnimation.start();
return true;
}
return super.onTouchEvent(event);
}
Create list of images in drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/loading"
android:oneshot="false" >
<item android:drawable="#drawable/preloader_01" android:duration="50" />
<item android:drawable="#drawable/preloader_02" android:duration="50" />
<item android:drawable="#drawable/preloader_03" android:duration="50" />
<item android:drawable="#drawable/preloader_04" android:duration="50" />
Use ImageView img instead of button and set the list as background in xml, then in code use AnimationDrawable to start the animation
AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground();
// Start the animation (looped playback by default).
frameAnimation.start();`
You can animate Alpha, location and just about any property of a button using ObjectAnimators and ValueAnimators.
If you want custom animations such as the ice effect, you'll have to make these yourself.
Related
I am trying to add an animation ( not sure if that would be an appropriate word ) of beach waves when my app loads with its first screen.I am developing a holiday app and have already set an image (a static image of sand ) as the background.I am expecting to have the sand image as background and have an effect of the waves hitting the shore.How should go about achieving this? I want the waves in this pic in motion--> http://www.wallpapervortex.com/wallpaper-23493_beach_sand_sand_beach.html#.U9Rr2fldW8A
Have each frame as a seperate image in the drawable folder. After that, use an xml to define the frames(eg, ANIMATED.xml)
<animation-list android:id="#+id/selected" android:oneshot="false">
<item android:drawable="#drawable/0" android:duration="50" />
<item android:drawable="#drawable/1" android:duration="50" />
<item android:drawable="#drawable/2" android:duration="50" />
<item android:drawable="#drawable/3" android:duration="50" />
<item android:drawable="#drawable/4" android:duration="50" />
<item android:drawable="#drawable/5" android:duration="50" />
</animation-list>
And to make it animate, use this:
// Load the ImageView that will host the animation and
// set its background to our AnimationDrawable XML resource.
ImageView img = (ImageView)findViewById(R.id.moving_image);
img.setBackgroundResource(R.drawable.ANIMATED.xml);
// Get the background, which has been compiled to an AnimationDrawable object.
AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground();
// Start the animation (looped playback by default).
frameAnimation.start();
I want to create an android game. Everytime someone touches the display the player should go up, and if he releases the player should fall.
With the help of many tutorials I made it work but now I want to animate it and I'm stuck. That means the image of the player should be changed every half a second. Additionally an animated rotation should be created when the player goes up.
However (after hours of googling) I couldnt find any helpful answer to my problem. The Android Developers site talks about creating an ImageView and a XML file. But thats where I'm stuck: I dont have an ImageView, my player (for which I used a PNG file) is simply created by the onDraw() method:
public void onDraw(Canvas canvas) {
for (Sprite s : sprites) {
canvas.drawBitmap(s.getGraphic(), s.getLocation().x,
s.getLocation().y, null);
}
}
Now I wanted to ask how I should do the animation and the animated rotation. Should I start off with an ImageView or can I somehow "convert" the onDraw method to an ImageView? Or is there another way to do the animation and animated rotation without an ImageView?
Secondly, if I had to create the ImageView I don't understand how I can make the player "dynamic", i.e.: changing the position when someone touches the display.
Thanks in advance :)
EDIT:
Ok, I created my animation.xml file in the drawable folder:
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false" android:id="#+id/splashAnimation">
<item android:drawable="#drawable/ship" android:duration="200" />
<item android:drawable="#drawable/ship_2" android:duration="200" />
</animation-list>
and in my main file I added:
ImageView img = (ImageView) findViewById(R.id.splashAnimation);
img.setBackgroundResource(R.drawable.animation);
ship_anim= (AnimationDrawable) img.getBackground();
ship_anim.start();
However, now I get the error message: NullPointerException
Where is the Problem?
if you have drawables that describe animation, you can always create xml in your drawable folder like this than add this as imageView to the layout
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/img1" android:duration="100" />
<item android:drawable="#drawable/img2" android:duration="100" />
<item android:drawable="#drawable/img3" android:duration="100" />
<item android:drawable="#drawable/mimg4" android:duration="100" />
<item android:drawable="#drawable/img5" android:duration="100" />
</animation-list>
The code for it would look like this:
myAnimation = (AnimationDrawable) findViewById(R.id.animation);
Add just event handler than
if (!isPlaying)
{
playDrawableAnimation();
isPlaying = true;
} else
{
faceAnimation.stop();
isPlaying = false;
}
What is the best way to design and embed an animation into an android app.
(I'm not talking about transitions and activities in/out animations.)
I can think of 2 ways of doing it:
designing the animation with flash or something similar, export png-sequence with transparent bgs and creating an animation from the images in an xml file (How do I write this kind of xml?)
creating a grid of images with all the frames of the animation that I've created
and save it into one image. than using something like background-position in css in order to move the visible area of the image on each frame enter (By Java code, or by xml)
which of this is better/most common? and how do I implement the solution (if there is a better solution - that would be great).
and what programs do you usually use for this kind of task
(the goal is to achieve something that works like the frog in cut the rope or the birds in angry birds for example)
thanks!
I used simple animation in one project... It's on your first point... A sequence of *.png files in /res/drawable, and *.xml like:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="#drawable/s250" android:duration="200" />
<item android:drawable="#drawable/s251" android:duration="200" />
<item android:drawable="#drawable/s252" android:duration="200" />
<item android:drawable="#drawable/s253" android:duration="200" />
<item android:drawable="#drawable/s254" android:duration="200" />
<item android:drawable="#drawable/s255" android:duration="200" />
<item android:drawable="#drawable/s256" android:duration="200" />
<item android:drawable="#drawable/s257" android:duration="200" />
<item android:drawable="#drawable/s258" android:duration="200" />
</animation-list>
... and source...
final ImageView pygalo = (ImageView) findViewById(R.id.imageanimation);
pygalo.setBackgroundResource(R.anim.animation);
final AnimationDrawable pygaloanimation = (AnimationDrawable) pygalo.getBackground();
pygalo.setOnClickListener(new OnClickListener()
{
#Override
public void onClick(View vp) {
pygaloanimation.stop();
pygaloanimation.start();
}
});
It is very easy to do...
I have a checkbox that should look like a green light when checked and a red blinking light when unchecked. To do this I created a selector called connected_selector.xml.
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/green_button" />
<item android:state_checked="false" android:drawable="#drawable/red_button_blinking" />
<item android:drawable="#drawable/red_button_blinking" />
</selector>
The green_button is simply a png and the red_button_blinking is an animation-list of pngs.
<?xml version="1.0" encoding="utf-8"?>
<animation-list
xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
<item android:drawable="#drawable/red_button" android:duration="500" />
<item android:drawable="#drawable/red_button_lit" android:duration="500" />
</animation-list>
The checkbox's background is set to #drawable/connected_selector. If the checkbox is initially unchecked, it doesn't blink, it just shows the #drawable/red_button. However if I check the box and then uncheck it, the checkbox will animate correctly.
How can I make the animation start initially since the checkbox will be initially unchecked? I guess I could try to start the animation manually in code, but I don't think that should be necessary.
Okay, I found an ugly, dirty hack to get around this. Note that I don't have the slightest clue why this happens, just a way around this. It is probably not even a generic way since different devices will have different loading times.
I execute the following workaround in onPostResume() to minimize the necessary delay time.
if(onOffStatus) {
// SLEEP 0.5 SECONDS HERE ...
new Handler().postDelayed(new Runnable() {
public void run() {
switcher.setBackgroundResource(R.drawable.button_state_anim);
// Get the background, which has been compiled to an AnimationDrawable object.
AnimationDrawable frameAnimation = (AnimationDrawable) switcher.getBackground();
// Start the animation (looped playback by default).
frameAnimation.start();
}
}, 500); // Actual required time will probably be dependent on device performance
}
It ain't pretty but I'm going with this until I find something better. Let me know if I overlooked something here.
I want to create an animation for the text like on Airport the flight schedule board does. Dropping from top and change the text on it. Here is the image. So When I click on button the text on the image should change with the said animation. Does it possible with android?
Please guide me how can I achieve this kind of animation in android?
EDIT:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="#drawable/clockbg1" android:duration="150" />
<item android:drawable="#drawable/clockbg2" android:duration="150" />
<item android:drawable="#drawable/clockbg3" android:duration="150" />
<item android:drawable="#drawable/clockbg4" android:duration="150" />
<item android:drawable="#drawable/clockbg5" android:duration="150" />
<item android:drawable="#drawable/clockbg6" android:duration="150" />
</animation-list>
My Activity Class:
public class XMLAnimation extends Activity {
private static AnimationDrawable animation;
private ImageView refresh;
#Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
refresh = (ImageView) findViewById(R.id.simple_anim);
refresh.setBackgroundResource(R.drawable.loader_animation);
animation = (AnimationDrawable) refresh.getBackground();
}
#Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
animation.start();
}
Now How to place vertically animated text on this images so it looks like the animation I wanted to create?
Thanks,
AndroidVogue
It isn't exactly the thing you want, but there's a nice 3-part tutorial by Kevin Dion that starts here for creating a custom odometer widget that looks something like what you want. It should help get you started.
To get the effect of the top half of the letters falling down (if that's what you want), you can fake it by drawing the letter into a buffer image and then scaling the vertical extent of the letter to get a foreshortening effect.
I got working library. Originally developed by someone else but I provided support for down version from Froyo. I hope this can help you out.
AbhanFlipView
Ref:
Library Developed By: Emil Sjölander
Animations Created By: Jake Wharton
UPDATE
It has a document named HowTo.txt shows how to integrate.
Thanks.