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
  • 相关阅读:
    ASP.NET CORE 使用Consul实现服务治理与健康检查(2)——源码篇
    ASP.NET CORE 使用Consul实现服务治理与健康检查(1)——概念篇
    Asp.Net Core 单元测试正确姿势
    如何通过 Docker 部署 Logstash 同步 Mysql 数据库数据到 ElasticSearch
    Asp.Net Core2.2 源码阅读系列——控制台日志源码解析
    使用VS Code 开发.NET CORE 程序指南
    .NetCore下ES查询驱动 PlainElastic .Net 升级官方驱动 Elasticsearch .Net
    重新认识 async/await 语法糖
    EF添加
    EF修改部分字段
  • 原文地址：https://www.cnblogs.com/dyllove98/p/3148214.html
Copyright © 2011-2022 走看看