FlipView

如何創造卡片翻轉的效果?如下圖

這個效果的概念,其實是將兩個view疊在同一個位置,接著redView旋轉90度-> redView INVISIBLE -> greeView VISIBLE -> greeView 從270度旋轉到360度

過程其實就是這樣,以下是code

mTextView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mTextView.setCameraDistance(10 * mTextView.getWidth());
mTextView.animate().rotationY(90).setDuration(1500).setInterpolator(new LinearInterpolator()).setListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animator) {

}

@Override
public void onAnimationEnd(Animator animator) {
mTextView.setVisibility(View.INVISIBLE);
mTextView2.setVisibility(View.VISIBLE);
mTextView2.setCameraDistance(10 * mTextView2.getWidth());
mTextView2.setRotationY(270);
mTextView2.animate().rotationY(360).setDuration(1500).setInterpolator(new LinearInterpolator()).setListener(null).start();
}

@Override
public void onAnimationCancel(Animator animator) {

}

@Override
public void onAnimationRepeat(Animator animator) {

}
}).start();
}
});

比較需要注意的是setCameraDistance,這個值設定的好才會有漂亮的旋轉效果,另一個要注意的點就是interplator,使用linearInterpolator效果看起來比較不會正常,我認為選轉不應該有加速度的感覺XD

至於為何view 不是直接用gone的而是invisible,是因為view從gone到visible動畫效果都會失效,目前我也還沒找到可以使用gone又可以成功跑出animation的做法,如果有人知道類似的解法的話,歡迎討論一下~

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.