Question

如何在Android中实现折纸动画

Answer 1

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

class FoldableItemLayout extends FrameLayout {
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
Bitmap cacheBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
mBaseLayout.setCacheCanvas(new Canvas(cacheBitmap));
}
}

class BaseLayout extends FrameLayout {
private Canvas mCacheCanvas;

private void setCacheCanvas(Canvas cacheCanvas) {
mCacheCanvas = cacheCanvas;
}

@Override
public void draw(Canvas canvas) {
mCacheCanvas.drawColor(0, PorterDuff.Mode.CLEAR);
super.draw(mCacheCanvas);
}
}

此外，还需要两个额外的视图（PartView）——用于图像的上、下两半部分。它们将在缓存中显示对应的数据，这些数据代表了该图像（Bitmap）的上半部和下半部。两个视图填充了主布局的整个区域，但只显示所需的部分。为了达到这种效果，咱们计算了位图的界限——在onDraw()方法中，让画布通过[drawBitmap (Bitmap bitmap, Rect src, RectF dst, Paint paint)](http://developer.android.com/reference/android/graphics/Canvas.html#drawBitmap(android.graphics.Bitmap, android.graphics.Rect, android.graphics.RectF, android.graphics.Paint))方法来绘制所需的部分。
然后通过setRotationX()方法设置相应的角度，设法旋转这些额外的视图，从而实现图像上半部和下半部的独立旋转。为了实现这个功能，咱们为FoldableItemLayout添加了一个名为FoldRotation的新参数。
FoldRotation参数范围是（-180，180]：
FoldRotation=0：两个部分都不旋转。在这种情况下，可以跳过位图缓存，实时的显示原始的布局。
0 <FoldRotation<90：下层的部分旋转到 FoldRotation角度;上层部分不旋转。
-90<FoldRotation<0:只有上层部分旋转。
90≤FoldRotation<180:下层部分不再显示。在这种情况下，包含下一布局的FoldableItemLayout应该覆盖当前的FoldableItemLayout。
-180<FoldRotation≤-90:上层部分不再显示。在这种情况下，包含先前的布局FoldableItemLayout应该覆盖当前的FoldableItemLayout。
FoldRotation=180：两个部分都隐藏。
现在有了一个二层布局，能够“折叠”它包含的元素，这样就可以做出一个FoldableListLayout——一个类似列表视图的布局，它创建列表元素，并通过使用BaseAdapter将其封装成FoldableItemLayout。在这种情况下，咱们还使用了FoldRotation参数用来确定元素在列表中的位置。
例如，FoldRotation= 30，列表第一个元素（FoldableItemLayout）的FoldRotation值为30，而第二个元素——FoldRotation= 150，最多可以同时显示不超过2个元素。FoldRotation参数值的范围依赖于元素的数量：如果列表包含一个元素，那么取值范围就会是[0,0]，2——[0，180]，3——[0，360]等。
打开动画