干货系列之实现City Guides的动画效果(二)

点此下载源码下载:源码(会持续更新,欢迎star。保证炫酷,童叟无欺!)

city guides插图.jpg

数字动态变化的动画效果

本篇文章要实现的动画效果如下。

由于生成gif帧动画时间较短的问题,有部分动画效果并没有显示体现出来。小编解析一下上面的gif动画效果。

本篇文章最后有最终实现的效果图。

解析动画
  1. 从上一个viewController进入到StatsViewController,是一个动画转场。(本篇文章不详细讲解)
  2. 显示当前视图,视图是从底部滑入。在滑入进入的过程中,视图上的部分子视图动画的变化(如:UILabel上的数字,CAGradientLayer的颜色等)。
  3. 当前视图加载完毕,滚动视图。在滚动过程中,有的视图同时向两侧移动逐渐消失或出现,有的视图向左逐渐移动消失或出现,而有的视图向右移动逐渐消失或出现。
  4. 子视图向左或者向右移动的过程中,部分子视图动态的变化。
设计思路

针对上面的每一步进行逐步设计实现。

  1. 参见源码,不详细介绍。
  2. StatsViewController上是由一个UIScrollView,从底部滑入的动画。

如何实现UILabel数字的动态变化呢?

开源项目pop动画帮我们实现了,小编来讲解如何实现吧。封装实现动画的UILabel的方法。

创建UILabel加入到当前视图中,实现数值由0到238874变化。

3.自定义封装UIScrollView上的子视图。(详细讲解这一部分的思路)

小编的设计思路是:每一行是一个ZFSliderAnimationView。ZFSliderAnimationView中,有一个或多个ZFSliderAnimationItem组成。

ZFSliderAnimationItem的定义,如下:

创建ZFSliderAnimationView可以定义多个类型如下:

对应复杂的自定义视图,作为单独一个View传人到ZFSliderAnimationView中。在本篇文章中,ZFRainDropView和ZFGradientView都是自定义的视图传人到ZFSliderAnimationView中。这样的好处避免ZFSliderAnimationView类代码显得特别的臃肿,而且耦合性降低。只需要创建自己所期望的UIView传人即可。

ZFSliderAnimationView根据style初始化:

在滚动UIScrollView时,每个item是向左还是向右移动。ZFSliderAnimationView的动画类型定义如下:

然后根据ZFSliderItemAnimation的值实现每个item移动:

在StatsViewController中,滚动UIScrollView由UIScrollView的顶部和底部的偏移量确定当前哪个视图移动的百分比。

4.动态变化子视图内容。

最终效果图:

结束语

在本篇演示的内容中,还一部分是关于渐变颜色的取值。等分插值取值,动态实现颜色的变化。详细的参考源码中的ZFGradientView。

扩展阅读:

干货系列之实现City Guides的动画效果(一)

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部