仿掌阅实现书籍打开动画

一. 前言

上次打开掌阅的时候看到书籍打开动画的效果还不错，正好最近也在做阅读器的项目，所以想在项目中实现一下。

二. 思路

讲思路之前，先看一下实现效果吧：

书籍打开关闭动画.gif

看完实现效果，我们再来讲一下实现思路：

 

书籍打开动画的思路.png

1. 获取RecyclerView（或GridView）中的子View里面的ImageView在屏幕的位置，因为获取的是Window下的位置，所以Y轴位置取出来还要减去状态栏的高度。
2. 图书的封面和内容页（其实是两个ImageView）设置成刚刚取出的子View里面的ImageView的位置和大小。
3. 设置动画，这边缩放动画的轴心点的计算方式需要注意一下，等下文讲解代码的时候再具体解释，还有就是利用Camera类（非平常的相机类）实现的打开和关闭动画（如果你对Camera不熟悉，建议先看GcsSloop大佬的这篇Matrix Camera）。

三. 具体实现

我会在这个过程中一步一步教你如何实现这个效果：

1. 布局

activity_open_book.xml:

<RelativeLayout 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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".ui.activity.OpenBookActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/recycle" android:layout_width="match_parent" android:layout_height="match_parent"/> <ImageView android:id="@+id/img_content" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="gone" android:contentDescription="@string/app_name" /> <ImageView android:id="@+id/img_first" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="centerCrop" android:visibility="gone" android:contentDescription="@string/app_name" /> </RelativeLayout> 

recycler_item_book.xml:

RecylerVIew中的子布局，其实也就是ImageView和TextView，这里就不贴放了。

2. 动画

我们只讲解旋转动画，因为旋转动画中也会涉及缩放动画。

想一下，如果想要在界面中实现缩放动画，我们得找好轴心点，那么，轴心点的x，y坐标如何计算呢？

为了更好的求出坐标，我们先来看一张图：