Demo prototype of Button animation effect in the lower left corner of the path application on Android

It takes some time to use the path. I mentioned in my weibo post that I want to write a demo prototype. Recently, I just had time to implement it. For example:

 

Because it is an animation effect, it cannot be reflected here. You need to download the code and view it on the real machine.

Let's talk about the following ideas:

The overall layout is framelayout. All prototype icons are stacked together. The red button and the white plus button are at the top. The Code is as follows:

<Framelayout Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: layout_alignparentbottom = "true">
<Imageview Android: Id = "@ + ID/picture_tiankong"
Android: layout_width = "wrap_content" Android: layout_height = "wrap_content"
Android: src = "@ drawable/composer_camera"
Android: layout_gravity = "bottom"/>

<Imageview Android: Id = "@ + ID/music" Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content" Android: src = "@ drawable/composer_music"
Android: layout_gravity = "bottom"/>

<Imageview Android: Id = "@ + ID/Place" Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content" Android: src = "@ drawable/composer_place"
Android: layout_gravity = "bottom"/>

<Imageview Android: Id = "@ + ID/sleep" Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content" Android: src = "@ drawable/composer_sleep" Android: layout_gravity = "bottom"/>

<Imageview Android: Id = "@ + ID/thought" Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content" Android: src = "@ drawable/composer_thought" Android: layout_gravity = "bottom"/>

<Imageview Android: Id = "@ + ID/with" Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content" Android: src = "@ drawable/composer_with" Android: layout_gravity = "bottom"/>

<Framelayout Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content" Android: clickable = "true"
Android: onclick = "myanimation" Android: layout_gravity = "bottom">

<Imageview Android: Id = "@ + ID/friends" Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content" Android: src = "@ drawable/composer_button"/>

<Imageview Android: Id = "@ + ID/myplus" Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content" Android: src = "@ drawable/composer_icn_plus"
Android: layout_gravity = "center"/>
</Framelayout>
</Framelayout>

The animation is divided into two parts. The plus picture in the middle is used as the rotateanimation. For details, see android to implement a simple rotation animation. For details about the transfer animation of other images, see: android implements simple mobile animation ).

Note that the interpolation animation value should be set:

Translateanimation. setinterpolator (New overshootinterpolator ());

There is also a simple algorithm involved, that is, the semi-circular circle, and the final Moving Coordinate of each image. I wrote a few wrong values here, without strict calculation.

Source code see: http://bigcateasymorse.googlecode.com/svn/trunk/path_translate_animation_demo/