Android 登录3D翻转动画效果
2024-04-23 07:10:07
Android 登录3D翻转动画效果
描述：这是一个 登录3D翻转效果的Demo。
项目代码在最后面！！！！跳转到最后
控件效果如下：
实现功能：
- 使页面进行3D翻转（3D翻转效果）
- 可通过回调监听两个页面的显隐
设计核心：
主要的设计核心是依赖于Camera来进行视觉上深度的放大和缩小，而旋转则是依靠动画进行实现。
核心代码：
Rotate3dAnimation.java 一个3D的旋转动画效果，也是旋转动画的核心
import android.graphics.Camera;
import android.graphics.Matrix;
import android.view.animation.Animation;
import android.view.animation.Transformation;public class Rotate3dAnimation extends Animation{private float mCenterX,mCenterY;private Camera mCamera;private RotateListener rotateListener;private boolean isBack=false;private boolean ishalf=false;private float mDegree=180;public Rotate3dAnimation(){}public void setRotateListener(RotateListener rotateListener){this.rotateListener=rotateListener;}//翻转监听public void setBack(boolean back) {isBack = back;}//初始化位置@Overridepublic void initialize(int width, int height, int parentWidth, int parentHeight) {super.initialize(width, height, parentWidth, parentHeight);mCamera=new Camera();mCenterX=(float) width/2;mCenterY=(float)height/2;}//动画改变//interpolatedTime 0~1@Overrideprotected void applyTransformation(float interpolatedTime, Transformation t) {if (interpolatedTime>0.5&&interpolatedTime<=1){if (!ishalf){rotateListener.transhalf(isBack);ishalf=true;}}else if (interpolatedTime<0.5){if (ishalf){ishalf=false;}}//是否已过一半float degrees = mDegree * interpolatedTime;if (isBack){degrees =180- degrees;}mCamera.save();;float z;//Z轴高度500 默认-576if (interpolatedTime<0.5){z= 500*interpolatedTime*2;}else {z= 1000 *(1-interpolatedTime);}mCamera.translate(0,0,z);final Matrix matrix=t.getMatrix();mCamera.rotateY(degrees);mCamera.getMatrix(matrix);mCamera.restore();matrix.preTranslate(-mCenterX,-mCenterY);matrix.postTranslate(mCenterX,mCenterY);super.applyTransformation(interpolatedTime, t);}public interface RotateListener{void transhalf(boolean isback);//移动到一半 适合显隐界面}
}使用示例：
如效果图里的登录样例：
LoginActivity3d.java
import androidx.cardview.widget.CardView;import android.util.Log;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;import com.alibaba.android.arouter.facade.annotation.Route;
import com.ui.design.R;
import com.ui.design.main.base.BaseActivity;
import com.ui.design.main.constants.Constants;
import com.ui.design.view.rotateLogin3d.view.Rotate3dAnimation;@Route(path = Constants.LoginActivity3d)
public class LoginActivity3d extends BaseActivity {private Rotate3dAnimation rotate3dAnimation;@Overrideprotected int initLayout() {return R.layout.activity_login_activity3d;}@Overrideprotected void initView() {Button register_bt=findViewById(R.id.register_bt);Button login=findViewById(R.id.login_bt);Button registerfinish_bt=findViewById(R.id.registerfinish_bt);Button backlogin_bt=findViewById(R.id.backlogin_bt);LinearLayout linearLayout1=findViewById(R.id.linear1);LinearLayout linearLayout2=findViewById(R.id.linear2);CardView cardView=findViewById(R.id.cardView);initAnimation();rotate3dAnimation.setRotateListener((isback) -> {Log.e("TEST","roate");if (isback){linearLayout1.setVisibility(View.VISIBLE);linearLayout2.setVisibility(View.GONE);}else {linearLayout1.setVisibility(View.GONE);linearLayout2.setVisibility(View.VISIBLE);}});register_bt.setOnClickListener(v -> {rotate3dAnimation.setBack(false);cardView.startAnimation(rotate3dAnimation);});login.setOnClickListener(v -> Toast.makeText(LoginActivity3d.this,"完成登录操作",Toast.LENGTH_SHORT).show());registerfinish_bt.setOnClickListener(v -> Toast.makeText(LoginActivity3d.this,"完成注册操作",Toast.LENGTH_SHORT).show());backlogin_bt.setOnClickListener(v -> {rotate3dAnimation.setBack(true);cardView.startAnimation(rotate3dAnimation);});}private void initAnimation(){rotate3dAnimation=new Rotate3dAnimation();rotate3dAnimation.setInterpolator(new AccelerateDecelerateInterpolator());rotate3dAnimation.setDuration(2000);rotate3dAnimation.setFillAfter(true);}@Overrideprotected void initData() {}
}
layout:activity_login_activity3d.xml
android:rotationY=“180” //非常关键 不然你的图是反的
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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:layout_width="match_parent"android:layout_height="match_parent"tools:context=".view.rotateLogin3d.LoginActivity3d"android:background="@drawable/jrtt_channel_bg_channel"><include layout="@layout/title_include" /><androidx.cardview.widget.CardViewandroid:id="@+id/cardView"android:layout_width="300dp"android:layout_height="400dp"android:background="@color/white"app:cardCornerRadius="5dp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"><LinearLayoutandroid:id="@+id/linear1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:orientation="vertical"><androidx.appcompat.widget.AppCompatTextViewandroid:id="@+id/loginText"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:text="登陆页"android:textColor="@color/black"android:textSize="15sp" /><androidx.appcompat.widget.AppCompatEditTextandroid:layout_width="250dp"android:layout_height="40dp"android:inputType="text"android:layout_marginTop="20dp"android:paddingStart="20dp"android:paddingEnd="20dp"android:background="@drawable/ic_radius_15dp_black_stroke"android:textColor="@color/black"android:hint="用户名"android:textSize="12sp" /><androidx.appcompat.widget.AppCompatEditTextandroid:layout_width="250dp"android:layout_height="40dp"android:inputType="text"android:layout_marginTop="10dp"android:paddingStart="20dp"android:paddingEnd="20dp"android:background="@drawable/ic_radius_15dp_black_stroke"android:textColor="@color/black"android:hint="密码"android:textSize="12sp" /><com.google.android.material.textfield.TextInputLayoutandroid:id="@+id/password_confim"android:visibility="gone"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="5dp"android:hint="密码确认"app:counterEnabled="true"app:counterTextColor="@color/brown"app:hintTextColor="@color/brown"><androidx.appcompat.widget.AppCompatEditTextandroid:layout_width="250dp"android:layout_height="wrap_content"android:background="@color/white"android:inputType="textPassword"android:textColorHint="@color/brown"android:textSize="12sp" /></com.google.android.material.textfield.TextInputLayout><com.google.android.material.button.MaterialButtonandroid:id="@+id/login_bt"android:layout_width="match_parent"android:layout_height="40dp"android:layout_marginTop="25dp"android:backgroundTint="@color/brown"android:text="登录"android:textColor="@color/white"app:cornerRadius="10dp"app:rippleColor="@color/bisque" /><com.google.android.material.button.MaterialButtonandroid:id="@+id/register_bt"android:layout_width="match_parent"android:layout_height="40dp"android:layout_marginTop="5dp"android:backgroundTint="@color/lightgrey"android:text="去注册"android:textColor="@color/black"app:cornerRadius="10dp" /></LinearLayout><LinearLayoutandroid:id="@+id/linear2"android:layout_width="wrap_content"android:visibility="gone"android:rotationY="180"android:layout_height="wrap_content"android:layout_gravity="center"android:orientation="vertical"><androidx.appcompat.widget.AppCompatTextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:text="注册页"android:textColor="@color/black"android:textSize="15sp" /><androidx.appcompat.widget.AppCompatEditTextandroid:layout_width="250dp"android:layout_height="40dp"android:inputType="text"android:layout_marginTop="20dp"android:paddingStart="20dp"android:paddingEnd="20dp"android:background="@drawable/ic_radius_15dp_black_stroke"android:textColor="@color/black"android:hint="新用户名"android:textSize="12sp" /><androidx.appcompat.widget.AppCompatEditTextandroid:layout_width="250dp"android:layout_height="40dp"android:inputType="text"android:layout_marginTop="10dp"android:paddingStart="20dp"android:paddingEnd="20dp"android:background="@drawable/ic_radius_15dp_black_stroke"android:textColor="@color/black"android:hint="密码"android:textSize="12sp" /><androidx.appcompat.widget.AppCompatEditTextandroid:layout_width="250dp"android:layout_height="40dp"android:inputType="text"android:layout_marginTop="10dp"android:paddingStart="20dp"android:paddingEnd="20dp"android:background="@drawable/ic_radius_15dp_black_stroke"android:textColor="@color/black"android:hint="密码确认"android:textSize="12sp" /><com.google.android.material.button.MaterialButtonandroid:id="@+id/registerfinish_bt"android:layout_width="match_parent"android:layout_height="40dp"android:layout_marginTop="25dp"android:backgroundTint="@color/brown"android:text="完成注册"android:textColor="@color/white"app:cornerRadius="10dp" /><com.google.android.material.button.MaterialButtonandroid:id="@+id/backlogin_bt"android:layout_width="match_parent"android:layout_height="40dp"android:layout_marginTop="5dp"android:backgroundTint="@color/lightgrey"android:text="返回登录"android:textColor="@color/black"app:cornerRadius="10dp" /></LinearLayout></androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>项目代码仓库
如果直接复制可能会出现代码缺陷，完整代码请去仓库下载
如果觉得还行，耽误您几秒钟的时间去我的仓库点点star，万一以后用到了呢？
UIDesign 开源项目
Android 登录3D翻转动画效果相关推荐
- php 3d animation,CSS_纯CSS实现菜单、导航栏的3D翻转动画效果，我曾经向大家展示过闪光的logo - phpStudy...
纯CSS实现菜单.导航栏的3D翻转动画效果 我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单.大家可以先看看实际效果,下面有效果截图 ...
- Android 卡片翻转动画效果
转载请标明出处:http://blog.csdn.net/android_mnbvcxz/article/details/78570594 Android 卡片翻转动画效果 前言 前端时间开发一款应用 ...
- html5 鼠标旋转动画效果,CSS3鼠标滑过图片3D翻转动画特效
这是一款效果非常炫酷的CSS3鼠标滑过图片3D翻转动画特效.该特效基于Bootstrap网格系统来布局,通过简单的CSS3代码,在鼠标滑过图片时对图片进行3D翻转,效果非常的酷. 使用方法 HTML结 ...
- android中设置Animation 动画效果
在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...
- android仿ppt,android 仿ppt进入动画效果合集
EnterAnimation android 仿ppt进入动画效果合集, 百叶窗效果,擦除效果,盒状效果,阶梯效果,菱形效果,轮子效果,劈裂效果,棋盘效果, 切入效果,扇形展开效果,十字扩展效果,随机 ...
- android 开红包动画,Android实现红包雨动画效果
本文介绍了Android实现红包雨动画效果,分享给大家,希望对大家有帮助 红包雨 关于实现上面红包雨效果步骤如下: 1.创建一个红包实体类 public class RedPacket { publi ...
- Android利用SVG实现动画效果
系列文章目录 Android利用SVG实现动画效果 老规矩,文中/文末会放置源码 文章目录 系列文章目录 前言 一.先看看Android中一个简单的SVG图 二.pathdata中参数的定义(三角形是 ...
- flash图片如何镜像翻转_在canvas上实现元素图片镜像翻转动画效果的方法
这篇文章主要介绍了在canvas上实现元素图片镜像翻转动画效果的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧! 一.Canvas图片水平镜像翻转效果预览 ...
- 纯CSS实现3D正方体动画效果
目录 前言 正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化 总结 前言 纯CSS实现3D正方体动画效果,此方法是通过transf ...
最新文章
- cpu序列号唯一吗_手机CPU天梯图2020年1月最新版 你的手机处理器排名高吗？
- JSP 基础之 JSTL c:forEach用法
- chime-4 lstm_CHIME-6挑战赛回顾
- mysql外键设置sql语句,SQL Server 2008之SQL语句外键
- 设计图书馆oracle触发器,Oracle触发器开发与设计
- AI持续赋能，搜狗S1会给录音笔行业带来哪些新变化？
- AxureRP8实战手册
- python快速入门神器 知乎_Python数据可视化神器--pyecharts 快速入门
- 用u盘装linux系统黑屏,u盘启动黑屏 u盘装系统启动不了黑屏咋办
- Entity Framework基础
- python培训班大概多少钱
- 背景差分法《python图像处理篇》
- 程序员开发指南！金三银四Android面试的一些感受，这原因我服了
- BaseAdapter的使用
- LeeCode 5454 前缀和 + 暴力
- 一个用 C 语言写的迷你版 2048 游戏，仅仅有 500个字符
- 发多少范德萨范德萨范德萨范德萨
- 如何将Word文件转化为Latex文件：word-to-latex-2.56详解
- 面试积累(简单的工厂模式)
- 【编译matlab函数生成dll】