如何在Android中成功折纸动画

遭到iOS版的启示，在最近的名目中，咱们选择在关上列表元素时成功一个相似格调的动画成果。后来，咱们试图经常使用一个现有的成功—— android-flip ， 经过OpenGL渲染动画——在***的Android版本中，它只做到了在屏幕上显示比拟清楚的工件（图片闪动）。另外，须要对这个类库启动改变，由于它 是为了滑动列表的元素设计的，但咱们的工程须要在关上列表元素的时刻有动画成果。在上方的演示视频中可以看出区别：android-flip成功的是折叠 列表，而咱们实践须要的是开展概略。

思考到这种场景，咱们选择自己成功这种成果。由于运行程序允许的最小Android版本为4.0，所以没经常使用OpenGL，而是用了规范Android SDK中的方法： View.setRotationX() ， View.setScaleX() 等。当 配件减速 启用时（假设指标API级别>=14,自动启用配件减速），这些方法可以十分高效地利用GPU。

结果看起来很***，所以选择分享咱们的做法。由于本文只是引见了基本的成功要点，您可以从GitHub高低载一切的实践代码： FoldableLayout 。

规划的成功

设计的***个元素是可以对折的规划。咱们的做法相当大胆：主规划（FoldableItemLayout）只蕴含一个特定的规划（在baselayout）。在动画中，BaseLayout将它的内容写入到缓存中，这是一个依据原始规划的尺寸专门创立的Bitmap对象。

此外，还须要两个额外的视图（PartView）——用于图像的上、下两半局部。它们将在缓存中显示对应的数据，这些数据代表了该图像（Bitmap）的上半部和下半部。两个视图填充了主规划的整个区域，但只显示所需的局部。为了到达这种成果，咱们计算了位图的界限——在方法中，咱们让画布经过[drawBitmap (Bitmap bitmap, Rect src, RectF dst, Paintpaint)](android.graphics.RectF,android.graphics.Paint))方法来绘制所需的局部。

而后经过setRotationX()方法设置相应的角度，设法旋转这些额外的视图，从而成功图像上半部和下半部的独立旋转。为了成功这特性能，咱们为FoldableItemLayout减少了一个名为FoldRotation的新参数。

FoldRotation参数范畴是（-180，180]：

如今有了一个二层规划，能够“折叠”它蕴含的元素，这样就可以做出一个FoldableListLayout——一个相似 列表视图 的规划，它创立列表元素，并经过经常使用 BaseAdapter 将其封装成FoldableItemLayout。在这种状况下，咱们还经常使用了FoldRotation参数用来确定元素在列表中的位置。

例如，FoldRotation=30，列表***个元素（FoldableItemLayout）的FoldRotation值为30，而第二个元素——FoldRotation=150，最多可以同时显示不超越2个元素。FoldRotation参数值的范畴依赖于元素的数量：假设列表蕴含一个元素，那么取值范畴就会是 [0,0]，2——[0，180]，3——[0，360]等。

关上动画

在学会了在几个元素之间经常使用折叠动画滚动之后，咱们处置了这个严重的应战：从恣意的终点生成元素的关上动画。应用曾经成功的 FoldableListLayout， 并使其在两个元素之间启动切换：封面规划和概略规划。这两种元素都应该显示在屏幕上，但概略元素应该是暗藏的。当用户点击一个封面元素时，运行程序会记住 过后的位置，并经常使用相反大小的空占位符视图取代它（免得破坏屏幕上的其余元素），并移动盖元素的下半专门创立的规划。这种规划将被用作 FoldableListLayout的***个元素。第二个元素将被交流为空占位视图，与封面元素的方式相反。

对齐

眼见封面元素曾经从屏幕上的最后位置开展，因此在动画环节中咱们的FoldableListLayout须要在封面元素和概略元素的位置之间移动。这就是为什么要记住在动画初始化环节中每个元素的初始位置和大小的要素。由于封面和概略的大小有或许不同，咱们须要在动画时期同时裁减它们，以便使它们的宽度分歧。

咱们基本曾经完工，只差一件事：缩放后，封面的高度或许看起来比下半局部的概略小。这象征着你须要暗藏图像的残余局部。

上方的屏幕截图显示了在动画的开局局部有一个灰色区域，高层的概略局部与封面的大小不符。

咱们为FoldableItemLayoutm引入一个额外的RollingDistance参数处置了这个疑问。这个参数担任从折线垂直移动图像。经常使用这个参数可以在动画的***局部中的人不知，鬼不觉中转换概略的一局部，而后在第二局部中全尺寸开展。

动画如今就可以运转了，余下的上班就是为真切的成果减少一些暗化，或为平滑的样子减少些阴影。本类库在上可以轻易经常使用，在那里你还可以找到一个经常使用例子。自始自终的欢迎pull恳求。

原文链接：

译文链接：