Superb button animation effect

Today, I saw such an effect on the internet, and I felt very creative. I also collected some information and modeled it for a moment.

The following is the source code:

First, let's take a look at the layout file:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout android:layout_width="fill_parent"android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"android:background="#ffffff"><ImageView android:layout_width="wrap_content"android:layout_height="fill_parent" android:background="@drawable/splash_shadow"android:layout_marginLeft="50dip" /><RelativeLayout android:id="@+id/relativeLayout_top_bar"android:layout_width="fill_parent" android:layout_height="40dip"android:background="@drawable/qa_bar"><ImageView android:layout_width="60dip"android:layout_height="20dip" android:background="@drawable/qa_logo"android:layout_centerInParent="true" /></RelativeLayout><TextView android:layout_below="@id/relativeLayout_top_bar"android:layout_width="wrap_content" android:layout_height="wrap_content"android:textSize="20sp" android:text="Tap to Refresh"android:layout_centerHorizontal="true" android:layout_marginTop="50dip" android:textStyle="bold"/><Button android:id="@+id/button_composer_sleep"android:layout_width="wrap_content" android:layout_height="wrap_content"android:background="@drawable/composer_sleep"android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"android:layout_alignParentBottom="true"></Button><Button android:id="@+id/button_composer_thought"android:layout_width="wrap_content" android:layout_height="wrap_content"android:background="@drawable/composer_thought"android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_sleep"></Button><Button android:id="@+id/button_composer_music"android:layout_width="wrap_content" android:layout_height="wrap_content"android:background="@drawable/composer_music"android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"android:layout_alignParentBottom="true"></Button><Button android:id="@+id/button_composer_place"android:layout_width="wrap_content" android:layout_height="wrap_content"android:background="@drawable/composer_place"android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_music"></Button><Button android:id="@+id/button_composer_with"android:layout_width="wrap_content" android:layout_height="wrap_content"android:background="@drawable/composer_with"android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_place"></Button><Button android:id="@+id/button_composer_camera"android:layout_width="wrap_content" android:layout_height="wrap_content"android:background="@drawable/composer_camera"android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_with"></Button><Button android:id="@+id/button_friends_delete"android:layout_width="wrap_content" android:layout_height="wrap_content"android:background="@drawable/friends_delete"android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_camera"></Button></RelativeLayout>

Core category for button Animation:

