如何在Android中实现折纸动画

 我来答
小傻

2016-04-18 · 知道合伙人软件行家
小傻
知道合伙人软件行家
采纳数:11567 获赞数:31134
已经做过两个上架的app和两个网页项目.

向TA提问 私信TA
展开全部

android中实现折纸动画,要求系统是4.0以上,过程如下:

布局的实现

设计的第一个元素是可以对折的布局。我们的做法相当大胆:主布局(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]等。

打开动画

在学会了在几个元素之间使用折叠动画滚动之后,我们解决了这个重大的挑战:从任意的起点生成元素的打开动画。利用已经实现的 FoldableListLayout,并使其在两个元素之间进行切换:封面布局和详情布局。这两种元素都应该显示在屏幕上,但详情元素应该是隐藏的。当用户点击一个封面元素时,应用程序会记住当时的位置,并使用相同大小的空占位符视图取代它(以免破坏屏幕上的其他元素),并移动盖元素的下半专门创建的布局。以后这种布局将被用作 FoldableListLayout的第一个元素。第二个元素将被替换为空占位视图,与封面元素的方式相同。

对齐

眼见封面元素已经从屏幕上的最初位置展开,因此在动画过程中我们的FoldableListLayout需要在封面元素和详情元素的位置之间移动。这就是为什么要记住在动画初始化过程中每个元素的初始位置和大小的原因。由于封面和详情的大小有可能不同,我们需要在动画期间同时扩展它们,以便使它们的宽度一致。

我们基本已经完工,只差一件事:缩放后,封面的高度可能看起来比下半部分的详情小。这意味着你需要隐藏图像的剩余部分。

下面的屏幕截图显示了在动画的开始部分有一个灰色区域,下层的详情部分与封面的大小不符。


我们为FoldableItemLayoutm引入一个额外的RollingDistance参数解决了这个问题。这个参数负责从折线垂直移动图像。使用这个参数可以在动画的第一部分中的不知不觉中转换详情的一部分,然后在第二部分中全尺寸展开。

动画现在就可以运行了,余下的工作就是为逼真的效果添加一些暗化,或为平滑的样子添加些阴影。本类库在GitHub上可以随意使用,在那里你还可以找到一个使用例子。一如既往的欢迎pull请求。

互联教育专家V
2016-04-05 · TA获得超过389个赞
知道小有建树答主
回答量:639
采纳率:25%
帮助的人:339万
展开全部
Animation主要有两种动画模式: 一种是tweened animation(渐变动画) XML中JavaCodealphaAlphaAnimationscaleScaleAnimation 一种是frame by frame(画面转换动画) XML中JavaCodetranslateTranslateAnimationrotateRotateAnimation
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
旧城故事
2016-03-28 · TA获得超过375个赞
知道小有建树答主
回答量:492
采纳率:72%
帮助的人:165万
展开全部
Animation主要有两种动画模式: 一种是tweened animation(渐变动画) XML中JavaCodealphaAlphaAnimationscaleScaleAnimation 一种是frame by frame(画面转换动画) XML中JavaCodetranslateTranslateAnimationrotateRotateAnimation
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
记忆碎片的伤
2016-03-21 · TA获得超过1329个赞
知道小有建树答主
回答量:287
采纳率:0%
帮助的人:155万
展开全部
http://blog.jobbole.com/68689/ 可以看看这个或许对你有帮助
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式