效果圖:

本文目的:

• 鞏固/練習 自定義View

• 分析解決問題的思路

需要解決的問題:

1、行星的整體布局，3D的視覺效果

2、行星轉到太陽后面時，會被太陽擋住，轉到太陽前面時，會擋住太陽

3、行星自動旋轉，并且可以根據手勢滑動，滑動完之后繼續自動旋轉

4、中間的太陽有照射的旋轉動畫

分析問題:

1、行星的整體布局，3D的視覺效果

如果我們draw()的之前通過Camera將Canvas繞x軸旋轉60°是不是就可以搞定？這種方式實則是不可行的。因為draw()之前Canvas的變化會作用于子View，從效果圖可以看出，子View并沒有rotateX的變換，只有縮放變換。所以我們通過子View layout時變化其位置，即計算子View的left、top、right、bottom四個值

行星繞太陽旋轉其軌跡實際上就是圓形，如下圖：

我們看手機，其實是沿著z軸方向。想象一下，如果讓坐標系沿著x軸旋轉60°，不就能達到我們想要的效果了嘛。

旋轉60°，我們再沿著x軸方向看，如下圖：

圖中藍色是旋轉前的軌跡，紫色是旋轉之后的軌跡。假設P點是地球，P旋轉前的y坐標是y0，則旋轉之后地球的y坐標是：

y0 * 旋轉角度的余切值，即：

y1 = y0* cos(60°)

現在的結論是，只需要把圖1的所有行星的y 坐標 * cos60°，就能達到效果了。

而圖1中，計算各個行星旋轉之前的x 、y坐標比較簡單。

x0 = Radius * cos60°
y0 = Radius * sin60°

2、行星轉到太陽后面時，會被太陽擋住，轉到太陽前面時，會擋住太陽

剛看到這個效果，覺得這個問題是個比較難的點，如果所有行星的父容器和太陽是平級關系，結果就是要么所有的行星都會擋住太陽，要么就是太陽都會擋住行星。不能達到行星轉到太陽后面時，會被太陽擋住，轉到太陽前面時，會擋住太陽 * 的這種效果。

但是如果所有的行星和太陽是平級關系，即他們是同一個父容器下的子View，那么我們就可以達到這個效果，方法有三種：

1、重寫父容器dispatchDraw()方法，改變子View的繪制順序（圖3中先draw土星，再draw太陽，再draw地球）；

2、在子View draw之前依次調用bringToFront()方法（圖3中先調用土星的bringToFront()方法，再調用太陽的bringToFront()方法，最后調用地球的bringToFront()方法）；

3、通過改變所有子View的z值（高度）以改變View的繪制順序。

這三種方法理論是都可以實現，但是方法1 成本太高、風險也高，重新dispatchDraw()可能會發生未知問題，至于方法2，細心的朋友可能發現，每次調用bringToFront()方法，都會出發requestLayout()，降低了測量布局繪制效率，更重要的原因是在layout（問題1的解決需要重新layout方法）之后再調用requestLayout()方法，會導致循環layout-draw-layout-draw-layout-draw....

綜上，我們選擇方法3，簡單，風險小。

3、行星自動旋轉，并且可以根據手勢滑動，滑動完之后繼續自動旋轉

• 自動滑動：在父容器中設置一個成員變量：角度偏移量sweepAngle，計算子View的位置時將偏移量也考慮進去。然后定時不斷增加或者減小sweepAngle(增加或減小 將決定子View是順時針or逆時針旋轉)

• 手勢：用的比較多，從后面的代碼中體現。

4、中間的太陽有照射的旋轉動畫

效果圖中的太陽由兩張圖片組成，一張是前景，一張是背景帶亮光，讓背景圖繞著z軸無限旋轉即可。

代碼實現：

核心就是行星的父容器