Package cn.com. kar. test; import android. r. anim; import android. app. activity; import android. OS. bundle; import android. util. log; import android. view. display; import android. view. view; import android. view. view. onclicklistener; import android. view. animation. animation; import android. view. animation. rotateanimation; import android. view. animation. scaleanimation; import android. view. animation. translateanimation; import android. view. animation. animation. animationlistener; import android. widget. button; import android. widget. relativelayout. layoutparams; public class pathbuttonactivity extends activity {private button buttoncamera, buttondelete, buttonwith, buttonplace, buttonmusic, birthday, buttonsleep; private animation animationtranslate, duration, animationscale; Private Static int width; private layoutparams Params = new layoutparams (0, 0); Private Static Boolean isclick = false;/** called when the activity is first created. * // @ override public void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate); setcontentview (R. layout. path_button); initialbutton ();} private void initialbutton () {// todo auto-generated method stubdisplay display = getwindowmanager (). getdefadisplay display (); Height = display. getheight (); width = display. getwidth (); log. V ("width & height is:", String. valueof (width) + "," + String. valueof (height); Params. height = 50; Params. width = 50; // set the margin (INT left, int top, int right, int bottom) Params. setmargins (10, height-98, 0, 0); buttonsleep = (button) findviewbyid (R. id. button_composer_sleep); buttonsleep. setlayoutparams (Params); buttonthought = (button) findviewbyid (R. id. button_composer_thought); buttonthought. setlayoutparams (Params); buttonmusic = (button) findviewbyid (R. id. button_composer_music); buttonmusic. setlayoutparams (Params); buttonplace = (button) findviewbyid (R. id. button_composer_place); buttonplace. setlayoutparams (Params); buttonwith = (button) findviewbyid (R. id. button_composer_with); buttonwith. setlayoutparams (Params); buttoncamera = (button) findviewbyid (R. id. button_composer_camera); buttoncamera. setlayoutparams (Params); buttondelete = (button) findviewbyid (R. id. button_friends_delete); buttondelete. setlayoutparams (Params); buttondelete. setonclicklistener (New onclicklistener () {@ overridepublic void onclick (view v) {// todo auto-generated method stubif (isclick = false) {isclick = true; buttondelete. startanimation (animrotate (-45.0f, 0.5f, 0.45f); buttoncamera. startanimation (animtranslate (0.0f,-180.0f, 10, height-240, buttoncamera, 80); buttonwith. startanimation (animtranslate (30366f,-150366f, 60, height-230, buttonwith, 100); buttonplace. startanimation (animtranslate (70.0f,-1200000f, 110, height-210, buttonplace, 120); buttonmusic. startanimation (animtranslate (80366f,-110.0f, 150, height-180, buttonmusic, 140); buttonthought. startanimation (animtranslate (90.0f,-601_f, 175, height-135, buttonthought, 160); buttonsleep. startanimation (animtranslate (170.0f,-30366f, 190, height-90, buttonsleep, 180);} else {isclick = false; buttondelete. startanimation (animrotate (90.0f, 0.5f, 0.45f); buttoncamera. startanimation (animtranslate (0.0f, 140366f, 10, height-98, buttoncamera, 180); buttonwith. startanimation (animtranslate (-50366f, 130.0f, 10, height-98, buttonwith, 160); buttonplace. startanimation (animtranslate (-100366f, 110.0f, 10, height-98, buttonplace, 140); buttonmusic. startanimation (animtranslate (-140366f, 80366f, 10, height-98, buttonmusic, 120); buttonthought. startanimation (animtranslate (-160.0f, 40366f, 10, height-98, buttonthought, 80); buttonsleep. startanimation (animtranslate (-170.0f, 0.0f, 10, height-98, buttonsleep, 50) ;}}); buttoncamera. setonclicklistener (New onclicklistener () {@ overridepublic void onclick (view v) {// todo auto-generated method stubbuttoncamera. startanimation (setanimscale (2.5f, 2.5f); buttonwith. startanimation (setanimscale (0.0f, 0.0f); buttonplace. startanimation (setanimscale (0.0f, 0.0f); buttonmusic. startanimation (setanimscale (0.0f, 0.0f); buttonthought. startanimation (setanimscale (0.0f, 0.0f); buttonsleep. startanimation (setanimscale (0.0f, 0.0f); buttondelete. startanimation (setanimscale (0.0f, 0.0f) ;}}); buttonwith. setonclicklistener (New onclicklistener () {@ overridepublic void onclick (view v) {// todo auto-generated method stubbuttonwith. startanimation (setanimscale (2.5f, 2.5f); buttoncamera. startanimation (setanimscale (0.0f, 0.0f); buttonplace. startanimation (setanimscale (0.0f, 0.0f); buttonmusic. startanimation (setanimscale (0.0f, 0.0f); buttonthought. startanimation (setanimscale (0.0f, 0.0f); buttonsleep. startanimation (setanimscale (0.0f, 0.0f); buttondelete. startanimation (setanimscale (0.0f, 0.0f) ;}}); buttonplace. setonclicklistener (New onclicklistener () {@ overridepublic void onclick (view v) {// todo auto-generated method stubbuttonplace. startanimation (setanimscale (2.5f, 2.5f); buttonwith. startanimation (setanimscale (0.0f, 0.0f); buttoncamera. startanimation (setanimscale (0.0f, 0.0f); buttonmusic. startanimation (setanimscale (0.0f, 0.0f); buttonthought. startanimation (setanimscale (0.0f, 0.0f); buttonsleep. startanimation (setanimscale (0.0f, 0.0f); buttondelete. startanimation (setanimscale (0.0f, 0.0f) ;}}); buttonmusic. setonclicklistener (New onclicklistener () {@ overridepublic void onclick (view v) {// todo auto-generated method stubbuttonmusic. startanimation (setanimscale (2.5f, 2.5f); buttonplace. startanimation (setanimscale (0.0f, 0.0f); buttonwith. startanimation (setanimscale (0.0f, 0.0f); buttoncamera. startanimation (setanimscale (0.0f, 0.0f); buttonthought. startanimation (setanimscale (0.0f, 0.0f); buttonsleep. startanimation (setanimscale (0.0f, 0.0f); buttondelete. startanimation (setanimscale (0.0f, 0.0f) ;}}); buttonthought. setonclicklistener (New onclicklistener () {@ overridepublic void onclick (view v) {// todo auto-generated method stubbuttonthought. startanimation (setanimscale (2.5f, 2.5f); buttonplace. startanimation (setanimscale (0.0f, 0.0f); buttonwith. startanimation (setanimscale (0.0f, 0.0f); buttoncamera. startanimation (setanimscale (0.0f, 0.0f); buttonmusic. startanimation (setanimscale (0.0f, 0.0f); buttonsleep. startanimation (setanimscale (0.0f, 0.0f); buttondelete. startanimation (setanimscale (0.0f, 0.0f) ;}}); buttonsleep. setonclicklistener (New onclicklistener () {@ overridepublic void onclick (view v) {// todo auto-generated method stubbuttonsleep. startanimation (setanimscale (2.5f, 2.5f); buttonplace. startanimation (setanimscale (0.0f, 0.0f); buttonwith. startanimation (setanimscale (0.0f, 0.0f); buttoncamera. startanimation (setanimscale (0.0f, 0.0f); buttonmusic. startanimation (setanimscale (0.0f, 0.0f); buttonthought. startanimation (setanimscale (0.0f, 0.0f); buttondelete. startanimation (setanimscale (0.0f, 0.0f) ;}});} protected animation setanimscale (float tox, float toy) {// todo auto-generated Method Evaluate = new scaleanimation (1f, tox, 1f, toy, animation. relative_to_self, 0.5f, animation. relative_to_self, 0.45f); animationscale. setinterpolator (pathbuttonactivity. this, anim. accelerate_decelerate_interpolator); animationscale. setduration (500); animationscale. setfillafter (false); Return animationscale;} protected animation animrotate (float todegrees, float between txvalue, float between tyvalue) {// todo auto-generated method between = new between (0, todegrees, animation. relative_to_self, effectxvalue, animation. relative_to_self, polictyvalue); animationrotate. setanimationlistener (New animationlistener () {@ overridepublic void onanimationstart (animation) {// todo auto-generated method stub} @ overridepublic void Merge (animation) {// todo auto-generated method stub} @ overridepublic void onanimationend (animation) {// todo auto-generated method stubanimationrotate. setfillafter (true) ;}}); Return animationrotate;} // move the animation effect/** translateanimation (float fromxdelta, float toxdelta, float fromydelta, float toydelta) ** float fromxdelta: the difference between the start point of the animation and the current view X coordinate. ** float toxdelta, this parameter indicates the difference between the animation end point and the current view X coordinate. ** float fromydelta indicates the difference between the animation start point and the current view y coordinate; ** float toydelta) indicates the difference between the animation start point and the current view y coordinate. */protected animation animtranslate (float tox, float toy, final int lastx, final int lasty, final button, long durationmillis) {// todo auto-generated method stubanimationtranslate = new translateanimation (0, tox, 0, toy); animationtranslate. setanimationlistener (New animationlistener () {@ overridepublic void onanimationstart (animation) {// todo auto-generated method stub} @ overridepublic void Merge (animation) {// todo auto-generated method stub} @ overridepublic void onanimationend (animation) {// todo auto-generated method stubparams = new layoutparams (0, 0); Params. height = 50; Params. width = 50; Params. setmargins (lastx, lasty, 0, 0); button. setlayoutparams (Params); button. clearanimation () ;}}); animationtranslate. setduration (durationmillis); Return animationtranslate ;}}

It is actually playing the tween animation when the button is clicked.

In this way, you can modify the style you like by referring to the above Code.

Let's take a look at the effect of running on my mobile phone: