I am implementing a animated book in Android and the animations are defined by an XML (not an Android XML). The images are positioned in fixed positions and when user touches in a element on the screen, the app plays a sound and animate the imagebutton, changing the image src and positions (X and Y).
I want to know how can I do that. As images dot not have the same size, I think the sprites solution is not a good way to solve it.
Its like the image 2:
Thank you
There are two types of animations:
View Animation and Proprety Animation.
The view animation can only animate View objects. It also lack a variety of animations, since it can do only stuff as scale, rotate, move... It cannot change background color, for example. Also, the dissadvantage of the View Animation is that it only change the position of where the View object is DRAWN. Phisically, it still stays in the same position. That's why the button is unclickable, after the View Animation is finished upon it.
Property Animation, in the other hand, can animate both View and non-View objects and it doesn't have constraints as the View Animation. When objects are moved, for example, with the property animation, they are not just drawn on some other position on the screen, but they are actually MOVED there.
Now, Property Animation is a lot more complex to write than the View Animation, so if you don't really need all the advantages of the Property Animation, it is suggested to use View Animation.
Source: Property vs ViewAnimation
Tutorial and SupportLybrary up to API 1: Nine Old Androids
Related
I'm doing some research in utilizing Android's resource directories appropriately and the following isn't clear to me:
What is the difference between the android animator resource directory and the android anim resource directory?
http://developer.android.com/guide/topics/resources/providing-resources.html#AlternativeResources
Moreover I guess the question I'm asking is what is the difference between property animations and tween animations?
I honestly think Google have done a very good job explaining the differences in their Property Animations API guide (see below).
TL;DR the main differences are:
Tween animations are succinct and allow for the manipulation of no more than the location (translation), size (scale), angle (rotation) and translucency (alpha) of views. The property animations framework is more generic and flexible: It generalizes the former case by allowing for real-time updating of any property (e.g. "foobar") of animations' target-object -- provided it has a setFoobar() method. setScaleX(), setAlpha(), etc. are just a specific case when it comes to views.
Accordingly, implementing tween animations is often easier and the code is more lightweight.
Property animations can be used over target objects of any type, not just views: the only thing that matters is the definition of setFoobar() methods as explained earlier (reflection based method look-up).
Tween animations merely perform adjustments over views' configurations, while property animations effectively modify the object. A common flaw of the former approach is that when using animations for moving views around, the associated clickable area doesn't get updated throughout the animation and gets out-of-sync with the view's effective location on the screen.
To quote from the guide:
How Property Animation Differs from View Animation
The view animation system provides the capability to only animate View objects, so if you wanted to animate non-View objects, you have to implement your own code to do so. The view animation system is also constrained in the fact that it only exposes a few aspects of a View object to animate, such as the scaling and rotation of a View but not the background color, for instance.
Another disadvantage of the view animation system is that it only modified where the View was drawn, and not the actual View itself. For instance, if you animated a button to move across the screen, the button draws correctly, but the actual location where you can click the button does not change, so you have to implement your own logic to handle this.
With the property animation system, these constraints are completely removed, and you can animate any property of any object (Views and non-Views) and the object itself is actually modified. The property animation system is also more robust in the way it carries out animation. At a high level, you assign animators to the properties that you want to animate, such as color, position, or size and can define aspects of the animation such as interpolation and synchronization of multiple animators.
The view animation system, however, takes less time to setup and requires less code to write. If view animation accomplishes everything that you need to do, or if your existing code already works the way you want, there is no need to use the property animation system. It also might make sense to use both animation systems for different situations if the use case arises.
Basically Tween animations are standard animation,
for eg: Scale, Rotate, Translate, etc. (These can be applied to any type of views)
Where are Property Animations as the name suggest are used to change the Property of any View.
For eg: Changing Alpha of ImageView, in lollipop changing translationZ value of fab button, etc.
Hope that clarifies.
Check Android View Tween Animation
A tween animation can perform a series of simple transformations (position, size, rotation, and transparency) on the contents of a View object. So, if you have a TextView object, you can move, rotate, grow, or shrink the text. If it has a background image, the background image will be transformed along with the text. The animation package provides all the classes used in a tween animation.
check this url for Property Animation
The property animation system is a robust framework that allows you to animate almost anything. You can define an animation to change any object property over time, regardless of whether it draws to the screen or not. A property animation changes a property's (a field in an object) value over a specified length of time. To animate something, you specify the object property that you want to animate, such as an object's position on the screen, how long you want to animate it for, and what values you want to animate between.
Try this shorter answer:
res/anim -
Any view Tween Animation (scale, rotate, translate).
res/animator -
Certain views Property Animation (ImageView - change alpha, FAB - set Z-order).
I have two views in a ViewFlipper and have a fast/complex animation between them. The second view contains a list, so at the moment that view become visibile half way through the animation, getView() is called a bunch of times and causes a very noticeable stutter (usually stalling for the entire second half of the animation)
Ideally I would like to pre-render (measure, layout, draw) the second view before starting the animation, but I have not found a simple way to do this.
I have also explored using the drawing cache, off-screen canvases, etc - but I cannot find a simple way to achieve this either. Seems to be a problem anyone animating between two views would have. Any help?
You can do that by specifying a layer type and calling buildLayer() before you start your animation, which forces rendering the view.
newView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
newView.buildLayer();
You could also use LAYER_TYPE_SOFTWARE. The default value is LAYER_TYPE_NONE, which prevents buildLayer() to do anything.
Is it possible to rotate views in XML with APIs previous to Honeycomb - maybe with the support package? Or is the only way to create a custom class, like described here Vertical (rotated) label in Android
Edit: What I need is a statically rotated view (specifically a TextView, but I guess it's enough to know how to do it with a View). Starting with honeycomb there's a rotation attribute which can be used in XML. I need something like that.
The only thing I have found until now is use an animation with duration 0 but this still moves a bit at start and I don't want that. I tried setting the views invisible and attaching a listener to the animation which makes them visible on animation finished callback, but that made strange results... that changed the position of the views, for some reason.
The best way is with the custom subclass implementation that you linked to, where you can rotate the canvas and resize the view appropriately. This ensures that the view bounds are also set to match the text that is drawn.
The only method of transforming views externally prior to HC is the animation framework, and applying an Animation to the view with a duration of 0 and fillAfter set to true will work, but you may notice flickering on some devices as often the view will render normally on its first frame and then animated to its final position from that point onward. You can work around this by hiding the view and displaying it a bit late...but you can see how hacks are starting to stack up.
In addition, doing an Animation prior to HC will not transform the view bounds themselves, so you won't be able to neatly pack other views around this one because its position from a layout perspective will still be the rectangle calculated for the horizontal (non-rotated) text.
The simple subclass is definitely the preferred method.
HTH
Is it possible to rotate views in XML with APIs previous to Honeycomb
There is RotateAnimation. However, depending on what you are trying to accomplish, that may not meet your needs.
I am currently trying to animate a card game using an AnimationSet of Translate and Rotate animations. Although I am using setFillAfter(true) and see the card visibly move and stay in it's new position, the actual position of the ImageView is still at it's old location.
In the Google documentation it says:
Note: Regardless of how your animation may move or resize, the bounds of the View that holds your animation will not automatically adjust to accommodate it. Even so, the animation will still be drawn beyond the bounds of its View and will not be clipped. However, clipping will occur if the animation exceeds the bounds of the parent View.
This means that all of my old onClickListeners, etc are still being associated with the old position rather than the newly updated visual representation, and any new animation applied to the View occur from the initial spot, not the newly located one.
What is the best way to get the effect that I seek (a card sliding from my hand to the center of the screen, which is a different LinearLayout, and then in a later sequence sliding from that spot off the screen)?
I know what I seek is possible as the people at bytesequencing.com have accomplished this smooth animation effect in their android game "Hearts! (free)" which I discovered in the market.
Thanks!
As in the title of my question what are the methods setFillBefore() and setFillAfter() supposed to do?
I was hoping setFillAfter() would make the change to the View permanent after an animation has completed, but this is incorrect?
The answer is yes, they do work, just probably not for what you expect - for instance, the description for setFillAfter(boolean fillAfter) says
If fillAfter is true, the
transformation that this animation
performed will persist when it is
finished.
and when set to true it does do this.
However, unintuitively an animation on Android does not actually animate the View itself, rather it animates a bitmap representation of the View.
The issue you are probably having is that after an animation the View goes back to being how it was before the animation - setFillAfter and setFillBefore cannot help you with that, because in that situation what you really want to do is set the properties of the View to be same as the animated representation (they are separate things), and setFillAfter and setFillBefore only apply to animation properties, not View properties.
The reason they exist is for chaining animations. Suppose you had a translate animation followed by a fade out. If you did not set setFillAfter(true) on the translate animation, then the View would translate, jump back to it's original position and then fade out. With setFillAfter(true) set on the translate animation, the view will move and then fade out at it's current spot.