利用Matrix让蝴蝶动起来

有幸在鸿洋的一篇Android FoldingLayout 折叠布局 原理及实现(一)中,学习到了Matrix的setPolyToPoly操作,于是着想到了如何让一张静态的蝴蝶图片动起来。
先上图:

butterfly.gif

项目地址,gif有点掉帧,完整效果直接把项目clone下来试试就行了。

整体思路由三个部分组成:
1.蝴蝶的绘制。
2.折叠动画。

下面大概描述一下实现过程:

蝴蝶的绘制

蝴蝶的绘制使用的是svg+图片融合PorterDuffXfermode,对 这并不是一张图片,也就是说蝴蝶上的花纹是可以随意变化的。
在布局中添加花纹代码如下:

    <com.martin.butterfly.master.ButterFlyLoadView
        android:id="@+id/mbutterfly_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:figure="@drawable/figure1"
        />

关于svg的转化我并没有使用常见的解析方式;而是使用的是SVG2Drawable,去除了关于svg的解析过程,直接使用生成后的path代码。
在组件初始化的时候使用PorterDuffXfermode生成相关花纹的蝴蝶图片。

折叠动画

折叠的原理还是跟文章头部所说到的Android FoldingLayout 折叠布局 原理及实现(一)与其原理一致,主要判断好两支翅膀的矩形块与ToPoly的变化,这里不再复述了,如果需要了解该api的话可以去看看鸿洋的博客,我将这些变化都封装在ButterFlyDrawable中方便更改视图效果,并不仅仅使用在dialog之中。
动的更逼真点。
如果你喜欢这个动画的话,欢迎点赞和star

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容