【特效】3D旋转环形菜单
主页面的xml文件
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:id="@+id/layout_next" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/user_wizard_2" android:orientation="vertical" /> <LinearLayout android:id="@+id/layout_last" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/user_wizard_3" android:orientation="vertical" /> <RelativeLayout android:id="@+id/layout_main" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/user_wizard_1" android:orientation="vertical" > <include layout="@layout/bottom_button" /> </RelativeLayout> </FrameLayout>
点击Hone按钮弹出菜单xml文件
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_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" > <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/composer_buttons_show_hide_button" 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/composer_buttons_show_hide_button_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/composer_icn_plus" /> </RelativeLayout> </RelativeLayout>
主Activity页面
package cy.test.rotate3d; import android.app.Activity; import android.os.Bundle; import android.util.DisplayMetrics; import android.util.Log; import android.view.MotionEvent; import android.view.VelocityTracker; import android.view.View; import android.view.View.OnClickListener; import android.view.View.OnTouchListener; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.RelativeLayout; public class RotateActivity extends Activity implements OnTouchListener { public final static int TYPE_ROTATING = 0; public final static int TYPE_ENDROTATE = 1; public final static int TYPE_VELROTATE = 2; public static float params = 1; private ViewGroup layoutmain; private ViewGroup layoutnext; private ViewGroup layoutlast; private ViewGroup currentView; private ViewGroup nextView; private ViewGroup lastView; private Rotate3D rotate3d; private Rotate3D rotate3d2; private Rotate3D rotate3d3; private int mCenterX; private int mCenterY; private float degree = (float) 0.0; private int currentTab = 0; private float perDegree; private VelocityTracker mVelocityTracker; private boolean areButtonsShowing; private RelativeLayout composerButtonsWrapper; private ImageView composerButtonsShowHideButtonIcon; private RelativeLayout composerButtonsShowHideButton; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); initMain(); MyAnimations.initOffset(this); // 加号的动画 composerButtonsShowHideButton.startAnimation(MyAnimations .getRotateAnimation(0, 360, 200)); DisplayMetrics dm = new DisplayMetrics(); dm = getResources().getDisplayMetrics(); mCenterX = dm.widthPixels / 2; mCenterY = dm.heightPixels / 2; if (dm.widthPixels > 320) { params = 2.0f / 3; } perDegree = (float) (90.0 / dm.widthPixels); } private void setListener() { // 给大按钮设置点击事件 composerButtonsShowHideButton.setOnClickListener(new OnClickListener() { public void onClick(View v) { if (!areButtonsShowing) { // 图标的动画 MyAnimations.startAnimationsIn(composerButtonsWrapper, 300); // 加号的动画 composerButtonsShowHideButtonIcon .startAnimation(MyAnimations.getRotateAnimation(0, -225, 300)); } else { // 图标的动画 MyAnimations .startAnimationsOut(composerButtonsWrapper, 300); // 加号的动画 composerButtonsShowHideButtonIcon .startAnimation(MyAnimations.getRotateAnimation( -225, 0, 300)); } areButtonsShowing = !areButtonsShowing; } }); // 给小图标设置点击事件 for (int i = 0; i < composerButtonsWrapper.getChildCount(); i++) { final ImageView smallIcon = (ImageView) composerButtonsWrapper .getChildAt(i); final int position = i; smallIcon.setOnClickListener(new View.OnClickListener() { public void onClick(View arg0) { // 这里写各个item的点击事件 // 1.加号按钮缩小后消失 缩小的animation // 2.其他按钮缩小后消失 缩小的animation // 3.被点击按钮放大后消失 透明度渐变 放大渐变的animation // composerButtonsShowHideButton.startAnimation(MyAnimations.getMiniAnimation(300)); if (areButtonsShowing) { composerButtonsShowHideButtonIcon .startAnimation(MyAnimations .getRotateAnimation(-225, 0, 300)); smallIcon.startAnimation(MyAnimations .getMaxAnimation(400)); for (int j = 0; j < composerButtonsWrapper .getChildCount(); j++) { if (j != position) { final ImageView smallIcon = (ImageView) composerButtonsWrapper .getChildAt(j); smallIcon.startAnimation(MyAnimations .getMiniAnimation(300)); // MyAnimations.getMiniAnimation(300).setFillAfter(true); } } areButtonsShowing = !areButtonsShowing; } } }); } } private void initMain() { setContentView(R.layout.main); composerButtonsWrapper = (RelativeLayout) findViewById(R.id.composer_buttons_wrapper); composerButtonsShowHideButton = (RelativeLayout) findViewById(R.id.composer_buttons_show_hide_button); composerButtonsShowHideButtonIcon = (ImageView) findViewById(R.id.composer_buttons_show_hide_button_icon); layoutnext = (ViewGroup) findViewById(R.id.layout_next); layoutnext.setOnTouchListener(this); layoutlast = (ViewGroup) findViewById(R.id.layout_last); layoutlast.setOnTouchListener(this); layoutmain = (ViewGroup) findViewById(R.id.layout_main); layoutmain.setOnTouchListener(this); setListener(); currentView = layoutmain; nextView = layoutnext; lastView = layoutnext; } private int mLastMotionX; public boolean onTouch(View arg0, MotionEvent event) { int x = (int) event.getX(); if (mVelocityTracker == null) { mVelocityTracker = VelocityTracker.obtain();// 获得VelocityTracker类实例 } mVelocityTracker.addMovement(event);// 将事件加入到VelocityTracker类实例中 switch (event.getAction()) { case MotionEvent.ACTION_DOWN: mLastMotionX = x; break; case MotionEvent.ACTION_MOVE: mVelocityTracker.computeCurrentVelocity(1000, 1000); int dx = x - mLastMotionX; if (dx != 0) { doRotate(dx, TYPE_ROTATING); if (degree > 90) { degree = 0; break; } } else { return false; } mLastMotionX = x; break; case MotionEvent.ACTION_UP: // 设置units的值为1000，意思为一秒时间内运动了多少个像素 mVelocityTracker.computeCurrentVelocity(1000); float VelocityX = mVelocityTracker.getXVelocity(); if (VelocityX > 500 || VelocityX < -500) { // endRotateByVelocity(); doRotate(0, TYPE_VELROTATE); } else { // endRotate(); doRotate(0, TYPE_ENDROTATE); } setView(); setViewVisibile(); degree = 0; releaseVelocityTracker(); break; case MotionEvent.ACTION_CANCEL: releaseVelocityTracker(); break; } return true; } private void setView() { if (currentTab == 0) { currentView = layoutmain; nextView = layoutnext; lastView = layoutlast; } else if (currentTab == 1) { currentView = layoutnext; nextView = layoutlast; lastView = layoutmain; } else if (currentTab == 2) { currentView = layoutlast; nextView = layoutmain; lastView = layoutnext; } } private void releaseVelocityTracker() { if (null != mVelocityTracker) { mVelocityTracker.clear(); mVelocityTracker.recycle(); mVelocityTracker = null; } } private void setViewVisibile() { if (currentTab == 0) { layoutmain.setVisibility(View.VISIBLE); layoutnext.setVisibility(View.GONE); layoutlast.setVisibility(View.GONE); } else if (currentTab == 1) { layoutmain.setVisibility(View.GONE); layoutnext.setVisibility(View.VISIBLE); layoutlast.setVisibility(View.GONE); } else if (currentTab == 2) { layoutmain.setVisibility(View.GONE); layoutnext.setVisibility(View.GONE); layoutlast.setVisibility(View.VISIBLE); } } private void doRotate(int dx, int type) { if (type == TYPE_ROTATING) { float xd = degree; degree += perDegree * dx; rotate3d = new Rotate3D(xd, degree, 0, mCenterX, mCenterY); rotate3d2 = new Rotate3D(90 + xd, 90 + degree, 0, mCenterX, mCenterY); rotate3d3 = new Rotate3D(-90 + xd, -90 + degree, 0, mCenterX, mCenterY); } else if (type == TYPE_ENDROTATE) { rotate3d2 = new Rotate3D(90 + degree, 0, 0, mCenterX, mCenterY); rotate3d3 = new Rotate3D(-90 + degree, 0, 0, mCenterX, mCenterY); if (degree > 45) { rotate3d = new Rotate3D(degree, 90, 0, mCenterX, mCenterY); currentTab = (currentTab - 1) % 3; if (currentTab < 0) { currentTab = 2; } } else if (degree < -45) { rotate3d = new Rotate3D(degree, -90, 0, mCenterX, mCenterY); currentTab = (currentTab + 1) % 3; } else { rotate3d = new Rotate3D(degree, 0, 0, mCenterX, mCenterY); rotate3d2 = new Rotate3D(90 + degree, 90, 0, mCenterX, mCenterY); rotate3d3 = new Rotate3D(-90 + degree, -90, 0, mCenterX, mCenterY); } } else if (type == TYPE_VELROTATE) { if (degree > 0) { rotate3d = new Rotate3D(degree, 90, 0, mCenterX, mCenterY); rotate3d3 = new Rotate3D(-90 + degree, 0, 0, mCenterX, mCenterY); currentTab = (currentTab - 1) % 3; if (currentTab < 0) { currentTab = 2; } } else if (degree < 0) { rotate3d = new Rotate3D(degree, -90, 0, mCenterX, mCenterY); rotate3d2 = new Rotate3D(90 + degree, 0, 0, mCenterX, mCenterY); currentTab = (currentTab + 1) % 3; } } rotate3d.setDuration(300); rotate3d2.setDuration(300); rotate3d3.setDuration(300); layoutmain.setVisibility(View.GONE); layoutnext.setVisibility(View.GONE); layoutlast.setVisibility(View.GONE); currentView.setVisibility(View.VISIBLE); if (degree < 0) {// 由右向左滑 nextView.setVisibility(View.VISIBLE); toDoAnimation(currentView, rotate3d, Rotate3D.BOUNDARY_RIGHT); toDoAnimation(nextView, rotate3d2, Rotate3D.BOUNDARY_LEFT); } else if (degree > 0) { lastView.setVisibility(View.VISIBLE); toDoAnimation(currentView, rotate3d, Rotate3D.BOUNDARY_LEFT); toDoAnimation(lastView, rotate3d3, Rotate3D.BOUNDARY_RIGHT); } } public void toDoAnimation(ViewGroup viewGroup, Rotate3D rotate3d, int type) { rotate3d.setType(type); viewGroup.startAnimation(rotate3d); } }
Rotate3D.java
package cy.test.rotate3d; import android.graphics.Camera; import android.graphics.Matrix; import android.view.animation.Animation; import android.view.animation.Transformation; public class Rotate3D extends Animation { public final static int BOUNDARY_LEFT = 0; public final static int BOUNDARY_RIGHT = 1; private int type; private float fromDegree; // 旋转起始角度 private float toDegree; // 旋转终止角度 private float mCenterX; // 旋转中心x private float mCenterY; // 旋转中心y private Camera mCamera; public void setType(int type) { this.type = type; } public Rotate3D(float fromDegree, float toDegree, float depthZ, float centerX, float centerY) { this.fromDegree = fromDegree; this.toDegree = toDegree; this.mCenterX = centerX; this.mCenterY = centerY; } public Rotate3D(float fromDegree, float toDegree, float depthZ, float centerX, float centerY, int type) { this.fromDegree = fromDegree; this.toDegree = toDegree; this.mCenterX = centerX; this.mCenterY = centerY; this.type = type; } @Override public void initialize(int width, int height, int parentWidth, int parentHeight) { super.initialize(width, height, parentWidth, parentHeight); mCamera = new Camera(); } @Override protected void applyTransformation(float interpolatedTime, Transformation t) { final float FromDegree = fromDegree; // 旋转角度（angle） float degrees = FromDegree + (toDegree - fromDegree) * interpolatedTime; final float centerX = mCenterX; final float centerY = mCenterY; final Matrix matrix = t.getMatrix(); if (degrees <= -79.5f) { degrees = -90.0f; mCamera.save(); mCamera.rotateY(degrees); // 旋转 mCamera.getMatrix(matrix); mCamera.restore(); } else if (degrees >= 79.5f) { degrees = 90.0f; mCamera.save(); mCamera.rotateY(degrees); mCamera.getMatrix(matrix); mCamera.restore(); } else { mCamera.save(); mCamera.translate(degrees / 90 * centerX * 2, 0, 0); mCamera.rotateY(degrees * RotateActivity.params); // mCamera.translate(0, 0, centerX); // 位移x // mCamera.rotateY(degrees); // mCamera.translate(0, 0, -centerX); mCamera.getMatrix(matrix); mCamera.restore(); } if (type == BOUNDARY_LEFT) { matrix.preTranslate(0, -centerY); matrix.postTranslate(0, centerY); } else { matrix.preTranslate(-centerX * 2, -centerY); matrix.postTranslate(centerX * 2, centerY); } } }
MyAnimations.java
package cy.test.rotate3d; import android.content.Context; import android.view.ViewGroup; import android.view.ViewGroup.MarginLayoutParams; import android.view.animation.AlphaAnimation; import android.view.animation.Animation; import android.view.animation.AnimationSet; import android.view.animation.OvershootInterpolator; import android.view.animation.RotateAnimation; import android.view.animation.ScaleAnimation; import android.view.animation.TranslateAnimation; import android.widget.ImageButton; public class MyAnimations { // 用来适配不同的分辨率 private static int xOffset = 15; private static int yOffset = -13; public static void initOffset(Context context) { xOffset = (int) (10.667 * context.getResources().getDisplayMetrics().density); yOffset = -(int) (8.667 * context.getResources().getDisplayMetrics().density); } // 加号的动画 public static Animation getRotateAnimation(float fromDegrees, float toDegrees, int durationMillis) { RotateAnimation rotate = new RotateAnimation(fromDegrees, toDegrees, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); rotate.setDuration(durationMillis); rotate.setFillAfter(true); return rotate; } // 图标的动画(入动画) public static void startAnimationsIn(ViewGroup viewgroup, int durationMillis) { for (int i = 0; i < viewgroup.getChildCount(); i++) { ImageButton inoutimagebutton = (ImageButton) viewgroup .getChildAt(i); inoutimagebutton.setVisibility(0); inoutimagebutton.setClickable(true); inoutimagebutton.setFocusable(true); MarginLayoutParams mlp = (MarginLayoutParams) inoutimagebutton .getLayoutParams(); Animation animation = new TranslateAnimation(mlp.rightMargin - xOffset, 0F, yOffset + mlp.bottomMargin, 0F); animation.setFillAfter(true); animation.setDuration(durationMillis); // 下一个动画的偏移时间 animation.setStartOffset((i * 100) / (-1 + viewgroup.getChildCount())); // 动画的效果 animation.setInterpolator(new OvershootInterpolator(2F)); // 弹出再回来的效果 inoutimagebutton.startAnimation(animation); } } // 图标的动画(出动画) public static void startAnimationsOut(ViewGroup viewgroup, int durationMillis) { for (int i = 0; i < viewgroup.getChildCount(); i++) { final ImageButton inoutimagebutton = (ImageButton) viewgroup .getChildAt(i); MarginLayoutParams mlp = (MarginLayoutParams) inoutimagebutton .getLayoutParams(); Animation animation = new TranslateAnimation(0F, mlp.rightMargin - xOffset, 0F, yOffset + mlp.bottomMargin); animation.setFillAfter(true); animation.setDuration(durationMillis); animation.setStartOffset(((viewgroup.getChildCount() - i) * 100) / (-1 + viewgroup.getChildCount()));// 下一个动画的偏移时间 animation.setAnimationListener(new Animation.AnimationListener() { public void onAnimationStart(Animation arg0) { } public void onAnimationRepeat(Animation arg0) { } public void onAnimationEnd(Animation arg0) { inoutimagebutton.setVisibility(8); inoutimagebutton.setClickable(false); inoutimagebutton.setFocusable(false); } }); inoutimagebutton.startAnimation(animation); } } // icon缩小消失的动画 public static Animation getMiniAnimation(int durationMillis) { Animation miniAnimation = new ScaleAnimation(1.0f, 0f, 1.0f, 0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); miniAnimation.setDuration(durationMillis); miniAnimation.setFillAfter(true); return miniAnimation; } // icon放大渐变消失的动画 public static Animation getMaxAnimation(int durationMillis) { AnimationSet animationset = new AnimationSet(true); Animation maxAnimation = new ScaleAnimation(1.0f, 4.0f, 1.0f, 4.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); Animation alphaAnimation = new AlphaAnimation(1, 0); animationset.addAnimation(maxAnimation); animationset.addAnimation(alphaAnimation); animationset.setDuration(durationMillis); animationset.setFillAfter(true); return animationset; } }
DEMO完整下载路径：http://download.csdn.net/detail/androidsj/5525583