支持类似Path的左下角动画旋转菜单及横向划出菜单、圆心弹出菜单
项目地址：https://github.com/daCapricorn/ArcMenu
一、关注3个效果
- 点击中心控制点
的时候，展开效果：
- 中心控制点旋转45度的动画
- 周围children 弹出动画
2.点击中心控制点的时候，收缩动画：
- 中心控制点旋转45度
- 周围children 自旋转并收缩
3.展开时候，点击child
- 被点击的child放大，
- 其他chidren 消失
二、3个java文件
- ArcMenu.java 自定义View ，效果如图；主要有逻辑控制代码
- ArcLayout.java A Layout that arranges its children around its center.主要有子view布局，展开、收缩的动画实现
- RotateAndTranslateAnimation.java 动画：控制objec产生位移，同时以object中心为轴心旋转。
三、展开和收缩代码实现
- 点击中心控制点的时候，展开效果：
- 中心控制点旋转45度的动画
- 周围children 弹出动画
2.点击中心控制点的时候，收缩动画：
- 中心控制点旋转45度
- 周围children 自旋转并收缩
先介绍三个重要的变量
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
- 被点击的child放大，
- 其他chidren 消失
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中心。
时间： 2024-10-07 15:02:58