pathMenu效果,这个效果已经出了很长时间了。今天有空,就仿制了效果。
主要是为了巩固自己的动画知识。和大家分享一下
效果图
此效果不难,分析一下就会发现,此效果就是一个位置变换的动画(Translate),在变换的过程中,将每个不同按钮的启动时间设置不同(startOffSet),这样出现递进的效果,最后添加到Interpolator (OvershootInterpolator 此效果是回弹的效果)
主要类
package com.example.mypathmenu;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.ViewGroup.MarginLayoutParams;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnticipateInterpolator;
import android.view.animation.OvershootInterpolator;
import android.view.animation.RotateAnimation;
import android.view.animation.TranslateAnimation;
public class MyAnimation {
private static View childAt;
/**
* 加号旋转
* @param viewGroup
* @param duration
*/
public static void getRotAnimation(ViewGroup viewGroup,int duration){
for(int i=0;i<viewGroup.getChildCount();i++){
childAt = viewGroup.getChildAt(i);
}
Animation rotAnimation=new RotateAnimation(0, 270, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotAnimation.setDuration(duration);
childAt.startAnimation(rotAnimation);
}
/**
* 进入的方法,是针对每一个按钮,按钮是在外层可以在再布局中将imageButton 的gone去掉
* @param group
* @param duration
*/
public static void startAnimationIn(ViewGroup viewGruop,int duration){
for(int i=0;i<viewGruop.getChildCount();i++){
View childView = viewGruop.getChildAt(i);
childView.setVisibility(View.VISIBLE);
MarginLayoutParams mariginLayoutParams = (MarginLayoutParams) childView.getLayoutParams();//MarginLayoutParams此类可以获得rightmargin等
//x轴是从mariginLayoutParams.rightMargin到自己(0F),Y轴是从mariginLayoutParams.bottomMargin到自己
Animation tlAnimation=new TranslateAnimation(mariginLayoutParams.rightMargin, 0F, mariginLayoutParams.bottomMargin, 0F);
tlAnimation.setFillAfter(true);//动画完成后,停留到结束位置
tlAnimation.setDuration(duration);//动画的时间
tlAnimation.setStartOffset((i*100)/(-1*viewGruop.getChildCount()));//每个按钮启动的时间
tlAnimation.setInterpolator(new OvershootInterpolator(2f));//设置效果
childView.startAnimation(tlAnimation);//开启动画
}
}
/**
* 出去的方法,效果是所有按钮合并到红色区域内
* @param viewGroup
* @param duration
*/
public static void startAnimationOut(ViewGroup viewGroup,int duration){
for(int i=0;i<viewGroup.getChildCount();i++){
final View viewChild = viewGroup.getChildAt(i);
MarginLayoutParams layoutParams = (MarginLayoutParams) viewChild.getLayoutParams();
Animation animation=new TranslateAnimation(0F, layoutParams.rightMargin, 0F, layoutParams.bottomMargin);
animation.setFillAfter(true);animation.setDuration(duration);
animation.setStartOffset(((viewGroup.getChildCount()-i) * 100)
/ (-1 + viewGroup.getChildCount()));
animation.setInterpolator(new AnticipateInterpolator(2F));
animation.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
viewChild.setVisibility(View.GONE);//动画结束之后将iamgeButon隐藏
}
});
viewChild.startAnimation(animation);
}
}
}
布局文件
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="@+id/composer_buttons_wrapper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:clipChildren="false"
android:clipToPadding="false"
android:layout_marginBottom="6dp"
android:layout_marginRight="6dp"
>
<ImageButton
android:id="@+id/composer_button_photo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="142dp"
android:layout_marginRight="10.667dp"
android:background="@drawable/composer_camera"
android:visibility="gone" />
<ImageButton
android:id="@+id/composer_button_people"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="135.333dp"
android:layout_marginRight="52dp"
android:background="@drawable/composer_with"
android:visibility="gone" />
<ImageButton
android:id="@+id/composer_button_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="116.666dp"
android:layout_marginRight="89.33333333333333dp"
android:background="@drawable/composer_place"
android:visibility="gone" />
<ImageButton
android:id="@+id/composer_button_music"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="87.33333333333333dp"
android:layout_marginRight="118.6666666666667dp"
android:background="@drawable/composer_music"
android:visibility="gone" />
<ImageButton
android:id="@+id/composer_button_thought"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="50dp"
android:layout_marginRight="137.3333333333333dp"
android:background="@drawable/composer_thought"
android:visibility="gone" />
<ImageButton
android:id="@+id/composer_button_sleep"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="8.666666666666667dp"
android:layout_marginRight="144dp"
android:background="@drawable/composer_sleep"
android:visibility="gone" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/rl_rot"
android:layout_width="60dp"
android:layout_height="57.33333333333333dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@drawable/composer_button" >
<ImageView
android:id="@+id/iv_rot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@drawable/composer_icn_plus" />
</RelativeLayout>
</RelativeLayout>
activity文件
package com.example.mypathmenu;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.os.Build;
public class MainActivity extends Activity {
private View mIvRot;
private View mRlRot;
private View vWrapper;//按钮组
private boolean isShow;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mIvRot = findViewById(R.id.iv_rot);//加号文件
mRlRot = findViewById(R.id.rl_rot);//红色区域
vWrapper = findViewById(R.id.composer_buttons_wrapper);//imagebutton组
mRlRot.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
MyAnimation.getRotAnimation((RelativeLayout)mRlRot, 500);//加号旋转
if(isShow){
//显示
MyAnimation.startAnimationOut((RelativeLayout)vWrapper, 500);//从红色区域imagebutton弹出
isShow=false;
}else{
MyAnimation.startAnimationIn((RelativeLayout)vWrapper, 500);
isShow=true;
}
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
/**
* A placeholder fragment containing a simple view.
*/
public static class PlaceholderFragment extends Fragment {
public PlaceholderFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_main, container,
false);
return rootView;
}
}
}
源码地址:
http://download.csdn.net/detail/pangzaifei/7311575