3.4.2　实现百叶窗动画

合理运用图层规则可以实现酷炫的动画效果，比如把图片分割成一条一条，接着每条都逐渐展开，这便产生了百叶窗动画；把图片等分为若干小方格，然后逐次显示几个小方格，直至所有小方格都显示出来，便形成了马赛克动画。

以百叶窗动画为例，首先定义一个百叶窗视图，并重写onDraw方法，给遮罩画布描绘若干矩形叶片，每次绘制的叶片大小由比率参数决定。按此编写的百叶窗视图定义代码如下：

（完整代码见animation\src\main\java\com\example\animation\widget\ShutterView.java）

然后在布局文件中添加ShutterView节点，并在对应的活动页面调用setOriention方法设置百叶窗的方向，调用setLeafCount方法设置百叶窗的叶片数量。再利用属性动画渐进设置ratio属性，使整个百叶窗的各个叶片逐步合上，从而实现合上百叶窗的动画特效。播放百叶窗动画的示例代码如下：

（完整代码见animation\src\main\java\com\example\animation\ShutterActivity.java）

运行并测试该App，可观察到百叶窗动画的播放效果如图3-37和图3-38所示。图3-37为百叶窗动画开始播放时的画面，图3-38为百叶窗动画即将结束播放时的画面。

基于同样的绘制原理，可以依样画瓢实现马赛克动画，其中马赛克视图的代码片段如下：

（完整代码见animation\src\main\java\com\example\animation\widget\MosaicView.java）

在布局文件中添加MosaicView节点，并在对应的活动页面调用setGridCount方法设置马赛克的格子数量，再利用属性动画渐进设置ratio属性，使得视图中的马赛克逐步清晰显现。下面是播放马赛克动画的示例代码：

运行并测试该App，可观察到马赛克动画的播放效果如图3-39和图3-40所示。图3-39为马赛克动画开始播放时的画面，图3-40为马赛克动画即将结束播放时的画面。