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。