今天实现了一个类似qq的打卡反转效果，效果图如下（卡片样式比较简陋大家可以自己美化一下），快来看看怎么实现的吧
先写两个layout显示卡片部分
分别写打卡前的卡片样式（包括按钮）和打卡后显示的卡片，代码如下
打卡前（cardbefore.xml）
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:layout_gravity="center_horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="330dp"
android:layout_height="500dp"
android:layout_marginTop="30dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_gravity="center_horizontal"
android:background="@drawable/clock_in"
/>
</FrameLayout>
<android.widget.Button
android:id="@+id/button_clock_in"
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="420dp"
android:background="@drawable/btn_clock_in"
android:text="立即打卡"
android:textColor="#000000"
android:textSize="20dp"
android:textStyle="bold" />
</FrameLayout>
</LinearLayout>打卡后(cardafter.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:layout_gravity="center_horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/cardafter"
android:gravity="center"
android:textStyle="bold|italic"
android:textColor="#FFFFFF"
android:layout_width="330dp"
android:layout_height="500dp"
android:layout_marginTop="30dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:text="追风赶月莫停留，平芜尽处是春山"
android:textSize="22sp"
android:layout_gravity="center_horizontal"
android:background="@drawable/dahai"
/>
</FrameLayout>
</FrameLayout>
</LinearLayout>打卡页面布局文件
这个layout文件是打卡页面的整体布局，其中引入了上面两个布局文件，先将打卡前的布局显示出来，打卡后的隐藏起来，代码如下
打卡页面整体布局（activity_daka.xml）
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background_1"
android:orientation="vertical"
tools:context=".daka">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#FFFFFF">
<TextView
android:layout_width="55dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="15dp"
android:background="@mipmap/turn_left"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="励志打卡"
android:textSize="30dp"
android:textStyle="bold"
android:layout_gravity="center"/>
</FrameLayout>
<include layout="@layout/cardbefore"
android:id="@+id/a1"
android:visibility="visible"/>
<include layout="@layout/cardafter"
android:id="@+id/a2"
android:visibility="gone"/>
</LinearLayout>在activity中实现旋转效果
这段代码创建了一个Android活动，其中包含两个线性布局和一个按钮，当按钮被点击时，会触发两个线性布局的3D旋转动画，一个隐藏，另一个显示。
打卡页面activity（daka.java）
package com.example.depressed;
import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
public class daka extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_daka);
final LinearLayout a1 = findViewById(R.id.a1);
final LinearLayout a2 = findViewById(R.id.a2);
Button buttonClockIn = findViewById(R.id.button_clock_in);
buttonClockIn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 创建a1的旋转动画
ObjectAnimator rotationAnimator1 = ObjectAnimator.ofFloat(a1, "rotationY", 0f, -90f);
rotationAnimator1.setDuration(300);
// 创建a2的旋转动画
ObjectAnimator rotationAnimator2 = ObjectAnimator.ofFloat(a2, "rotationY", 90f, 0f);
rotationAnimator2.setDuration(500);
// 创建AnimatorSet来管理动画
AnimatorSet animatorSet = new AnimatorSet();
// 将两个动画添加到AnimatorSet中，并设置它们按顺序播放
animatorSet.playSequentially(rotationAnimator1, rotationAnimator2);
// 设置动画监听器，以便在第一个动画结束后隐藏a1
rotationAnimator1.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
// 当第一个动画开始时，不做任何操作
}
@Override
public void onAnimationEnd(Animator animation) {
// 当第一个动画结束时，隐藏a1
a1.setVisibility(View.GONE);
}
@Override
public void onAnimationCancel(Animator animation) {
// 当动画被取消时，不做任何操作
}
@Override
public void onAnimationRepeat(Animator animation) {
// 当动画重复时，不做任何操作
}
});
// 开始播放动画
animatorSet.start();
// 设置a2在动画开始前不可见
a2.setVisibility(View.INVISIBLE);
// 在第一个动画结束后，a2变为可见
rotationAnimator1.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
// 动画开始时不执行任何操作
}
@Override
public void onAnimationEnd(Animator animation) {
a2.setVisibility(View.VISIBLE);
}
@Override
public void onAnimationCancel(Animator animation) {
// 动画取消时不执行任何操作
}
@Override
public void onAnimationRepeat(Animator animation) {
// 动画重复时不执行任何操作
}
});
}
});
}
}根据以上步骤就可以实现类似qq打卡的翻转效果啦，快来试试吧~
标签：qq,动画,--,void,animation,打卡,public,Animator From： https://blog.csdn.net/2301_80743865/article/details/143272700