效果图:
制作思路:
1、先分析这个效果,其实可以理解为把三级菜单分成level1,level2,level3,level1是始终显示的。点击level1后,level2会出现;点击level2后,level3会出现;level2,level3出现后,点击level1,level2和level3都会消失。然后消失和出现我们用到了一个动画效果。
2、动画效果用到的是RotateAnimation,由于我们都是用同一个效果,那么我们只要写一个类,把效果实现了就可以了。要是使用RotateAnimation的话,我们会不断的复用一些代码,这样开发的效率会比较低。
3、RotateAnimation的旋转进入和旋转出去是个坑——因为他是在X轴顺时针方向旋转的。大家可以看看图:
整体思路就是这样,接下来就是一些操作了:
代码:
1、MyAnimation类:
public class MyAnimation{ public static void animationIn(View view){ animationIn(view,0); } public static void animationOut(View view){ animationOut(view,0); } public static void animationIn(View view,long delay){ RotateAnimation animation = new RotateAnimation(180, 360, view.getWidth()/2, view.getHeight()); animation.setDuration(500); animation.setFillAfter(true); animation.setStartOffset(delay); view.startAnimation(animation); } public static void animationOut(View view,long delay){ RotateAnimation animation = new RotateAnimation(0, 180, view.getWidth()/2, view.getHeight()); animation.setDuration(500); animation.setFillAfter(true); animation.setStartOffset(delay); view.startAnimation(animation); } }
public class MainActivity extends Activity implements OnClickListener{ private boolean isLevel2showed,isLevel3showed; private RelativeLayout level1,level2,level3; private ImageButton home,menu; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); isLevel2showed = false; isLevel3showed = false; initLayout(); initImageButton(); } public void initLayout() { level1 = (RelativeLayout)findViewById(R.id.relate_level1); level2 = (RelativeLayout)findViewById(R.id.relate_level2); level3 = (RelativeLayout)findViewById(R.id.relate_level3); level2.setVisibility(View.INVISIBLE); level3.setVisibility(View.INVISIBLE); } public void initImageButton() { home = (ImageButton)level1.findViewById(R.id.home); menu = (ImageButton)level2.findViewById(R.id.menu); home.setOnClickListener(this); menu.setOnClickListener(this); } @Override public void onClick(View v) { switch(v.getId()){ case R.id.home: if(!isLevel2showed){ isLevel2showed = true; MyAnimation.animationIn(level2); }else if(!isLevel3showed){ isLevel2showed = false; MyAnimation.animationOut(level2); }else{ isLevel2showed = false; isLevel3showed = false; MyAnimation.animationOut(level3); MyAnimation.animationOut(level2,500); } break; case R.id.menu: if(!isLevel3showed){ isLevel3showed = true; MyAnimation.animationIn(level3); }else{ isLevel3showed = false; MyAnimation.animationOut(level3); } break; } } }