My app implements its own sprites by calling the following in my view's onDraw() method:
canvas.drawBitmap(sprite.getBitmap(), sprite.getX(), sprite.getY(), null);
The app is a physics simulation, and so far this has worked out great. But now I'd like to enhance the animation by morphing between images for the sprites when certain events occur.
For example- when a collision happens, I would like to play an animation of an explosion. My idea was to replace the usual sprite bitmap with that of an explosion PNG, and use Android "tween animation" to make the explosion grow larger.
But the Android tween animation example assumes that you have an ImageView defined somewhere statically in your XML configuration.
Is there a way to animate a bitmap as drawn in onDraw() using tween animation? Or do I need to convert my sprites to use some sort of ImageView? If the latter, can you point me to an example of proper sprite animation in Android?
Thanks
I built a generic Tween Engine in java that you can use to animate anything, including your sprites. It's optimized for Android and games because it does not allocate anything at runtime, to avoid any garbage collection. Moreover, Tweens are pooled, so really: no garbage collection at all!
You can see a complete demo here as an android application, or here as a WebGL html page (requires Chrome)!
All you have to do is implement the TweenAccessor interface to add Tween support to all your sprites. You don't even have to change your Sprite class, just create a SpriteTweenAccessor class that implements TweenAccessor<Sprite>, and register it to the engine at initialization. Just have a look at the GetStarted wiki page ;)
http://code.google.com/p/java-universal-tween-engine/
I'm also building a visual timeline editor that can be embedded in any application. It will feature a timeline similar to the Flash authoring tool and Expression Blend (a Silverlight dev tool).
The whole engine is heavily documented (all public methods and classes have detailed javadoc), and the syntax is quite similar to Greensock's TweenMax/TweenLite engine that is used in the Flash world. Note that it supports every Robert Penner easing equation.
// Arguments are (1) the target, (2) the type of interpolation,
// and (3) the duration in seconds. Additional methods specify
// the target values, and the easing function.
Tween.to(mySprite, Type.POSITION_XY, 1.0f).target(50, 50).ease(Elastic.INOUT);
// Possibilities are:
Tween.to(...); // interpolates from the current values to the targets
Tween.from(...); // interpolates from the given values to the current ones
Tween.set(...); // apply the target values without animation (useful with a delay)
Tween.call(...); // calls a method (useful with a delay)
// Current options are:
yourTween.delay(0.5f);
yourTween.repeat(2, 0.5f);
yourTween.repeatYoyo(2, 0.5f);
yourTween.pause();
yourTween.resume();
yourTween.setCallback(callback);
yourTween.setCallbackTriggers(flags);
yourTween.setUserData(obj);
// You can of course chain everything:
Tween.to(...).delay(1.0f).repeat(2, 0.5f).start();
// Moreover, slow-motion, fast-motion and reverse play is easy,
// you just need to change the speed of the update:
yourTween.update(delta * speed);
Of course, no tween engine would be complete without providing a way to build powerful sequences :)
Timeline.createSequence()
// First, set all objects to their initial positions
.push(Tween.set(...))
.push(Tween.set(...))
.push(Tween.set(...))
// Wait 1s
.pushPause(1.0f)
// Move the objects around, one after the other
.push(Tween.to(...))
.push(Tween.to(...))
.push(Tween.to(...))
// Then, move the objects around at the same time
.beginParallel()
.push(Tween.to(...))
.push(Tween.to(...))
.push(Tween.to(...))
.end()
// And repeat the whole sequence 2 times
// with a 0.5s pause between each iteration
.repeatYoyo(2, 0.5f)
// Let's go!
.start();
I hope you're convinced :) There are a lot of people already using the engine in their games or for android UI animation.
You can do the tween animation without the ImageView coming from an xml file, but it does need to actually be a View in your view hierarchy.
The drawing you're doing in your Canvas is opaque to the view hierarchy. I think you have two options:
Overlay an ImageView on top of your custom view and animate that using tween animations.
Use Canvas draw routines to animate your explosion.
I'd say that using Canvas routines, along with their maxtrix transformations, makes sense given that you probably already have an animation thread in your app.
You could draw and animate your explosion in Adobe Flash, export the sprite images using swfSheet or similar and then use Frame animation
If you are creating a game, you can use Vectors(Mathematical) to update the position of your images and then draw then with getX and getY. You should iterate and update this vector in some direction through some speed.
Those Vectors are not native (Game APIs has).
You need have a loop to iterate and update the position, then redraw.
For games, it's not a good idea to have components such ImageViews to make animations. They need the system to calc all the layout again and again over time.
Related
It looks like both Animations and Animators allow me to animate properties (position, opacity, scale, rotation, etc) on objects, and I'm having a hard time differentiating between the use case for both. When should I use an animator versus an animation and vice versa?
Animations are older versions of Animators. Animators where introduced in 3.0 to help overcome some short-coming that Animations have.
Animations only change the visual representation of an object. This is fine if you're just changing opacity, but it causes issues when you translate, rotate, or scale objects. In the old days before Animators, if you translated the object, you had to perform a re-layout with the new coordinates. It could be rather difficult depending on where the object moved.
Animators on the other hand change the physical properties of the objects. This means that if you move a View to a new location, the touch coordinates will be mapped at the new location without any other intervention.
Personally, I don't use Animations much anymore unless I'm developing at API's 2.3 or less. Thankfully that's becoming less of an issue. There are also some old classes that still use Animations API especially when it comes to using xml resources such as the android.support.v4.app.FragmentTransaction class (the normal FragmentTransaction supports Animators instead).
As a side note, the project NineOldAndroids was developed to mimic functionality of Animators but using Animations so you can make apps that work all the way to 1.6.
An Animation object animate the view's image. If you use this for example, to move a button around the screen you will not be able to click on it at the new visible position because it was not truly moved, but only his bitmap representation was translated. You will also not be able to change the proportions of it since you are making modifications to a bitmap. If you use xml files, place them at anim folder.
An Animator object animate the view's property (like the margin or width). If you use this to move a button around the screen you will be able to capture clicks on it in the new visible positions. If you use xml files, place them at animator folder.
If you only need cosmetic effects, like fade in or small appearance translation, using a Animation will be more efficient because it does not call layout() or measure() methods. If you do need to capture actions like click events, use a Animator.
Now i am developing an android app, and there are lots of animations and image resources, the ui design and the logic are also very complex. I tried to use the Tween animation and android layout to implement, but the code is very complex, and i also can't implement some parts of animations. Anyone know how to handle such complex animation at the android platform? Dose android have some tool like as flash tool to design the animation?
In android three type of anmiations.
1)TranslateAnimation
An animation that controls the position of an object
2)ScaleAnimation
An animation that controls the scale of an object. You can specify the point to use for the center of scaling.
3)AlphaAnimation
An animation that controls the alpha level of an object. Useful for fading things in and out. This animation ends up changing the alpha property of a Transformation
Check this for some example.
You can use droidQuery for complex animations. For example, to animate all your ImageViews to double their current size, do:
$.with(this).selectByType(ImageView.class)
.animate("{width:200%, height:200%}",
new AnimationOptions().easing($.Easing.BOUNCE).duration(400));
You can highly customize your animation with chained methods on the AnimationOptions Object - from the duration and interpolator to callbacks for progress, errors, success, and completion, etc.
im new to this android things. And i have to develop an application that can help an autism to learn numbers. I have a few ideas and I've been trying to learn and implement the code. But it's failed. The question is how can i apply the motion code or sprite to draw a numbers or letter? For example like this, i wanna make the penguin move through the line and draw a number nine.
There is example from mybringback.com which is the image move to draw a rectangle. How can i implement it to draw a number? Im sorry if i asking too much, i just trying to get some ideas.
I think that you should first build an utility program, in order to create the "path vector".
What I mean by path vector is simply a vector of Points (where a point has x value, and y value). And your utility should let you draw whatever you want, with a simple pen. You should draw on surface and store points when mouse is down, and ignore points when mouse is up.
Then, in the main program, you will just have to read at the path of your number/letter.
I've tried to implement something like this for the Sugar OLPC platform, without serializing path into files : I was able to draw, and to view the animation. And I used the process I've just described you.
Hope it can help you.
P.S : I used the word mouse, but you guessed that I talk about finger ...
There are various ways to achieve animation effects. One approach that is quite versatile involves creating a custom View or SurfaceView in which you Override the onDraw method. Various tutorials can be found on this; the official Android discussion of it is here:
http://developer.android.com/guide/topics/graphics/2d-graphics.html#on-view
Your implementation will look something like this:
// Find elapsed time since previous draw
// Compute new position of drawable/bitmap along figure
// Draw bitmap in appropriate location
// Add line to buffer containing segments of curve drawn so far
// Render all segments in curve buffer
// Take some action to call for the rendering of the next frame (this may be done in another thread)
Obviously a simplification. For a very simplistic tutorial, see here:
http://www.techrepublic.com/blog/software-engineer/bouncing-a-ball-on-androids-canvas/1733/
Note that different implementations of this technique will require different levels of involvement by you; for example, if you use a SurfaceView, you are in charge of calling the onDraw method, whereas subclassing the normal View lets you leave Android in charge of redrawing (at the expense of limiting your ability to draw on a different thread). In this respect, Google remains your friend =]
Related to this question, I am trying to figure out the parts of the Android class library that are responsible for playing an Animation. Looking at the sources, the Animation classes seem to merely compute the transformations an animated object undergoes, but they are not responsible for actually "playing" the animation, i.e. rendering the transformed object to the screen at a given frame rate.
I have been sifting through the source code of View and ImageView for some time now, but I can't make out where the code sits that actually draws each transformation to the screen.
Any ideas?
To clarify, I know that in order to play back an animation, you simply stick it in a View and call startAnimation, but I'd like to understand which parts of View or related classes implement these bits.
You should look into the android code. Start at startAnimation method of the View class. I think, in view class, after applying the transformation it calls invalidate() which leaves the rest to the graphics engine.
The android docs say
Tweened animation is handled by this package (android.view.animation); frame-by-frame animation is handled by the AnimationDrawable class.
Get the whole summary here
I want to draw something at about 30 frames per seconds on Android Canvas or other convenient object for this purpose. In my application different graphic objects are drawn and if any of the graphic object is touched, the graphic object changes its shape. I looked at the
onDraw(Canvas canvas) callback of View subclass but calling invalidate() does not help here: first I cannot control the frame rate and second if the objects are moving too fast, the motion appears jerky.
I personally dislike Android's built-in Animation classes, so I tend to do all animations with Canvas by hand. I have found the most luck with creating a list of the images you want to use in your animation and then an int variable to store the current "frame" you are on. To advance the frame, I create a thread that sleeps for, say, 30 ms and then update the frame variable accordingly. Then in whatever update handler you are using, you can just create a switch statement or something of the like, and draw the respective frame.
It may seem like a lot of work, but it really isn't. Shove it all into a class and you will love yourself for many animations to come.