需求:项目中有一个签到功能,点击签到时签到的卡牌实现 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
根据自己的需求进行了修改