实现翻转卡片的动画效果

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

Card

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

本文源码的GitHub下载地址

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


首页

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

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


动画

初始化右出(RightOut)左入(LeftIn)动画, 使用动画集合AnimatorSet.
当右出动画开始时, 点击事件无效, 当左入动画结束时, 点击事件恢复.

右出动画

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

左入动画

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


镜头视角

改变视角, 涉及到旋转卡片的Y轴, 即rotationY, 需要修改视角距离.
如果不修改, 则会超出屏幕高度, 影响视觉体验.


旋转控制

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


动画效果

旋转卡片

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

OK, that’s all! Enjoy it!

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

2 8 收藏 评论

关于作者:Spike

硕士毕业, 任职于春雨移动健康, 从事移动端架构工作. 做了六年技术研发, 还会一直坚持下去. 分享一些自己的开发经验. 个人主页 · 我的文章 · 6 ·    

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部