多View統一Camera v1.2

keyboard3發表於2018-01-23
原文網址 : https://juejin.im/post/5a3102836fb9a045023ba288
View

多view旋轉效果圖
應用場景：需要將多個按照順序排列的View做出整體旋轉的動畫效果

多View統一Camera v1.2
是的，讓容器旋轉確實可以到達效果，但是由於效能....等需求，不用容器該怎麼實現呢？

我們想旋轉嘛，讓每個View都在ValueAnimator裡改變setRotationY不就行了。

final ValueAnimator animator = ValueAnimator.ofInt(0, 180);
animator.setDuration(2000);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator valueAnimator) {
        int animatedValue = (int) valueAnimator.getAnimatedValue();
        for (View view : listViews) {
            view.setRotationY(animatedValue);
        }
    }
});
複製程式碼

幾行程式碼迅速搞定

多View統一Camera v1.2

多View統一Camera v1.2
這裡我們就談談這個rotationY的旋轉原理了     View的rotationY方法以View的中心點的Y方向為旋轉軸旋轉。     camera則在該中心點的z軸正方向。     那麼可以看見每個View都有自己的camera形成旋轉投影效果，所以就會出現多View一起旋轉混亂的情況。

     有沒有辦法統一呢？有。那就是設定一個統一的camera位置，讓所有View的camera都移動到該位置上，則就相當於一個camera投影不同的View。這個時候旋轉View就可以達到整體的效果。

     通過setPivotY和setPivotX可以調整camera所在位置。那麼這個PivotY和PivotX參考的座標系到底是在哪？PivotY和PivotX的參考座標系是View的左上角。

     現在思路很清晰了。就是設定一個camera的Y位置，然後通過setPivotY()讓所有view的camera都移動到該位置。

具體做法：

  • 以第一個view左上角為參考座標系，得到camera的Y位置。 cameraY=所有view的height和/2
  • Y值對映到各自的座標系上。
    PivotY=cameraY-上個view的height
if (isFirst) {
    isFirst = false;
    //計算總高度
    float allHeight = 0;
    for (View item : listViews) {
        allHeight += item.getHeight();
    }
    //得到camera的Y值
    float cameraY = allHeight / 2;
    //將camera的Y值對映到每個View上，並移動到該位置
    for (int i = 0; i < listViews.size(); i++) {
        View itemView = listViews.get(i);
        cameraY = cameraY - (i < 1 ? 0 : listViews.get(i - 1).getHeight());
        itemView.setPivotY(cameraY);
    }
}
animator.start();
複製程式碼

相關文章