Android apps animation practice

 

Introduction

 

try to search a bit android animation Chinese data, many of which are some of the boring translation api some documents, there is little to explain how to use animation system develop an application data, suddenly found nor how many applications focus on animation app application of thought, his attempt to summarize it. Because, I do not what animators, the animation can not do very brilliant, had the use of built-in effects, simple processing, and how to play by you to be creative. Whereas, a lot of information about the android animation inside are heaps of code, so, were placed on github all the code above, you can view the complete code venue to github go above .

 

specifically explain, because android emulator and recording tools reasons, examples show the gif cramps playback is not equivalent to the actual results, their brain cramp complement to remove the part

 

android animation based on

 

on Android where you can use animation effects:

 

  

• pan

  

• Zoom

  

• rotation

  

• transparent

 

 

animation above is the basic use of the contents of this article. Because, my ability, really do not see bright spots in the movie, they make do with watching it. However, those stunning animation effects is the basis of these.

 

Interpolators (interpolator)

 

general, do animation, physics formula needs to be encapsulated point, with the frame and the frames for calculating numerical calculation, however, if only in order to engage in some of these animations allow app easy to use, do not fall so complicated, android official api have a good package of some commonly used animation interpolator.

 

default built-in seven types of interpolation, personal feel, if only applied inside some of the animation, then this 7 suffice.

 

  

1. AccelerateInterpolator

      

       

   accelerated
   

      

  

2. Decelerate

      

       

   deceleration
   

      

  

3. AccelerateDecelerateInterpolator

      

       

   beginning and end are very slow, but in the middle accelerated
   

      

  

4. AnticipateInterpolator

      

       

   started back a little, and then forward throwing
   

      

  

5. OvershootInterpolator

      

       

   forward throwing more than a little, and then return to
   

      

  

6. AnticipateOvershootInterpolator

      

       

   a little backwards, forward throw off point, and then return to
   < img style = "display: inline;" title = "anticipate_overshoot" src = "http://images.cnitblog.com/blog/199034/201305/31021611-3e65e36f574a49b3803b80b9bfc244d1.gif" alt = "anticipate_overshoot" width = "203" height = "240" />

      

  

7. BounceInterpolator

      

       

   the end of the bomb that
   

      

  

8. LinearInterpolator

      

       

   uniform

      

 

 

animation above are derived from official android api demo, select examples with eclipse adt android project navigator, and then select APIDEMOS able to create (what is heard? now know it...)

 

Well, although the interception gif animation feels a bit cramped, then how do we use this knowledge in the application do?

 

combination Animation

 

animation api information currently explain more, here is not to repeat those basic knowledge of!

 

Now let us learn how to use, pan, zoom, rotate, create bright spots in the movie.

 

order, more purposeful use of animation, the following hypothetical usage scenario.

 

imaginary: Shopping Cart Case

 

  

Notice: In order to facilitate see effects, animation delay time will be set relatively long. Specifically explain: imaginary is just like, not condemnation.

 

 

task:

 

In order to allow a better app store interactive effects, decided to cart merchandise controls above controls and add some animation effects.

 

cart animation design:

 

use, transparent, pan, the emergence of the shopping cart and leave increase the animation interactivity.

 

After some effort effect is as follows (make do and see.):

 

  

 

 

related knowledge points

 

some animation based on common attributes General:

 

  

Notice: the so-called universal means all animation labels applied to these attributes

 

 

  
• android: duration to set animation playback time
  
• android: startOffset to set the animation starts playing time
  
• andorid: interpolator to set the animation interpolator
  
• android: repeatCount number of commonly used animation
  
• android: repeatMode Animation replay mode, that from start to finish, from start to finish, or start to finish, from the tail to the head.
 

 

transparent use:

 

 

  

value from 0 (transparent) to 1 (opaque) in android transparently mainly used for view fade in, fade-out effect control has two main attributes

 

 

  
• android: fromAlpha view the animation begins transparency.
  
• android: toAlpha view the animation ends of transparency.
 

 

translation using:

 

 

  

support the use of%, such as "50%" acquired 50 percent of this view, in addition to another wording: "50% p" means to obtain this view on a view of the 50% of course, specify a particular value is also supported by the "22.2", but for android devices compatible with more percentage of the value of the proposed use.

 

 

  

• android: fromXDelta <​​code>

  

• android: fromYDelta <​​code>

     

      

  from? Delta mean the beginning of the axis

     

  

• android: toXDelta <​​code>

  

• android: toYDelta <​​code>

     

      

  to? Delta mean the end of the axis

     

 

 

this program shows two interpolator used:

 

used to appear: BounceInterpolator

 

for leaving: AnticipateInterpolator

 

What is interpolator?

 

called interpolator is used to change between the initial value, which is equivalent to a similar thing physics engine. Official android built some simple commonly used numerical transformation, let us do not need to learn the relevant knowledge of physics.

 

For example:

 

start value is 1, the end value of 100. So how do we change this value change control process it? Here is the interpolation are used.

 

generally uniform word is:

 

1,2,3,4,5 ... 100. Then we will see the speed of an object to a uniform pan operation.

 

then we need an object like a car like acceleration forward, we can accelerate interpolator, from 1 to 100, the process would be:

 

1,2,4,5,8,16.. . . . 100 shows the view in front of us with an acceleration of the object will be in the form of pan.

 

many application developers are not familiar with some basic knowledge of animation, you may not quite understand. Now, through the source code analysis to completely understood the concept.

 

We analyze several Interpolator class tree:

 

from api documentation TimeInterpolator we can know that the realization of this interpolation is only one way:

 

  

getInterpolation (float t);

 

 

Then we pick previously used BounceInterpolator facie, it is how to implement this method. If you are interested, you can follow this method, the implementation of several other interpolators are read through.

 

Finally, we will find that the interpolator is the role of the return value.

 

Then we look at the Animation line: 869 is how to use this interface.

 

read this a few places, I believe should android animation framework for how the values ​​should understand the principles of transformation.

 

With the above knowledge, we have basically android animation framework fully understand, now, we use the knowledge learned, for better animation design.

 We then just

case, set out to design merchandise controls animation design

 

goods Animation Design:

 

This time, we learn a new animated tag scaling ( )

 

effect is as follows:

 

 

 

  

the view point, or large dots

 

 

  

• android: fromXScale

  

• android: fromYScale

     

      

  from? Scale mean start axis scaling (default 1.0)

     

  

• android: toXScale

  

• android: toYScale

     

      

  to? Scale mean the end of the axis scaling (default 1.0)

     

  

• android: pivotX

  

• android: pivotX

     

      

  rotation axis point coordinates using

     

 

 

Finally, we put the cart animation, and merchandise animation combined. Effect is as follows:

 

added goods, if the shopping cart has not appeared, first appeared Cart animated, animation making commodities.

 

concrete realization line: 77 -104

 

 

 

This time we learn how to listen for the animation of the action, for AnimationListener () There are three

 

  

• onAnimationStart (Animation animation)

  

• onAnimationRepeat (Animation animation)

  

• onAnimationEnd (Animation animation)