实现翻转卡片的动画效果

简介:

在Android设计中, 经常会使用卡片元素, 正面显示图片或主要信息, 背面显示详细内容, 如网易有道词典的单词翻转和海底捞的食谱展示. 实现卡片视图非常容易, 那么如何实现翻转动画呢?

实现翻转卡片的动画效果

在TB吃海底捞时, 使用Pad点餐, 发现应用的食谱功能使用卡片控件, 就准备和大家分享一下实现方式. 有兴趣的朋友可以去海底捞看看:)

本文源码的GitHub下载地址

https://github.com/SpikeKing/wcl-flip-anim-demo

欢迎Follow我的GitHub: https://github.com/SpikeKing

首页

首页由正面和背面两张卡片组成, 同时, 设置点击事件flipCard.

 
 
  1. <?xml version="1.0" encoding="utf-8"?> 
  2.  
  3. <FrameLayout 
  4.  
  5.     android:id="@+id/main_fl_container" 
  6.  
  7.     xmlns:android="http://schemas.android.com/apk/res/android" 
  8.  
  9.     xmlns:tools="http://schemas.android.com/tools" 
  10.  
  11.     android:layout_width="match_parent" 
  12.  
  13.     android:layout_height="match_parent" 
  14.  
  15.     android:onClick="flipCard" 
  16.  
  17.     android:paddingBottom="@dimen/activity_vertical_margin" 
  18.  
  19.     android:paddingLeft="@dimen/activity_horizontal_margin" 
  20.  
  21.     android:paddingRight="@dimen/activity_horizontal_margin" 
  22.  
  23.     android:paddingTop="@dimen/activity_vertical_margin" 
  24.  
  25.     tools:context="me.chunyu.spike.wcl_flip_anim_demo.MainActivity"
  26.  
  27.   
  28.  
  29.     <include 
  30.  
  31.         layout="@layout/cell_card_back"/> 
  32.  
  33.   
  34.  
  35.     <include 
  36.  
  37.         layout="@layout/cell_card_front"/> 
  38.  
  39.   
  40.  </FrameLayout>  

逻辑, 初始化动画和镜头距离.

 
 
  1. @Override 
  2.  
  3. protected void onCreate(Bundle savedInstanceState) { 
  4.  
  5.     super.onCreate(savedInstanceState); 
  6.  
  7.     setContentView(R.layout.activity_main); 
  8.  
  9.     ButterKnife.bind(this); 
  10.  
  11.   
  12.  
  13.     setAnimators(); // 设置动画 
  14.  
  15.     setCameraDistance(); // 设置镜头距离 
  16.  
  17.  

动画

初始化右出(RightOut)和左入(LeftIn)动画, 使用动画集合AnimatorSet.

当右出动画开始时, 点击事件无效, 当左入动画结束时, 点击事件恢复.

 
 
  1. // 设置动画 
  2.  
  3. private void setAnimators() { 
  4.  
  5.     mRightOutSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_out); 
  6.  
  7.     mLeftInSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_in); 
  8.  
  9.   
  10.  
  11.     // 设置点击事件 
  12.  
  13.     mRightOutSet.addListener(new AnimatorListenerAdapter() { 
  14.  
  15.         @Override public void onAnimationStart(Animator animation) { 
  16.  
  17.             super.onAnimationStart(animation); 
  18.  
  19.             mFlContainer.setClickable(false); 
  20.  
  21.         } 
  22.  
  23.     }); 
  24.  
  25.     mLeftInSet.addListener(new AnimatorListenerAdapter() { 
  26.  
  27.         @Override public void onAnimationEnd(Animator animation) { 
  28.  
  29.             super.onAnimationEnd(animation); 
  30.  
  31.             mFlContainer.setClickable(true); 
  32.  
  33.         } 
  34.  
  35.     }); 
  36.  
  37.  

右出动画

 
 
  1. <?xml version="1.0" encoding="utf-8"?> 
  2.  
  3. <set xmlns:android="http://schemas.android.com/apk/res/android"
  4.  
  5.     <!--旋转--> 
  6.  
  7.     <objectAnimator 
  8.  
  9.         android:duration="@integer/anim_length" 
  10.  
  11.         android:propertyName="rotationY" 
  12.  
  13.         android:valueFrom="0" 
  14.  
  15.         android:valueTo="180"/> 
  16.  
  17.   
  18.  
  19.     <!--消失--> 
  20.  
  21.     <objectAnimator 
  22.  
  23.         android:duration="0" 
  24.  
  25.         android:propertyName="alpha" 
  26.  
  27.         android:startOffset="@integer/anim_half_length" 
  28.  
  29.         android:valueFrom="1.0" 
  30.  
  31.         android:valueTo="0.0"/> 
  32.  
  33. </set 

旋转180°, 当旋转一半时, 卡片消失.