/*** 行星和太陽的父容器*/ public class StarGroupView extends FrameLayout {// 從這個角度開始畫View ，可以調整private static final float START_ANGLE = 270f; // 270°// 父容器的邊界 單位dpprivate static final int PADDING = 80;// 繞x軸旋轉的角度 70°對應的弧度private static final double ROTATE_X = Math.PI * 7 / 18;// 以上幾個值都可以根據最終效果調整/*** 角度偏差值*/private float sweepAngle = 0f;/*** 行星軌跡的半徑*/private float mRadius;/*** 父容器的邊界 ，單位px*/private int mPadding;public StarGroupView(@NonNull Context context) {this(context, null);}public StarGroupView(@NonNull Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);}public StarGroupView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);// 邊距轉換為pxmPadding = (int) (context.getResources().getDisplayMetrics().density * PADDING);}@Overrideprotected void onLayout(boolean changed, int left, int top, int right, int bottom) { // super.onLayout(changed, left, top, right, bottom);mRadius = (getMeasuredWidth() / 2f - mPadding);layoutChildren();}private void layoutChildren() {int childCount = getChildCount();if (childCount == 0) return;// 行星之間的角度float averageAngle = 360f / childCount;for (int index = 0; index < childCount; index++) {View child = getChildAt(index);int childWidth = child.getMeasuredWidth();int childHeight = child.getMeasuredHeight();// 第index 個子View的角度double angle = (START_ANGLE - averageAngle * index + sweepAngle) * Math.PI / 180;double sin = Math.sin(angle);double cos = Math.cos(angle);double coordinateX = getMeasuredWidth() / 2f - mRadius * cos;// * Math.cos(ROTATE_X) 代表將y坐標轉換為旋轉之后的y坐標double coordinateY = mRadius / 2f - mRadius * sin * Math.cos(ROTATE_X);child.layout((int) (coordinateX - childWidth / 2),(int) (coordinateY - childHeight / 2),(int) (coordinateX + childWidth / 2),(int) (coordinateY + childHeight / 2));// 假設view的最小縮放是原來的0.3倍，則縮放比例和角度的關系是float scale = (float) ((1 - 0.3f) / 2 * (1 - Math.sin(angle)) + 0.3f);child.setScaleX(scale);child.setScaleY(scale);}} }

然后再xml中配置View

<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".LandActivity"><com.glong.demo.view.StarGroupViewandroid:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/tv1"android:layout_width="100dp"android:layout_height="100dp"android:background="@color/colorAccent"android:gravity="center"android:text="1" /><TextViewandroid:id="@+id/tv2"android:layout_width="100dp"android:layout_height="100dp"android:background="@android:color/darker_gray"android:gravity="center"android:text="2" /><TextViewandroid:id="@+id/tv3"android:layout_width="100dp"android:layout_height="100dp"android:background="@android:color/holo_green_dark"android:gravity="center"android:text="3" /><TextViewandroid:id="@+id/tv4"android:layout_width="100dp"android:layout_height="100dp"android:background="@android:color/holo_blue_dark"android:gravity="center"android:text="4" /><TextViewandroid:id="@+id/tv5"android:layout_width="100dp"android:layout_height="100dp"android:background="@android:color/holo_green_light"android:gravity="center"android:text="5" /><TextViewandroid:id="@+id/tv6"android:layout_width="100dp"android:layout_height="100dp"android:background="@android:color/holo_orange_light"android:gravity="center"android:text="6" /><TextViewandroid:id="@+id/tv7"android:layout_width="100dp"android:layout_height="100dp"android:background="#ff3311"android:gravity="center"android:text="7" /><TextViewandroid:id="@+id/tv8"android:layout_width="100dp"android:layout_height="100dp"android:background="#11aa44"android:gravity="center"android:text="8" /><TextViewandroid:id="@+id/tv9"android:layout_width="100dp"android:layout_height="100dp"android:background="#ff99cc"android:gravity="center"android:text="9" /></com.glong.demo.view.StarGroupView></androidx.constraintlayout.widget.ConstraintLayout>

運行，效果如下：

上述代碼正如前面分析的，計算所有子View的left 、top 、right 、bottom，注釋寫的也詳細。說明兩點：

1、其中，64行

double angle = (START_ANGLE - averageAngle * index + sweepAngle) * Math.PI / 180;

公式中- averageAngle * index代表逆時針添加，如果是+ averageAngle * index則是順時針添加。

2、78到80行，計算子View的scale，這里說明下角度和scale的計算公司

float scale = (float) ((1 - 0.3f) / 2 * (1 - Math.sin(angle)) + 0.3f);

假如View的最小scale是0.3f，最大scale是1。按照效果View在270°時scale最大，在90°時scale最小，并且從270°到90°scale越來越小。正玄曲線如下：

正玄曲線中，270°最小，90°時最大，我們把正玄值取反然后再加1，那么[90°,270°]對應的值就是[0,1]即，設z = -sin(angle) + 1 當angle在90°到270°變化時 ，z將在0到1之間變化z在0~1之間變化時，scale 要在0.3~1之間變化，如下圖：

顯然，

scale = (1 - 0.3) * z + 0.3 = (1-0.3)*(-sin(angle) + 1)+0.3

接下來，再把中間的太陽加進去

太陽也是StarGroupView的子View，但是和其他子View 不同的是，太陽在最中間，不參與類似行星的位置計算

簡單期間我們使用tag=“center"來標識子View是中間的太陽。

修改xml文件：

<com.glong.demo.view.StarGroupViewandroid:layout_width="match_parent"android:layout_height="match_parent"><!-- 增加太陽View --><ImageViewandroid:layout_width="130dp"android:layout_height="130dp"android:src="@drawable/ic_launcher_background"android:tag="center" /><!--省略行星--></com.glong.demo.view.StarGroupView>

修改StarGroupView.java

public class StarGroupView extends FrameLayout {// ... 省略部分代碼private void layoutChildren() {int childCount = getChildCount();if (childCount == 0) return;// 行星之間的角度View centerView = centerView();float averageAngle;if (centerView == null) {averageAngle = 360f / childCount;} else {// centerView 不參與計算角度averageAngle = 360f / (childCount - 1);}int number = 0;for (int index = 0; index < childCount; index++) {View child = getChildAt(index);int childWidth = child.getMeasuredWidth();int childHeight = child.getMeasuredHeight();// 如果是centerView 直接居中布局if ("center".equals(child.getTag())) {child.layout(getMeasuredWidth() / 2 - childWidth / 2, getMeasuredHeight() / 2 - childHeight / 2,getMeasuredWidth() / 2 + childWidth / 2, getMeasuredHeight() / 2 + childHeight / 2);} else {// 第index 個子View的角度double angle = (START_ANGLE - averageAngle * number + sweepAngle) * Math.PI / 180;double sin = Math.sin(angle);double cos = Math.cos(angle);double coordinateX = getMeasuredWidth() / 2f - mRadius * cos;// * Math.cos(ROTATE_X) 代表將y坐標轉換為旋轉之后的y坐標double coordinateY = mRadius / 2f - mRadius * sin * Math.cos(ROTATE_X);child.layout((int) (coordinateX - childWidth / 2),(int) (coordinateY - childHeight / 2),(int) (coordinateX + childWidth / 2),(int) (coordinateY + childHeight / 2));// 假設view的最小縮放是原來的0.3倍，則縮放比例和角度的關系是float scale = (float) ((1 - 0.3f) / 2 * (1 - Math.sin(angle)) + 0.3f);child.setScaleX(scale);child.setScaleY(scale);number++;}}}/*** 獲取centerView** @return 太陽*/private View centerView() {View result = null;for (int i = 0; i < getChildCount(); i++) {View child = getChildAt(i);if ("center".equals(child.getTag())) {return child;}}return null;} }

代碼注釋寫的很全面，不做過多解釋了，這個時候我們把PADDING改大一點，改成160，運行如下：

問題很明顯，3應該在4的上面， 2 應該在3的上面，中間的View應該在5，6的上面。

這是因為系統默認按照View的添加順序畫View的，即我們xml文件里面的順序。xml里面我們centerView在第一個，所以就先畫centerView，導致centerView被其他View覆蓋。按照上面的分析，動態改變View的z值以改變View的draw順序。

修改StarGroupView.java代碼

public class StarGroupView extends FrameLayout {private void layoutChildren() {// ...省略之前代碼changeZ();}/*** 改變子View的z值以改變子View的繪制優先級，z越大優先級越低（最后繪制）*/private void changeZ() {View centerView = centerView();float centerViewScaleY = 1f;if (centerView != null) {centerViewScaleY = centerView.getScaleY();centerView.setScaleY(0.5f);}List<View> children = new ArrayList<>();for (int i = 0; i < getChildCount(); i++) {children.add(getChildAt(i));}// 按照scaleY排序Collections.sort(children, new Comparator<View>() {@Overridepublic int compare(View o1, View o2) {return (int) ((o1.getScaleY() - o2.getScaleY())*1000000);}});float z = 0.1f;for (int i = 0; i < children.size(); i++) {children.get(i).setZ(z);z += 0.1f;}if (centerView != null) {centerView.setScaleY(centerViewScaleY);}} }

我們先給所有子View根據他的scaleY排序，由于centerView的scaleY 在layoutChildren()時并沒有改變，我們把centerView的scaleY設置為0.5f，最后再還原回去。現在運行，效果如下：

到這里基本已經達到了我們想要的效果啦，接下來讓其自動旋轉和響應手勢，肯定就難不倒我們啦。

加入自動旋轉

子StarGroupView中循環postDelayed(runnable,16)即可，這里為什么是16ms，大家都懂

修改StarGroupView.java

public class StarGroupView extends FrameLayout {// ...省略已有代碼//自動旋轉角度,16ms（一幀）旋轉的角度，值越大轉的越快private static final float AUTO_SWEEP_ANGLE = 0.1f;private Runnable autoScrollRunnable = new Runnable() {@Overridepublic void run() {sweepAngle += AUTO_SWEEP_ANGLE;// 取個模 防止sweepAngle爆表sweepAngle %= 360;Log.d("guolong", "auto , sweepAngle == " +sweepAngle);layoutChildren();postDelayed(this, 16);}};public StarGroupView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);// ...省略已有代碼postDelayed(autoScrollRunnable,100);} }

這樣就開始自動旋轉了，調節AUTO_SWEEP_ANGLE的值 改變旋轉速度

加入手勢

老寫法，先上代碼

在StarGroupView.java中增加

public class StarGroupView extends FrameLayout {//px轉化為angle的比例 ps:一定要給設置一個轉換，不然旋轉的太歡了private static final float SCALE_PX_ANGLE = 0.2f;/*** 手勢處理*/private float downX = 0f;/*** 手指按下時的角度*/private float downAngle = sweepAngle;/*** 速度追蹤器*/private VelocityTracker velocity = VelocityTracker.obtain();/*** 滑動結束后的動畫*/private ValueAnimator velocityAnim = new ValueAnimator();public StarGroupView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {// ...initAnim();}private void initAnim() {velocityAnim.setDuration(1000);velocityAnim.setInterpolator(new DecelerateInterpolator());velocityAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float value = (float) animation.getAnimatedValue();// 乘以SCALE_PX_ANGLE是因為如果不乘 轉得太歡了sweepAngle += (value * SCALE_PX_ANGLE);layoutChildren();}});}@Overridepublic boolean onTouchEvent(MotionEvent event) {float x = event.getX();velocity.addMovement(event);switch (event.getAction()) {case MotionEvent.ACTION_DOWN:downX = x;downAngle = sweepAngle;// 取消動畫和自動旋轉velocityAnim.cancel();removeCallbacks(autoScrollRunnable);return true;case MotionEvent.ACTION_MOVE:float dx = downX - x ;sweepAngle = (dx * SCALE_PX_ANGLE + downAngle);layoutChildren();break;case MotionEvent.ACTION_UP:velocity.computeCurrentVelocity(16);// 速度為負值代表順時針scrollByVelocity(velocity.getXVelocity());postDelayed(autoScrollRunnable, 16);}return super.onTouchEvent(event);}private void scrollByVelocity(float velocity) {float end;if (velocity < 0)end = -AUTO_SWEEP_ANGLE;elseend = 0f;velocityAnim.setFloatValues(-velocity, end);velocityAnim.start();} }

手勢處理的代碼比較簡單，這里就不再贅述了，需要注意的是：

1、ACTION_DOWN需返回true，不然收不到后續的ACTION_MOVE事件；

2、ACTION_DOWN時需要暫停動畫和自動旋轉

3、這里根據手指離開屏幕時的速度做Animator動畫，當然你也可以用scroller實現。

4、第59行，我們給dx * SCALE_PX_ANGLE代表一個像素可以轉換成SCALE_PX_ANGLE角度

最后，加上中間太陽旋轉的動畫

在res/anim/sun_anim.xml

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"android:shareInterpolator="true"android:interpolator="@android:interpolator/linear"><rotateandroid:duration="8000"android:fromDegrees="0"android:pivotX="50%"android:pivotY="50%"android:repeatCount="-1"android:toDegrees="360" /> </set>

在Activity中：

public class LandActivity extends AppCompatActivity {@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);// ....省略部分代碼View sunView = findViewById(R.id.sun_view);sunView.startAnimation((AnimationUtils.loadAnimation(this, R.anim.sun_anim)));} }

最后的最后，我們可以給外部提供start和pause方法用來暫停和開始動畫

public class StarGroupView extends FrameLayout {// 省略...public void pause() {velocityAnim.cancel();removeCallbacks(autoScrollRunnable);}public void start() {postDelayed(autoScrollRunnable, 16);} }

最終效果：

源碼地址：

https://github.com/glongdev/Demos

總結

以上是生活随笔為你收集整理的Android实现八大行星绕太阳3D旋转效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。