[置顶] 高仿微信抢红包动画特效

昨天与一个兄弟聊天时他说想搞个翻转动画，类似于微信抢红包时硬币旋转的效果。平时这个动画没怎么注意，当时就装作一脸蒙蔽的样子让他给我发红包。（哈哈，可惜他没上当...）

最后自发自抢体验了一下（轻喷..）感觉这个动画还是蛮不错的。第一感觉就是用属性动画进行Y轴旋转180度。在好奇的心情下打开了AS准备折腾一番...

ok，蛋疼的前序扯完了，进入今天的主题：高仿微信抢红包动画。就是模仿点击红包然后，打开红包的翻转过程。好了，开车吧~

先来看下今天的效果：


            


原谅我没有做Gif图，大家可以脑补一下。或者在文章末下载源码自己体验一发。

（1）动画过程：

          我们将红包分为两个布局界面，一个是上面显示的，另一个是翻转后显示的。进入界面后会首先显示抢到红包的界面，此时点击红包，红包会启动一个类似于翻牌的180度旋转特效，当翻转到一半时即90度，我们需要让背面的布局界面显示，正面的隐藏，然后显示红包已抢完的背面界面。（泪流满面.,..）

（2）原理：

        从上面动画过程的分析，我们可以拆分为以下几个实现过程：

        1> 红包布局的单击事件。

        2> 单击事件中，开启红包翻转动画。

        3> 翻转的同时，正面隐藏，背面显示出来，完成一次翻转过程。

（3）实现：

        在实现之前，还是一句话介绍下属性动画：属性动画是Android3.0之后Google退出的最新动画Api。属性动画主要的特点是可以改变View的属性值，使View在动画的效果下发生实质性的改变。

今天我们主要讲解的是如何实现翻转的过程。了解属性动画的朋友肯定都想到了，旋转嘛，RotationY就可以啦。如果还不了解属性动画的，可以看我之前写的动画系列专栏文章：

Android动画之旅

好了，既然是旋转，那么我们就先了解下属性动画中关于旋转的Api

ObjectAnimator rotationAnimator = ObjectAnimator.ofFloat(view,"RotationY",0,180);

从上图我们可以看到，我们使用了ofFloat来构造旋转动画，分别有三个参数：

（1）动画作用的目标View。

（2）动画执行的效果。

（3）起始值

（4）结束值

上面是使用Java代码进行创建，我们还可以在res下进行xml的创建：

首先需要res下创建animator资源文件目录（默认是不存在的），然后在其中创建animator资源：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 旋转 -->
<objectAnimator
android:duration="@integer/anim_time"
android:propertyName="rotationY"
android:valueFrom="0"
android:valueTo="180"
/>
</set>

动画的创建很简单，相信大家都滚瓜烂熟了。有些朋友可能对翻转度数模糊不清，那么我们就拿0-180，-180-0，180-0这几个度数范围从手机屏幕的角度来简单说一下:

0-180：即从0度旋转到180度，目标View会从左向右方向旋转。

180-0：即从180度旋转到0度，目标View会先初始化到旋转180度后的状态，然后从右向左旋转。

-180-0：即从-180度旋转到0度，目标View会先初始化到旋转180度后的状态，然后从左向右旋转。

0 - -180：即从0度旋转到-180度，目标View会从右向左方向旋转。

ok，了解了这些。想必大家对于今天的效果已经胸有成竹了吧。

再来理解下红包翻转动画的流程：

正面会从左向右旋转180度（0-180），当旋转到90度的时候让其隐藏，此时背景的布局也同时旋转着当旋转到一半后显示出来，背景的布局怎么旋转呢？背景的布局给我们的感觉是从里向外的显示，那么肯定是-180度到0度的过程。记住，整个过程都是需要从左向右新旋转。所以从上面四个选项旋转双选题你也会了吧。

ok,知道了旋转角度，以及隐藏显示的时机，那么看下面代码，我们直接在xml中定义动画：

从0-180度旋转，旋转到90度后隐藏，即红包正面的旋转动画：

<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 旋转 -->
<objectAnimator
android:duration="@integer/anim_time"
android:propertyName="rotationY"
android:valueFrom="0"
android:valueTo="180"
/>
<!-- 消失 -->
<objectAnimator
android:duration="0"
android:propertyName="alpha"
android:valueFrom="1.0"
android:valueTo="0.0"
android:startOffset="@integer/anim_half_time"
/>
</set>

上面代码中，首先让正面布局在anim_time的时间段内从0度旋转到180度，旋转的同时，控制正面布局的消失，我们使用alpha来控制透明度。startOffset用来控制动画开始的时机。

<!-- 消失 -->
<objectAnimator
android:duration="0"
android:propertyName="alpha"
android:valueFrom="1.0"
android:valueTo="0.0"
/>
<!-- 旋转 -->
<objectAnimator
android:duration="@integer/anim_time"
android:propertyName="rotationY"
android:valueFrom="-180"
android:valueTo="0"
/>
<!-- 显示 -->
<objectAnimator
android:duration="0"
android:propertyName="alpha"
android:startOffset="@integer/anim_half_time"
android:valueFrom="0.0"
android:valueTo="1.0"
/>

上面是红包背面布局的动画代码：

首先让其透明度为0，既给人隐藏的效果。然后从-180度在anim_time的时间段旋转到0度，同时在旋转到90度时变为可见状态。那么这样一个翻红包的动画效果就轻松实现了！

由于在翻转时，如果View太大，(接近屏幕大小），此时旋转会出现View超出屏幕的效果，所以还需要我们控制镜头的距离，即设置正面背面布局的镜头焦距：

//设置视角间距，防止旋转时超出边界区域
private void setCameraDistance() {
int distance = 6000;
float scale = getResources().getDisplayMetrics().density * distance;
llyFront.setCameraDistance(scale);
llyBack.setCameraDistance(scale);
}

最后就是开启动画啦~

ok，关于翻转红包的动画效果就介绍到这里了，相信大家对旋转到翻转的特效有了更新的认识，有问题的朋友及时给我留言，thks~!

源码下载