左入动画

 
 
  1. <?xml version="1.0" encoding="utf-8"?> 
  2.  
  3. <set xmlns:android="http://schemas.android.com/apk/res/android"
  4.  
  5.   
  6.  
  7.     <!--消失--> 
  8.  
  9.     <objectAnimator 
  10.  
  11.         android:duration="0" 
  12.  
  13.         android:propertyName="alpha" 
  14.  
  15.         android:valueFrom="1.0" 
  16.  
  17.         android:valueTo="0.0"/> 
  18.  
  19.   
  20.  
  21.     <!--旋转--> 
  22.  
  23.     <objectAnimator 
  24.  
  25.         android:duration="@integer/anim_length" 
  26.  
  27.         android:propertyName="rotationY" 
  28.  
  29.         android:valueFrom="-180" 
  30.  
  31.         android:valueTo="0"/> 
  32.  
  33.   
  34.  
  35.     <!--出现--> 
  36.  
  37.     <objectAnimator 
  38.  
  39.         android:duration="0" 
  40.  
  41.         android:propertyName="alpha" 
  42.  
  43.         android:startOffset="@integer/anim_half_length" 
  44.  
  45.         android:valueFrom="0.0" 
  46.  
  47.         android:valueTo="1.0"/> 
  48.  
  49. </set 

在开始时是隐藏, 逆向旋转, 当旋转一半时, 显示卡片.

镜头视角

改变视角, 涉及到旋转卡片的Y轴, 即rotationY, 需要修改视角距离.

如果不修改, 则会超出屏幕高度, 影响视觉体验.

 
 
  1. // 改变视角距离, 贴近屏幕 
  2.  
  3. private void setCameraDistance() { 
  4.  
  5.     int distance = 16000; 
  6.  
  7.     float scale = getResources().getDisplayMetrics().density * distance; 
  8.  
  9.     mFlCardFront.setCameraDistance(scale); 
  10.  
  11.     mFlCardBack.setCameraDistance(scale); 
  12.  
  13.  

旋转控制

设置右出和左入动画的目标控件, 两个动画同步进行, 并区分正反面朝上.

 
 
  1. // 翻转卡片 
  2.  
  3. public void flipCard(View view) { 
  4.  
  5.     // 正面朝上 
  6.  
  7.     if (!mIsShowBack) { 
  8.  
  9.         mRightOutSet.setTarget(mFlCardFront); 
  10.  
  11.         mLeftInSet.setTarget(mFlCardBack); 
  12.  
  13.         mRightOutSet.start(); 
  14.  
  15.         mLeftInSet.start(); 
  16.  
  17.         mIsShowBack = true
  18.  
  19.     } else { // 背面朝上 
  20.  
  21.         mRightOutSet.setTarget(mFlCardBack); 
  22.  
  23.         mLeftInSet.setTarget(mFlCardFront); 
  24.  
  25.         mRightOutSet.start(); 
  26.  
  27.         mLeftInSet.start(); 
  28.  
  29.         mIsShowBack = false
  30.  
  31.     } 
  32.  
  33.  

动画效果

动画效果非常简单, 全部逻辑都不足50行, 这么好玩的动画, 用起来吧.

OK, that’s all! Enjoy it!





本文作者:佚名
来源:51CTO
目录
相关文章
|
1月前
|
前端开发 JavaScript
拖拽旋转相册
拖拽旋转相册
|
2月前
|
前端开发
HTML+CSS实现菜单的3D翻转特效
HTML+CSS实现菜单的3D翻转特效
|
5月前
在RPA中实现拼图滑块
在RPA中实现拼图滑块
54 2
|
5月前
拼图滑块
拼图滑块
39 1
|
6月前
|
前端开发
【CSS动画02--卡片旋转3D】
【CSS动画02--卡片旋转3D】
|
8月前
|
JavaScript 前端开发 容器
手写图片拖拽、鼠标点位缩放
如题,无关技术背景,什么vue、react自己想用就用,这就是js加一点点css实现,意思就是可以任意迁。
115 0
|
8月前
|
移动开发 前端开发 HTML5
前端|3D立体视频翻转动画
前端|3D立体视频翻转动画
140 0
|
11月前
|
开发工具
滑动拼图验证码滑动框样式设置
之前在某官网登录的时候有一个滑动拼图验证码,很好奇怎么去实现。然后就想着自己弄一个。同时我在想有没有办法可以修改滑动拼图的滑动框样式呢?然后让我找到了 KgCaptcha,下面我就简单介绍一下吧!
滑动拼图验证码滑动框样式设置
|
Windows 容器
一款简单的缩放拖拽图片控件
本文介绍一个针对 .NET 桌面应用程序的独立图片缩放拖拽显示控件 [SQPhoto](https://www.nuget.org/packages/SQPhoto/)。
129 0
一款简单的缩放拖拽图片控件
纯CSS3写旋转的轮播图,开门大吉,旋转的导航栏
纯CSS3写旋转的轮播图,开门大吉,旋转的导航栏
128 0
纯CSS3写旋转的轮播图,开门大吉,旋转的导航栏