简介

JazzHands, Github上的开源库，非常适用于app的介绍界面。先看看效果图👇
JazzHands demo
👉demo代码在这里👈

主要流程

  1. 创建JazzHandsViewController
  2. 定义介绍页面的页数
  3. 添加图片
  4. 定义每张图片的位置
  5. 添加滑动时候的效果

实现步骤

准备工作

  1. 使用cocoapod添加JazzHands

     pod 'JazzHands', '2.0.8'

  2. 创建工程，新增JazzHandsViewController,
    继承自IFTTTAnimatedPagingScrollViewController

  3. 导入头文件

     #import <IFTTTJazzHands.h>

定义页面页数

其实就是重写 - (NSUInteger)numberOfPages; 函数

添加subView

将每张图片封装到UIImageView,并添加到JazzHandsViewController的subView里面
关键代码:
JazzHands code1

定义每张图片位置

使用keepView:onPages:或者keepView:onPages:atTimes:定义位置

keepView:onPages:

    [self keepView:iconView onPage:i];

i表示目前处于介绍页面的第i页，该函数说明iconView只能显示在第i页面上

keepView:onPages:atTimes:

这篇文章的精华所在＝。＝

    [self keepView:tipView onPages:@[@(i + 1), @(i), @(i - 1)] atTimes:@[@(i - 1), @(i), @(i + 1)]];

上面的语句说明了3件事:(将i设为2进行说明， 所有 3 对应 i + 1, 2 对应 i, 1 对应 i - 1)

  1. tipView可以显示在第3，2，1页面上
  2. 当当前屏幕显示的是第2页面时，tipView应该在第2页面；当当前屏幕显示的是第1页面时，tipView应该在第3页面：这说明了当屏幕从第2页滑动到第1页时(意会一下：这里手指的操作是向👉滑动)，tipView从第2页滑动到了第3页(意会一下：就是tipView咻咻的一下跟着手指被滑到👉，并且比后面的页面更快地滑出界面了)
  3. 当当前屏幕显示的是第2页面时，tipView应该在第2页面；当当前屏幕显示的是第3页面时，tipView应该在第1页面：这说明了当屏幕从第2页滑动到第3页时(意会一下：这里手指的操作是向👈滑动)，tipView从第2页滑动到了第1页(意会一下：就是tipView咻咻的一下跟着手指被滑到👈，并且比后面的页面更快地滑出界面了)

添加滑动时候的效果

这里使用的是淡入淡出效果,通过IFTTTAlphaAnimation控制view的透明度
关键代码：
JazzHands code2
还是将i设为2进行说明：

  1. 当当前页面刚好在第2页的时候，这个时候是不透明的，完全显示
  2. 当当前页面刚好在第2.5/1.5页的时候，这个时候是完全透明的，不显示
  3. 在1.5-2.5之间,tipView渐变显示

小结

  1. 动画可以分为2部分，淡入淡出和滑动
  2. 滑动的控制使用keepView:onPages:或者keepView:onPages:atTimes:，这部分关键在于意会…
  3. 淡入淡出使用IFTTTAlphaAnimation控制

参考