标签：des android style blog http io ar color os
支持类似Path的左下角动画旋转菜单及横向划出菜单、圆心弹出菜单
项目地址：https://github.com/daCapricorn/ArcMenu
一、关注3个效果
的时候，展开效果：2.点击中心控制点的时候，收缩动画：
3.展开时候，点击child
二、3个java文件
三、展开和收缩代码实现
2.点击中心控制点的时候，收缩动画：
先介绍三个重要的变量
private ArcLayout mArcLayout; //中心控制点图片
private ImageView mHintView; //当前状态: 是否已经展开；就像逻辑控制的开关一样，根据不同状态执行不同的动画效果
private boolean mExpanded = false;
ArcMenu.java中有这部分效果，实现代码
private void init(Context context) { LayoutInflater li = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); li.inflate(R.layout.arc_menu, this); mArcLayout = (ArcLayout) findViewById(R.id.item_layout); //中心控制点 final ViewGroup controlLayout = (ViewGroup) findViewById(R.id.control_hint); controlLayout.setClickable(true); controlLayout.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { //中心控制点自旋转 mHintView.startAnimation(createHintSwitchAnimation(mArcLayout.isExpanded())); //child 的收缩和展开 mArcLayout.switchState(true); } return false; } }); mHintView = (ImageView) findViewById(R.id.control_hint); }
（1）、controlLayout 是一个ViewGroup,xml文件如下：
<FrameLayout android:id="@+id/control_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:background="@drawable/composer_button" > <ImageView android:id="@+id/control_hint" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:duplicateParentState="true" android:src="@drawable/composer_icn_plus" /> </FrameLayout>
图片资源composer_button和composer_icn_plus 是xml文件， composer_button.xml放在drawable下，
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/composer_button_pressed" android:state_pressed="true"/>
<item android:drawable="@drawable/composer_button_normal"/>
</selector>
控件被按下时候，改变图片。
（2）
中心控制点旋转45度的实现：给controlLayout设置监听器OnTouchListener，点击的时候，就触发旋转动画
/** * 中心控制自旋转动画 * @param expanded 状态：是否已经展开 * @return */ private static Animation createHintSwitchAnimation(final boolean expanded) { //绕中心旋转，收缩时候由45度转到0度，展开时由0度转到45度 Animation animation = new RotateAnimation(expanded ? 45 : 0, expanded ? 0 : 45, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); animation.setStartOffset(0); animation.setDuration(100); animation.setInterpolator(new DecelerateInterpolator()); animation.setFillAfter(true); return animation; }
（3）
child展开、收缩动画实现
逻辑控制：
给controlLayout设置监听器OnTouchListener，调用ArcLayout中switchState()函数;这个函数就是个逻辑开关，重要的布局动画都在bindChildAnimation中；它还有个重要功能是修改mExpanded的状态值。
/** * switch between expansion and shrinkage * * @param showAnimation */ public void switchState(final boolean showAnimation) { if (showAnimation) { final int childCount = getChildCount(); for (int i = 0; i < childCount; i++) { bindChildAnimation(getChildAt(i), i, 300); } } mExpanded = !mExpanded; if (!showAnimation) { requestLayout(); } invalidate(); }
布局实现：
private void bindChildAnimation(final View child, final int index, final long duration) { final boolean expanded = mExpanded; final int centerX = getWidth() / 2; //ViewGroup的中心X坐标 final int centerY = getHeight() / 2;//ViewGroup的中心Y坐标 final int radius = expanded ? 0 : mRadius; final int childCount = getChildCount(); final float perDegrees = (mToDegrees - mFromDegrees) / (childCount - 1); Rect frame = computeChildFrame(centerX, centerY, radius, mFromDegrees + index * perDegrees, mChildSize); final int toXDelta = frame.left - child.getLeft(); //展开或收缩动画,child沿X轴位移距离 final int toYDelta = frame.top - child.getTop(); //展开或收缩动画,child沿Y轴位移距离 Log.d(TAG, "toXDelta:"+toXDelta +"\t"+"toYDelta"+toYDelta); Interpolator interpolator = mExpanded ? new AccelerateInterpolator() : new OvershootInterpolator(1.5f); final long startOffset = computeStartOffset(childCount, mExpanded, index, 0.1f, duration, interpolator); //mExpanded为true，收缩动画；为false,展开动画 Animation animation = mExpanded ? createShrinkAnimation(0, toXDelta, 0, toYDelta, startOffset, duration, interpolator) : createExpandAnimation(0, toXDelta, 0, toYDelta, startOffset, duration, interpolator); final boolean isLast = getTransformedIndex(expanded, childCount, index) == childCount - 1; animation.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { if (isLast) { postDelayed(new Runnable() { @Override public void run() { onAllAnimationsEnd(); } }, 0); } } }); child.setAnimation(animation); } private static Rect computeChildFrame(final int centerX, final int centerY, final int radius, final float degrees, final int size) { //child的中心点 final double childCenterX = centerX + radius * Math.cos(Math.toRadians(degrees)); final double childCenterY = centerY + radius * Math.sin(Math.toRadians(degrees)); return new Rect((int) (childCenterX - size / 2), (int) (childCenterY - size / 2), (int) (childCenterX + size / 2), (int) (childCenterY + size / 2)); }
final int radius = expanded ? 0 : mRadius;
child尚未展开，expanded值为false，radius的值为mRadius。
中央控制点的坐标是ViewGroup的中心坐标（centerX，centerY），child的坐标分情况，
当child即将展开时候，radius的值为mRadius，
centerX + radius * Math.cos(Math.toRadians(degrees));
centerY + radius * Math.sin(Math.toRadians(degrees));
这个数学公式几何意义如图：已知圆上一点的角度，圆心坐标，半径，求圆上某点坐标。蓝色标出的角度值为degrees，radius就是半径。
同理，当child即将收缩时候，radius值为0，child的中心就是ViewGroup的中心坐标（centerX，centerY）
然后我们就可以根据child的中心点，和size,计算出child所占矩阵左上角（childCenterX - size / 2，childCenterY - size / 2）和右下角坐标（childCenterX + size / 2，childCenterY + size / 2）
最后计算出收缩和展开的时候，child沿X、Y轴的位移
展开动画代码：
private static Animation createExpandAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta, long startOffset, long duration, Interpolator interpolator) { Animation animation = new RotateAndTranslateAnimation(0, toXDelta, 0, toYDelta, 0, 720); animation.setStartOffset(startOffset); animation.setDuration(duration); animation.setInterpolator(interpolator); animation.setFillAfter(true); return animation; }
收缩动画代码：
private static Animation createShrinkAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta, long startOffset, long duration, Interpolator interpolator) { AnimationSet animationSet = new AnimationSet(false); animationSet.setFillAfter(true); //收缩过程中，child 逆时针自旋转360度 final long preDuration = duration / 2; Animation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); rotateAnimation.setStartOffset(startOffset); rotateAnimation.setDuration(preDuration); rotateAnimation.setInterpolator(new LinearInterpolator()); rotateAnimation.setFillAfter(true); animationSet.addAnimation(rotateAnimation); //收缩过程中位移，并逆时针旋转360度 Animation translateAnimation = new RotateAndTranslateAnimation(0, toXDelta, 0, toYDelta, 360, 720); translateAnimation.setStartOffset(startOffset + preDuration); translateAnimation.setDuration(duration - preDuration); translateAnimation.setInterpolator(interpolator); translateAnimation.setFillAfter(true); animationSet.addAnimation(translateAnimation); return animationSet; }
可以看到，收缩动画集合中，多了一个RotateAnimation自旋转动画。同时有RotateAndTranslateAnimation 对象。
四、点击监听器
展开时候，点击child
5. * 增加item;此函数供外部调用 6. * @param item 7. * @param listener 8. */ 9. public void addItem(View item, OnClickListener listener) { 10. mArcLayout.addView(item); 11. item.setOnClickListener(getItemClickListener(listener)); 12. } 13. 14. private OnClickListener getItemClickListener(final OnClickListener listener) { 15. return new OnClickListener() { 16. 17. @Override 18. public void onClick(final View viewClicked) { 19. //点击,child放大,其他child消失 20. Animation animation = bindItemAnimation(viewClicked, true, 400); 21. animation.setAnimationListener(new AnimationListener() { 22. 23. @Override 24. public void onAnimationStart(Animation animation) { 25. 26. } 27. 28. @Override 29. public void onAnimationRepeat(Animation animation) { 30. 31. } 32. 33. @Override 34. public void onAnimationEnd(Animation animation) { 35. postDelayed(new Runnable() { 36. 37. @Override 38. public void run() { 39. itemDidDisappear(); 40. } 41. }, 0); 42. } 43. }); 44. //child 被点击的时候，自身放大，其他child消失的效果 45. final int itemCount = mArcLayout.getChildCount(); 46. for (int i = 0; i < itemCount; i++) { 47. View item = mArcLayout.getChildAt(i); 48. if (viewClicked != item) { 49. bindItemAnimation(item, false, 300); 50. } 51. } 52. //中心控制点动画 53. mArcLayout.invalidate(); 54. mHintView.startAnimation(createHintSwitchAnimation(true)); 55. 56. if (listener != null) { 57. listener.onClick(viewClicked); 58. } 59. } 60. }; 61. } 62. 63. private Animation bindItemAnimation(final View child, final boolean isClicked, final long duration) { 64. Animation animation = createItemDisapperAnimation(duration, isClicked); 65. child.setAnimation(animation); 66. 67. return animation; 68. } 69. 70. private void itemDidDisappear() { 71. final int itemCount = mArcLayout.getChildCount(); 72. for (int i = 0; i < itemCount; i++) { 73. View item = mArcLayout.getChildAt(i); 74. item.clearAnimation(); 75. } 76. //参数为false,函数只修改mExpanded的值 77. mArcLayout.switchState(false); 78. } 79. 80. private static Animation createItemDisapperAnimation(final long duration, final boolean isClicked) { 81. AnimationSet animationSet = new AnimationSet(true); 82. //放大缩小动画，isClicked 为true,放大两倍；为false,缩小至0 83. animationSet.addAnimation(new ScaleAnimation(1.0f, isClicked ? 2.0f : 0.0f, 1.0f, isClicked ? 2.0f : 0.0f, 84. Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f)); 85. //Alpha改为0，child消失 86. animationSet.addAnimation(new AlphaAnimation(1.0f, 0.0f)); 87. 88. animationSet.setDuration(duration); 89. animationSet.setInterpolator(new DecelerateInterpolator()); 90. animationSet.setFillAfter(true); 91. 92. return animationSet; 93. }
被点击的child放大，主要由ScaleAnimation 动画实现，从1.0f 放大到2.0f.
不被点击的child ，ScaleAnimation动画，从1.0s缩小到0；放大的轴点都是child中心。
标签：des android style blog http io ar color os
原文地址：http://www.cnblogs.com/sueZheng/p/4153424.html
