好久沒寫View了，最近恰巧遇到一個八大行星繞太陽旋轉(zhuǎn)的假3D效果，寫完之后感覺效果還不錯。能玩十分鐘的那種。
本篇將一步步帶您實(shí)現(xiàn)這樣的一個效果，ps：我是用kotlin實(shí)現(xiàn)的，介于您可能還不太熟悉kotlin或者不像熟悉java那樣，所以本篇使用java語言（寫的過程中老是忘記寫new和分號報錯）。
先上最終效果圖（錄制的比較渣）
本文目的
- 鞏固/練習(xí) 自定義View
- 分析解決問題的思路
需要解決的問題
1.行星的整體布局，3D的視覺效果
2.行星轉(zhuǎn)到太陽后面時，會被太陽擋住，轉(zhuǎn)到太陽前面時，會擋住太陽
3.行星自動旋轉(zhuǎn)，并且可以根據(jù)手勢滑動，滑動完之后繼續(xù)自動旋轉(zhuǎn)
4.中間的太陽有照射的旋轉(zhuǎn)動畫
分析問題
1.行星的整體布局，3D的視覺效果
如果我們draw()的之前通過Camera將Canvas繞x軸旋轉(zhuǎn)60°是不是就可以搞定？這種方式實(shí)則是不可行的。因為draw()之前Canvas的變化會作用于子View，從效果圖可以看出，子View并沒有rotateX的變換，只有縮放變換。所以我們通過子View layout時變化其位置，即計算子View的left、top、right、bottom四個值
行星繞太陽旋轉(zhuǎn)其軌跡實(shí)際上就是圓形，如下圖：
我們看手機(jī)，其實(shí)是沿著z軸方向。想象一下，如果讓坐標(biāo)系沿著x軸旋轉(zhuǎn)60°，不就能達(dá)到我們想要的效果了嘛。
旋轉(zhuǎn)60°，我們再沿著x軸方向看，如下圖：
圖中藍(lán)色是旋轉(zhuǎn)前的軌跡，紫色是旋轉(zhuǎn)之后的軌跡。假設(shè)P點(diǎn)是地球，P旋轉(zhuǎn)前的y坐標(biāo)是y0，則旋轉(zhuǎn)之后地球的y坐標(biāo)是：
y0 * 旋轉(zhuǎn)角度的余切值，即：
y1 = y0* cos(60°)
好了。現(xiàn)在的結(jié)論是，只需要把圖1的所有行星的y 坐標(biāo) * cos60°，就能達(dá)到效果了。
而圖1中，計算各個行星旋轉(zhuǎn)之前的x 、y坐標(biāo)比較簡單。
x0 = Radius * cos60°
y0 = Radius * sin60°
2.行星轉(zhuǎn)到太陽后面時，會被太陽擋住，轉(zhuǎn)到太陽前面時，會擋住太陽
剛看到這個效果，覺得這個問題是個比較難的點(diǎn)，如果所有行星的父容器和太陽是平級關(guān)系，結(jié)果就是要么所有的行星都會擋住太陽，要么就是太陽都會擋住行星。不能達(dá)到行星轉(zhuǎn)到太陽后面時，會被太陽擋住，轉(zhuǎn)到太陽前面時，會擋住太陽 * 的這種效果
但是如果所有的行星和太陽是平級關(guān)系，即他們是同一個父容器下的子View，那么我們就可以達(dá)到這個效果，方法有三種：
1、重寫父容器dispatchDraw()方法，改變子View的繪制順序（圖3中先draw土星，再draw太陽，再draw地球）；
2、在子View draw之前依次調(diào)用bringToFront()方法（圖3中先調(diào)用土星的bringToFront()方法，再調(diào)用太陽的bringToFront()方法，最后調(diào)用地球的bringToFront()方法）；
3、通過改變所有子View的z值（高度）以改變View的繪制順序。
這三種方法理論是都可以實(shí)現(xiàn)，但是方法1 成本太高、風(fēng)險也高，重新dispatchDraw()可能會發(fā)生未知問題，至于方法2，細(xì)心的朋友可能發(fā)現(xiàn)，每次調(diào)用bringToFront()方法，都會出發(fā)requestLayout()，降低了測量布局繪制效率，更重要的原因是在layout（問題1的解決需要重新layout方法）之后再調(diào)用requestLayout()方法，會導(dǎo)致循環(huán)layout-draw-layout-draw-layout-draw....
綜上，我們選擇方法3。簡單，風(fēng)險小。
3.行星自動旋轉(zhuǎn)，并且可以根據(jù)手勢滑動，滑動完之后繼續(xù)自動旋轉(zhuǎn)
自動滑動：在父容器中設(shè)置一個成員變量：角度偏移量
sweepAngle，計算子View的位置時將偏移量也考慮進(jìn)去。然后定時不斷增加或者減小sweepAngle(增加或減小 將決定子View是順時針or逆時針旋轉(zhuǎn))手勢：用的比較多，從后面的代碼中體現(xiàn)。
4.中間的太陽有照射的旋轉(zhuǎn)動畫
效果圖中的太陽由兩張圖片組成，一張是前景，一張是背景帶亮光，讓背景圖繞著z軸無限旋轉(zhuǎn)即可。
開始編碼
開始愉快的編碼
核心就是行星的父容器
/**
* 行星和太陽的父容器
*
* @author guolong
* @since 2019/8/20
*/
public class StarGroupView extends FrameLayout {
// 從這個角度開始畫View ，可以調(diào)整
private static final float START_ANGLE = 270f; // 270°
// 父容器的邊界 單位dp
private static final int PADDING = 80;
// 繞x軸旋轉(zhuǎn)的角度 70°對應(yīng)的弧度
private static final double ROTATE_X = Math.PI * 7 / 18;
// 以上幾個值都可以根據(jù)最終效果調(diào)整
/**
* 角度偏差值
*/
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);
// 邊距轉(zhuǎn)換為px
mPadding = (int) (context.getResources().getDisplayMetrics().density * PADDING);
}
@Override
protected 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坐標(biāo)轉(zhuǎn)換為旋轉(zhuǎn)之后的y坐標(biāo)
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));
// 假設(shè)view的最小縮放是原來的0.3倍，則縮放比例和角度的關(guān)系是
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.StarGroupView
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="1" />
<TextView
android:id="@+id/tv2"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/darker_gray"
android:gravity="center"
android:text="2" />
<TextView
android:id="@+id/tv3"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_green_dark"
android:gravity="center"
android:text="3" />
<TextView
android:id="@+id/tv4"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_blue_dark"
android:gravity="center"
android:text="4" />
<TextView
android:id="@+id/tv5"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_green_light"
android:gravity="center"
android:text="5" />
<TextView
android:id="@+id/tv6"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_orange_light"
android:gravity="center"
android:text="6" />
<TextView
android:id="@+id/tv7"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#ff3311"
android:gravity="center"
android:text="7" />
<TextView
android:id="@+id/tv8"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#11aa44"
android:gravity="center"
android:text="8" />
<TextView
android: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>
運(yùn)行，效果如下：
上述代碼正如前面分析的，計算所有子View的left 、top 、right 、bottom，注釋寫的也詳細(xì)。說明兩點(diǎn)：
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°]對應(yīng)的值就是[0,1]
即，設(shè)z = -sin(angle) + 1 當(dāng)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
接下來，再把中間的太陽加進(jìn)去
太陽也是StarGroupView的子View，但是和其他子View 不同的是，太陽在最中間，不參與類似行星的位置計算
簡單期間我們使用tag=“center"來標(biāo)識子View是中間的太陽。
修改xml文件
<com.glong.demo.view.StarGroupView
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 增加太陽View -->
<ImageView
android: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坐標(biāo)轉(zhuǎn)換為旋轉(zhuǎn)之后的y坐標(biāo)
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));
// 假設(shè)view的最小縮放是原來的0.3倍，則縮放比例和角度的關(guān)系是
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改大一點(diǎn)，改成160，運(yùn)行如下：
問題很明顯，3應(yīng)該在4的上面， 2 應(yīng)該在3的上面，中間的View應(yīng)該在5，6的上面。
這是因為系統(tǒng)默認(rèn)按照View的添加順序畫View的，即我們xml文件里面的順序。xml里面我們centerView在第一個，所以就先畫centerView，導(dǎo)致centerView被其他View覆蓋。按照上面的分析，動態(tài)改變View的z值以改變View的draw順序。
修改StarGroupView.java代碼
public class StarGroupView extends FrameLayout {
private void layoutChildren() {
// ...省略之前代碼
changeZ();
}
/**
* 改變子View的z值以改變子View的繪制優(yōu)先級，z越大優(yōu)先級越低（最后繪制）
*/
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>() {
@Override
public 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根據(jù)他的scaleY排序，由于centerView的scaleY 在layoutChildren()時并沒有改變，我們把centerView的scaleY設(shè)置為0.5f，最后再還原回去。現(xiàn)在運(yùn)行，效果如下：
到這里基本已經(jīng)達(dá)到了我們想要的效果啦，接下來讓其自動旋轉(zhuǎn)和響應(yīng)手勢，肯定就難不倒我們啦。
加入自動旋轉(zhuǎn)
子StarGroupView中循環(huán)postDelayed(runnable,16)即可，這里為什么是16ms，大家都懂
修改StarGroupView.java
public class StarGroupView extends FrameLayout {
// ...省略已有代碼
//自動旋轉(zhuǎn)角度,16ms（一幀）旋轉(zhuǎn)的角度，值越大轉(zhuǎn)的越快
private static final float AUTO_SWEEP_ANGLE = 0.1f;
private Runnable autoScrollRunnable = new Runnable() {
@Override
public 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);
}
}
這樣就開始自動旋轉(zhuǎn)了，調(diào)節(jié)AUTO_SWEEP_ANGLE的值 改變旋轉(zhuǎn)速度
加入手勢
老寫法，先上代碼
在StarGroupView.java中增加
public class StarGroupView extends FrameLayout {
//px轉(zhuǎn)化為angle的比例 ps:一定要給設(shè)置一個轉(zhuǎn)換，不然旋轉(zhuǎn)的太歡了
private static final float SCALE_PX_ANGLE = 0.2f;
/**
* 手勢處理
*/
private float downX = 0f;
/**
* 手指按下時的角度
*/
private float downAngle = sweepAngle;
/**
* 速度追蹤器
*/
private VelocityTracker velocity = VelocityTracker.obtain();
/**
* 滑動結(jié)束后的動畫
*/
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() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();
// 乘以SCALE_PX_ANGLE是因為如果不乘 轉(zhuǎn)得太歡了
sweepAngle += (value * SCALE_PX_ANGLE);
layoutChildren();
}
});
}
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
velocity.addMovement(event);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = x;
downAngle = sweepAngle;
// 取消動畫和自動旋轉(zhuǎn)
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);
// 速度為負(fù)值代表順時針
scrollByVelocity(velocity.getXVelocity());
postDelayed(autoScrollRunnable, 16);
}
return super.onTouchEvent(event);
}
private void scrollByVelocity(float velocity) {
float end;
if (velocity < 0)
end = -AUTO_SWEEP_ANGLE;
else
end = 0f;
velocityAnim.setFloatValues(-velocity, end);
velocityAnim.start();
}
}
手勢處理的代碼比較簡單，這里就不再贅述了，需要注意的是
1.ACTION_DOWN需返回true，不然收不到后續(xù)的ACTION_MOVE事件；
2.ACTION_DOWN時需要暫停動畫和自動旋轉(zhuǎn)
3.這里根據(jù)手指離開屏幕時的速度做Animator動畫，當(dāng)然你也可以用scroller實(shí)現(xiàn)。
4.第59行，我們給dx * SCALE_PX_ANGLE代表一個像素可以轉(zhuǎn)換成SCALE_PX_ANGLE角度
最后，加上中間太陽旋轉(zhuǎn)的動畫
在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">
<rotate
android:duration="8000"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="-1"
android:toDegrees="360" />
</set>
在Activity中
public class LandActivity extends AppCompatActivity {
@Override
protected 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);
}
}
最終不到算上注釋260代碼搞定！
最終效果
我把完整的Demo代碼和星球效果代碼放在github上了
