zoukankan      html  css  js  c++  java

  • 超炫的Button按钮展开弧形动画效果

    ----------------------收藏备用  -------------------------------

    代码下载：http://download.csdn.net/detail/qq263229365/5622693

      

      今天从网上看到一个这样的效果，感觉很有创意，自己也搜集了一些资料，仿照着实现了一下。

        下面就直接上源码：

        首先看一下布局文件：

     

    [html]  view plain copy
     
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <RelativeLayout android:layout_width="fill_parent"  
    3.     android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"  
    4.     android:background="#ffffff">  
    5.   
    6.     <ImageView android:layout_width="wrap_content"  
    7.         android:layout_height="fill_parent" android:background="@drawable/splash_shadow"  
    8.         android:layout_marginLeft="50dip" />  
    9.   
    10.     <RelativeLayout android:id="@+id/relativeLayout_top_bar"  
    11.         android:layout_width="fill_parent" android:layout_height="40dip"  
    12.         android:background="@drawable/qa_bar">  
    13.   
    14.         <ImageView android:layout_width="60dip"  
    15.             android:layout_height="20dip" android:background="@drawable/qa_logo"  
    16.             android:layout_centerInParent="true" />  
    17.   
    18.     </RelativeLayout>  
    19.   
    20.     <TextView android:layout_below="@id/relativeLayout_top_bar"  
    21.         android:layout_width="wrap_content" android:layout_height="wrap_content"  
    22.         android:textSize="20sp" android:text="Tap to Refresh"  
    23.         android:layout_centerHorizontal="true" android:layout_marginTop="50dip" android:textStyle="bold"/>  
    24.   
    25.   
    26.     <Button android:id="@+id/button_composer_sleep"  
    27.         android:layout_width="wrap_content" android:layout_height="wrap_content"  
    28.         android:background="@drawable/composer_sleep"  
    29.         android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"  
    30.         android:layout_alignParentBottom="true">  
    31.     </Button>  
    32.   
    33.     <Button android:id="@+id/button_composer_thought"  
    34.         android:layout_width="wrap_content" android:layout_height="wrap_content"  
    35.         android:background="@drawable/composer_thought"  
    36.         android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"  
    37.         android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_sleep">  
    38.     </Button>  
    39.   
    40.     <Button android:id="@+id/button_composer_music"  
    41.         android:layout_width="wrap_content" android:layout_height="wrap_content"  
    42.         android:background="@drawable/composer_music"  
    43.         android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"  
    44.         android:layout_alignParentBottom="true">  
    45.     </Button>  
    46.   
    47.     <Button android:id="@+id/button_composer_place"  
    48.         android:layout_width="wrap_content" android:layout_height="wrap_content"  
    49.         android:background="@drawable/composer_place"  
    50.         android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"  
    51.         android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_music">  
    52.     </Button>  
    53.   
    54.   
    55.     <Button android:id="@+id/button_composer_with"  
    56.         android:layout_width="wrap_content" android:layout_height="wrap_content"  
    57.         android:background="@drawable/composer_with"  
    58.         android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"  
    59.         android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_place">  
    60.     </Button>  
    61.   
    62.   
    63.     <Button android:id="@+id/button_composer_camera"  
    64.         android:layout_width="wrap_content" android:layout_height="wrap_content"  
    65.         android:background="@drawable/composer_camera"  
    66.         android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"  
    67.         android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_with">  
    68.     </Button>  
    69.   
    70.   
    71.     <Button android:id="@+id/button_friends_delete"  
    72.         android:layout_width="wrap_content" android:layout_height="wrap_content"  
    73.         android:background="@drawable/friends_delete"  
    74.         android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"  
    75.         android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_camera">  
    76.     </Button>  
    77.   
    78.   
    79. </RelativeLayout>  

    实现button按钮动画效果的核心类：

     

     

    [html]  view plain copy
     
    1. package cn.com.kar.test;  
    2.   
    3. import android.R.anim;  
    4. import android.app.Activity;  
    5. import android.os.Bundle;  
    6. import android.util.Log;  
    7. import android.view.Display;  
    8. import android.view.View;  
    9. import android.view.View.OnClickListener;  
    10. import android.view.animation.Animation;  
    11. import android.view.animation.RotateAnimation;  
    12. import android.view.animation.ScaleAnimation;  
    13. import android.view.animation.TranslateAnimation;  
    14. import android.view.animation.Animation.AnimationListener;  
    15. import android.widget.Button;  
    16. import android.widget.RelativeLayout.LayoutParams;  
    17.   
    18. public class PathButtonActivity extends Activity   
    19. {  
    20.     private Button buttonCamera, buttonDelete, buttonWith, buttonPlace, buttonMusic, buttonThought, buttonSleep;  
    21.     private Animation animationTranslate, animationRotate, animationScale;  
    22.     private static int width, height;  
    23.     private LayoutParams params = new LayoutParams(0, 0);  
    24.     private static Boolean isClick = false;  
    25.       
    26.     /** Called when the activity is first created. */  
    27.     @Override  
    28.     public void onCreate(Bundle savedInstanceState)   
    29.     {  
    30.         super.onCreate(savedInstanceState);  
    31.         setContentView(R.layout.path_button);  
    32.           
    33.         initialButton();  
    34.     
    35.           
    36.     }  
    37.     private void initialButton()   
    38.     {  
    39.         // TODO Auto-generated method stub  
    40.         Display display = getWindowManager().getDefaultDisplay();   
    41.         height = display.getHeight();    
    42.         width = display.getWidth();  
    43.         Log.v("width  & height is:", String.valueOf(width) + ", " + String.valueOf(height));  
    44.           
    45.         params.height = 50;  
    46.         params.width = 50;  
    47.         //设置边距  (int left, int top, int right, int bottom)  
    48.         params.setMargins(10, height - 98, 0, 0);  
    49.           
    50.         buttonSleep = (Button) findViewById(R.id.button_composer_sleep);      
    51.         buttonSleep.setLayoutParams(params);  
    52.           
    53.         buttonThought = (Button) findViewById(R.id.button_composer_thought);  
    54.         buttonThought.setLayoutParams(params);  
    55.           
    56.         buttonMusic = (Button) findViewById(R.id.button_composer_music);  
    57.         buttonMusic.setLayoutParams(params);  
    58.           
    59.         buttonPlace = (Button) findViewById(R.id.button_composer_place);  
    60.         buttonPlace.setLayoutParams(params);  
    61.           
    62.         buttonWith = (Button) findViewById(R.id.button_composer_with);  
    63.         buttonWith.setLayoutParams(params);  
    64.   
    65.         buttonCamera = (Button) findViewById(R.id.button_composer_camera);  
    66.         buttonCamera.setLayoutParams(params);  
    67.           
    68.         buttonDelete = (Button) findViewById(R.id.button_friends_delete);         
    69.         buttonDelete.setLayoutParams(params);  
    70.           
    71.         buttonDelete.setOnClickListener(new OnClickListener()   
    72.         {  
    73.                   
    74.             @Override  
    75.             public void onClick(View v)   
    76.             {  
    77.                 // TODO Auto-generated method stub                    
    78.                 if(isClick == false)  
    79.                 {  
    80.                     isClick = true;  
    81.                     buttonDelete.startAnimation(animRotate(-45.0f, 0.5f, 0.45f));                     
    82.                     buttonCamera.startAnimation(animTranslate(0.0f, -180.0f, 10, height - 240, buttonCamera, 80));  
    83.                     buttonWith.startAnimation(animTranslate(30.0f, -150.0f, 60, height - 230, buttonWith, 100));  
    84.                     buttonPlace.startAnimation(animTranslate(70.0f, -120.0f, 110, height - 210, buttonPlace, 120));  
    85.                     buttonMusic.startAnimation(animTranslate(80.0f, -110.0f, 150, height - 180, buttonMusic, 140));  
    86.                     buttonThought.startAnimation(animTranslate(90.0f, -60.0f, 175, height - 135, buttonThought, 160));  
    87.                     buttonSleep.startAnimation(animTranslate(170.0f, -30.0f, 190, height - 90, buttonSleep, 180));  
    88.                   
    89.                 }  
    90.                 else  
    91.                 {                     
    92.                     isClick = false;  
    93.                     buttonDelete.startAnimation(animRotate(90.0f, 0.5f, 0.45f));  
    94.                     buttonCamera.startAnimation(animTranslate(0.0f, 140.0f, 10, height - 98, buttonCamera, 180));  
    95.                     buttonWith.startAnimation(animTranslate(-50.0f, 130.0f, 10, height - 98, buttonWith, 160));  
    96.                     buttonPlace.startAnimation(animTranslate(-100.0f, 110.0f, 10, height - 98, buttonPlace, 140));  
    97.                     buttonMusic.startAnimation(animTranslate(-140.0f, 80.0f, 10, height - 98, buttonMusic, 120));  
    98.                     buttonThought.startAnimation(animTranslate(-160.0f, 40.0f, 10, height - 98, buttonThought, 80));  
    99.                     buttonSleep.startAnimation(animTranslate(-170.0f, 0.0f, 10, height - 98, buttonSleep, 50));  
    100.                       
    101.                 }  
    102.                       
    103.             }  
    104.         });  
    105.         buttonCamera.setOnClickListener(new OnClickListener()   
    106.         {  
    107.                   
    108.             @Override  
    109.             public void onClick(View v)   
    110.             {  
    111.                 // TODO Auto-generated method stub    
    112.                 buttonCamera.startAnimation(setAnimScale(2.5f, 2.5f));  
    113.                 buttonWith.startAnimation(setAnimScale(0.0f, 0.0f));      
    114.                 buttonPlace.startAnimation(setAnimScale(0.0f, 0.0f));  
    115.                 buttonMusic.startAnimation(setAnimScale(0.0f, 0.0f));  
    116.                 buttonThought.startAnimation(setAnimScale(0.0f, 0.0f));  
    117.                 buttonSleep.startAnimation(setAnimScale(0.0f, 0.0f));  
    118.                 buttonDelete.startAnimation(setAnimScale(0.0f, 0.0f));  
    119.             }  
    120.         });  
    121.         buttonWith.setOnClickListener(new OnClickListener()   
    122.         {  
    123.                   
    124.             @Override  
    125.             public void onClick(View v)   
    126.             {  
    127.                 // TODO Auto-generated method stub                    
    128.                 buttonWith.startAnimation(setAnimScale(2.5f, 2.5f));      
    129.                 buttonCamera.startAnimation(setAnimScale(0.0f, 0.0f));    
    130.                 buttonPlace.startAnimation(setAnimScale(0.0f, 0.0f));  
    131.                 buttonMusic.startAnimation(setAnimScale(0.0f, 0.0f));  
    132.                 buttonThought.startAnimation(setAnimScale(0.0f, 0.0f));  
    133.                 buttonSleep.startAnimation(setAnimScale(0.0f, 0.0f));  
    134.                 buttonDelete.startAnimation(setAnimScale(0.0f, 0.0f));  
    135.             }  
    136.         });  
    137.         buttonPlace.setOnClickListener(new OnClickListener()   
    138.         {  
    139.                   
    140.             @Override  
    141.             public void onClick(View v)   
    142.             {  
    143.                 // TODO Auto-generated method stub                    
    144.                 buttonPlace.startAnimation(setAnimScale(2.5f, 2.5f));  
    145.                 buttonWith.startAnimation(setAnimScale(0.0f, 0.0f));      
    146.                 buttonCamera.startAnimation(setAnimScale(0.0f, 0.0f));    
    147.                 buttonMusic.startAnimation(setAnimScale(0.0f, 0.0f));  
    148.                 buttonThought.startAnimation(setAnimScale(0.0f, 0.0f));  
    149.                 buttonSleep.startAnimation(setAnimScale(0.0f, 0.0f));  
    150.                 buttonDelete.startAnimation(setAnimScale(0.0f, 0.0f));  
    151.             }  
    152.         });  
    153.         buttonMusic.setOnClickListener(new OnClickListener()   
    154.         {  
    155.                   
    156.             @Override  
    157.             public void onClick(View v)   
    158.             {  
    159.                 // TODO Auto-generated method stub                    
    160.                 buttonMusic.startAnimation(setAnimScale(2.5f, 2.5f));  
    161.                 buttonPlace.startAnimation(setAnimScale(0.0f, 0.0f));  
    162.                 buttonWith.startAnimation(setAnimScale(0.0f, 0.0f));      
    163.                 buttonCamera.startAnimation(setAnimScale(0.0f, 0.0f));    
    164.                 buttonThought.startAnimation(setAnimScale(0.0f, 0.0f));  
    165.                 buttonSleep.startAnimation(setAnimScale(0.0f, 0.0f));  
    166.                 buttonDelete.startAnimation(setAnimScale(0.0f, 0.0f));  
    167.             }  
    168.         });  
    169.         buttonThought.setOnClickListener(new OnClickListener()   
    170.         {  
    171.                   
    172.             @Override  
    173.             public void onClick(View v)   
    174.             {  
    175.                 // TODO Auto-generated method stub                    
    176.                 buttonThought.startAnimation(setAnimScale(2.5f, 2.5f));  
    177.                 buttonPlace.startAnimation(setAnimScale(0.0f, 0.0f));  
    178.                 buttonWith.startAnimation(setAnimScale(0.0f, 0.0f));      
    179.                 buttonCamera.startAnimation(setAnimScale(0.0f, 0.0f));    
    180.                 buttonMusic.startAnimation(setAnimScale(0.0f, 0.0f));  
    181.                 buttonSleep.startAnimation(setAnimScale(0.0f, 0.0f));  
    182.                 buttonDelete.startAnimation(setAnimScale(0.0f, 0.0f));  
    183.             }  
    184.         });  
    185.         buttonSleep.setOnClickListener(new OnClickListener()   
    186.         {  
    187.                   
    188.             @Override  
    189.             public void onClick(View v)   
    190.             {  
    191.                 // TODO Auto-generated method stub                    
    192.                 buttonSleep.startAnimation(setAnimScale(2.5f, 2.5f));  
    193.                 buttonPlace.startAnimation(setAnimScale(0.0f, 0.0f));  
    194.                 buttonWith.startAnimation(setAnimScale(0.0f, 0.0f));      
    195.                 buttonCamera.startAnimation(setAnimScale(0.0f, 0.0f));    
    196.                 buttonMusic.startAnimation(setAnimScale(0.0f, 0.0f));  
    197.                 buttonThought.startAnimation(setAnimScale(0.0f, 0.0f));  
    198.                 buttonDelete.startAnimation(setAnimScale(0.0f, 0.0f));  
    199.             }  
    200.         });  
    201.           
    202.     }  
    203.       
    204.     protected Animation setAnimScale(float toX, float toY)   
    205.     {  
    206.         // TODO Auto-generated method stub  
    207.         animationScale = new ScaleAnimation(1f, toX, 1f, toY, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.45f);  
    208.         animationScale.setInterpolator(PathButtonActivity.this, anim.accelerate_decelerate_interpolator);  
    209.         animationScale.setDuration(500);  
    210.         animationScale.setFillAfter(false);  
    211.         return animationScale;  
    212.           
    213.     }  
    214.       
    215.     protected Animation animRotate(float toDegrees, float pivotXValue, float pivotYValue)   
    216.     {  
    217.         // TODO Auto-generated method stub  
    218.         animationRotate = new RotateAnimation(0, toDegrees, Animation.RELATIVE_TO_SELF, pivotXValue, Animation.RELATIVE_TO_SELF, pivotYValue);  
    219.         animationRotate.setAnimationListener(new AnimationListener()   
    220.         {  
    221.               
    222.             @Override  
    223.             public void onAnimationStart(Animation animation)   
    224.             {  
    225.                 // TODO Auto-generated method stub  
    226.                   
    227.             }  
    228.               
    229.             @Override  
    230.             public void onAnimationRepeat(Animation animation)   
    231.             {  
    232.                 // TODO Auto-generated method stub  
    233.                   
    234.             }  
    235.               
    236.             @Override  
    237.             public void onAnimationEnd(Animation animation)   
    238.             {  
    239.                 // TODO Auto-generated method stub  
    240.                 animationRotate.setFillAfter(true);  
    241.             }  
    242.         });  
    243.         return animationRotate;  
    244.     }  
    245.     //移动的动画效果          
    246.     /*   
    247.      * TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)   
    248.      *   
    249.      * float fromXDelta:这个参数表示动画开始的点离当前View X坐标上的差值；  
    250.      *  
    251.        * float toXDelta, 这个参数表示动画结束的点离当前View X坐标上的差值；  
    252.      *  
    253.        * float fromYDelta, 这个参数表示动画开始的点离当前View Y坐标上的差值；  
    254.      *  
    255.        * float toYDelta)这个参数表示动画开始的点离当前View Y坐标上的差值；  
    256.      */  
    257.     protected Animation animTranslate(float toX, float toY, final int lastX, final int lastY,  
    258.             final Button button, long durationMillis)   
    259.     {  
    260.         // TODO Auto-generated method stub  
    261.         animationTranslate = new TranslateAnimation(0, toX, 0, toY);                  
    262.         animationTranslate.setAnimationListener(new AnimationListener()  
    263.         {  
    264.                           
    265.             @Override  
    266.             public void onAnimationStart(Animation animation)  
    267.             {  
    268.                 // TODO Auto-generated method stub  
    269.                                   
    270.             }  
    271.                           
    272.             @Override  
    273.             public void onAnimationRepeat(Animation animation)   
    274.             {  
    275.                 // TODO Auto-generated method stub  
    276.                               
    277.             }  
    278.                           
    279.             @Override  
    280.             public void onAnimationEnd(Animation animation)  
    281.             {  
    282.                 // TODO Auto-generated method stub  
    283.                 params = new LayoutParams(0, 0);  
    284.                 params.height = 50;  
    285.                 params.width = 50;                                            
    286.                 params.setMargins(lastX, lastY, 0, 0);  
    287.                 button.setLayoutParams(params);  
    288.                 button.clearAnimation();  
    289.                           
    290.             }  
    291.         });                                                                                               
    292.         animationTranslate.setDuration(durationMillis);  
    293.         return animationTranslate;  
    294.     }  
    295.       
    296.   
    297.           
    298. }  

     

    其实就是在button点击的时候播放Tween动画。

    这样就基本完成，参照上面的代码 自己也可以自行修改成自己喜欢的样式。

    看一下在我手机上运行的效果：


    代码下载：http://download.csdn.net/detail/qq263229365/5622693
  • 相关阅读:
    SQLERRM, use it with caution.
    nginx 的常用优化
    （备忘） 快速启动栏 “显示桌面”丢失 解决方案
    Invoke and BeginInvoke BeginInvoke和EndInvoke方法 （转）
    枚举CE进程
    WinForm 中DataGrideView 对键盘输入进行筛选
    双网卡上网（转载）
    在MSSQL上强制删除订阅 （转）
    sql server系统表详细说明(转)
    event.keycode大全(javascript)
  • 原文地址：https://www.cnblogs.com/dyllove98/p/3148214.html
Copyright © 2011-2022 走看看