需求:項目中有一個簽到功能,點擊簽到時簽到的卡牌實現 180 度翻轉顯示已經簽到的背面。
1、在 res 包下新建 animator 包,新建兩個文件,進入動畫 anim_in 和 退出動畫 anim_out
anim_in :
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--消失-->
<!--<objectAnimator android:duration="0" android:propertyName="alpha" android:valueFrom="1.0" android:valueTo="0.0"/>-->
<!--旋轉-->
<objectAnimator android:duration="2000" android:propertyName="rotationY" android:valueFrom="0" android:valueTo="-180"/>
<!--出現-->
<objectAnimator android:duration="0" android:propertyName="alpha" android:startOffset="1000" android:valueFrom="0.0" android:valueTo="1.0"/>
</set>
anim_out :
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--旋轉-->
<objectAnimator android:duration="2000" android:propertyName="rotationY" android:valueFrom="0" android:valueTo="180"/>
<!--消失-->
<objectAnimator android:duration="0" android:propertyName="alpha" android:startOffset="1000" android:valueFrom="1.0" android:valueTo="0.0"/>
</set>
兩個佈局,一個是正面,一個是背面(背面的字需要用鏡像,這樣翻轉過來纔是正常的文字)
將兩個佈局在主界面 include 進去即可
動畫部分:
private AnimatorSet mRightOutSet;
private AnimatorSet mLeftInSet;
// 設置動畫
private void setAnimators() {
mRightOutSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_out);
mLeftInSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_in);
// 動畫監聽點擊事件
mRightOutSet.addListener(new AnimatorListenerAdapter() {
@Override public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
click_sign_fl.setClickable(false);
}
});
//設置佈局的點擊事件
click_sign_fl.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
flipCard(click_sign_fl);
}
});
}
// 改變視角距離, 貼近屏幕
private void setCameraDistance() {
int distance = 16000;
float scale = getResources().getDisplayMetrics().density * distance;
mFlCardFront.setCameraDistance(scale);
mFlCardBack.setCameraDistance(scale);
}
// 翻轉卡片
public void flipCard(View view) {
mRightOutSet.setTarget(mFlCardFront);
mLeftInSet.setTarget(mFlCardBack);
mRightOutSet.start();
mLeftInSet.start();
}
調用:
setAnimators(); // 設置動畫
setCameraDistance(); // 設置鏡頭距離
參考了這篇博客:https://www.cnblogs.com/zhangmiao14/p/10285862.html
根據自己的需求進行了修改