Jazz Hands 是一个基于关键帧的 UIKit 动画框架。动画可以通过手势、滚动视图、KVO 或 ReactiveCocoa 来控制。

Jazz Hands 在 IF 和 DO by IFTTT 的 iPhone 和 iPad 应用程序中广泛使用，最著名的应用是在应用简介中。

示例应用程序

打开 JazzHandsDemo.xcworkspace 来查看在滚动应用简介中移动、缩放、淡化和转换视图的简单演示。

要运行示例项目，克隆仓库，并从 Example 目录运行 pod install

Swift 中的 JazzHands

正在寻找将 Jazz Hands 集成到您的 Swift 项目中？查看我们全新重新构想的基于 Swift 的滚动关键帧动画库 RazzleDazzle。

安装

您也可以直接将 JazzHands 文件夹的内容复制到您的项目中。

快速入门

首先，将 JazzHands 添加到您的 UIViewController。

#import <IFTTTJazzHands.h>

现在，创建一个 Animator 来管理这个 UIViewController 中的所有动画。

@property (nonatomic, strong) IFTTTAnimator *animator;

// later...

self.animator = [IFTTTAnimator new];

为要动画化的视图创建一个动画。可以为视图应用多种类型的动画。在示例中，我们将使用 IFTTTAlphaAnimation，它将使视图淡入和淡出。

IFTTTAlphaAnimation *alphaAnimation = [IFTTTAlphaAnimation animationWithView: viewThatYouWantToAnimate];

将动画注册到 animator。

[self.animator addAnimation: alphaAnimation];

向动画中添加一些关键帧。我们将在这 30 到 60 的时间间隔内使这个视图淡出。

[alphaAnimation addKeyframeForTime:30 alpha:1.f];
[alphaAnimation addKeyframeForTime:60 alpha:0.f];

现在，要动画化视图，告诉 animator 当前时间。例如，要将此动画与 UIScrollView 绑定，在滚动视图的代理方法中通知 animator 时间。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
  [super scrollViewDidScroll:scrollView];
  [self.animator animate:scrollView.contentOffset.x];
}

这将产生一种效果，其中视图将在 0 到 30 的滚动位置完全淡入并可见。在 30 到 60 的滚动位置之间，视图将淡出到不可见，并且将在大于 60 的滚动位置保持淡出状态。

动画类型

Jazz Hands 支持几种动画类型

• IFTTTAlphaAnimation 动画化 alpha 属性 (创建淡入淡出效果)。
• IFTTTRotationAnimation 动画化旋转变换度数 (用于旋转效果)。
• IFTTTBackgroundColorAnimation 动画化 backgroundColor 属性。
• IFTTTCornerRadiusAnimation 动画化 layer.cornerRadius 属性。
• IFTTTHideAnimation 动画化 hidden 属性 (隐藏和显示视图)。
• IFTTTScaleAnimation 会对视图大小应用缩放转换 （用于缩放视图大小）。
• IFTTTTranslationAnimation 会对视图位置应用平移转换 （用于平移视图位置）。
• IFTTTTransform3DAnimation 会动画化 layer.transform 属性 （用于3D转换）。
• IFTTTTextColorAnimation 会动画化 UILabel 的 textColor 属性。
• IFTTTFillColorAnimation 会动画化 CAShapeLayer 的 fillColor 属性。
• IFTTTStrokeStartAnimation 会动画化 CAShapeLayer 的 strokeStart 属性 （不与 IFTTTStrokeEndAnimation 一起使用）。
• IFTTTStrokeEndAnimation 会动画化 CAShapeLayer 的 strokeEnd 属性 （不与 IFTTTStrokeStartAnimation 一起使用）。
• IFTTTPathPositionAnimation 会动画化 UIView 的 layer.position 属性。
• IFTTTConstraintConstantAnimation 会动画化 AutoLayout 约束常量。
• IFTTTConstraintMultiplierAnimation 会动画化 AutoLayout 约束常量，将其作为另一视图属性的倍数 （根据另一个视图的大小来偏移或调整视图大小）。
• IFTTTScrollViewPageConstraintAnimation 会动画化 AutoLayout 约束常量，将视图放置在滚动视图页面上 （使用 AutoLayout 在 scrollView 上定位视图）。
• IFTTTFrameAnimation 会动画化 frame 属性 （移动和调整视图大小。不兼容 AutoLayout）。

更多示例

在 AutoLayout 世界的简单分页 ScrollView 布局

JazzHands 的 IFTTTAnimatedPagingScrollViewController 中的 keepView:onPage: 方法是一个超级简单的方式来布局分页滚动视图，当您的应用旋转或用于 iOS9 的新分割屏幕 iPad 视图中时，它会如您预期的那样工作，这是一个非常棘手的部分，以便使您的应用完全准备好 AutoLayout。 JazzHands 为您设置了一个友好的 AutoLayout 的分页滚动视图控制器，所有您需要做的就是通知 JazzHands 您想放在哪个页面上。

作为一个额外的奖励，因为它是建立在动画库的基础上，您甚至可以告诉 JazzHands 您想让您的一些视图出现在多个页面上，而其他视图则滚动过去，只需调用一次 keepView:onPages:。

要查看新的 JazzHands 2.0 AutoLayout 魔法如何运作，请查看示例项目。

ReactiveCocoa

假设您想要根据UITableView的滚动偏移量执行某些动画，但您不希望成为该表的代理？ReactiveCocoa正是为此而设计的。

[RACObserve(self.tableView, contentOffset) subscribeNext:^(NSValue *value) {
    CGFloat y = self.tableView.contentOffset.y;
    [self.animator animate:y];
}];

KVO

或者，也许您想要根据另一个视图的位置动画化一些视图？Jazz Hands 与 KVO 工作得很好。

- (void)viewDidLoad
{
  [self.viewToMirror addObserver:self
                      forKeyPath:@"frame"
                         options:NSKeyValueObservingOptionInitial
                         context:nil];
}

- (void)observeValueForKeyPath:(NSString *)keyPath
                      ofObject:(id)object
                        change:(NSDictionary *)change
                       context:(void *)context {

  if ([keyPath isEqualToString:@"frame"]) {
    [self.animator animate:CGRectGetMinY(self.viewToMirror.frame)];
  } else {
    [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
  }
}

手势

Jazz Hands 足够灵活，可以接受来自许多不同类型源的时间输入，包括 UIGestureRecognizer。

- (IBAction)handlePan:(UIPanGestureRecognizer *)recognizer
{
    [self.animator animate:[recognizer locationOfTouch:0 inView:self.view].x];
}

注意

动画器一次只能处理一个视图一个类型的动画。如果要在视图上使用相同类型的多个动画，请使用关键帧。

IFTTTFrameAnimation 与 AutoLayout 或任何约束动画不兼容。

想要在 Android 上构建如 JazzHands 的一般键帧动画库？请查看 SparkleMotion。

贡献者

• Devin Foley，创建者。
• Laura Skelton

贡献

1. Fork项目（https://github.com/[my-github-username]/JazzHands/fork）
2. 创建功能分支（git checkout -b my-new-feature）
3. 提交更改（git commit -am '添加一些功能'）
4. 推送到分支（git push origin my-new-feature）
5. 创建一个新的Pull Request

版权所有2015 IFTTT Inc.