揭开掌阅动画的秘密：让你的阅读器焕然一新！

Android

2023-12-18 10:41:36

在信息爆炸的时代，阅读成为了我们获取知识和放松身心的重要途径。为了提升阅读体验，不少阅读器应用都加入了各种动画效果，其中掌阅的书籍打开动画深受用户喜爱。今天，我们就来揭开这个动画的神秘面纱，并探索如何将其应用到你的阅读器项目中。

二.动画原理

掌阅的书籍打开动画采用了一个巧妙的视觉错觉，它将书籍的封面和内页分割成两部分，然后通过动画的方式让它们相互靠近，营造出书籍打开的效果。具体来说，动画分为以下几个步骤：

获取书架列表中书籍的图片位置 ：当用户点击书架中的书籍封面时，应用会获取该图片在屏幕上的位置。
将图片分为两部分 ：图片被分为封面和内页两部分，封面为图片的上半部分，内页为图片的下半部分。
动画：封面和内页以不同的速度从屏幕边缘向中间移动，最终重合，形成书籍打开的视觉效果。

三.实现指南

1.获取图片位置

首先，我们需要获取书架列表中点击的书籍图片在屏幕上的位置。我们可以使用RecyclerView的ViewHolder类或GridView的onItemClickListener方法来获取这个位置。

viewHolder.itemView.getLocationOnScreen(imagePosition);

2.分割图片

接下来，需要将图片分割成封面和内页两部分。我们可以使用Android的Bitmap类来创建两个新的Bitmap对象，分别存储封面和内页。

Bitmap cover = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight() / 2);
Bitmap content = Bitmap.createBitmap(bitmap, 0, bitmap.getHeight() / 2, bitmap.getWidth(), bitmap.getHeight() / 2);

3.动画

最后，需要通过动画的方式将封面和内页移动到屏幕中央。我们可以使用ObjectAnimator或ViewPropertyAnimator来实现动画。

ObjectAnimator coverAnimator = ObjectAnimator.ofFloat(coverView, "translationX", imagePosition[0], 0);
ObjectAnimator contentAnimator = ObjectAnimator.ofFloat(contentView, "translationX", imagePosition[0], 0);

需要注意的是，封面和内页的移动速度应该不同，封面移动速度快，内页移动速度慢，这样才能营造出书籍打开的错觉。