JazzHands 基本使用

JazzHands 是一个帧动画的库,我们可以结合 Gesture,scrollView,KVO,RAC 制作交互式的动画.
它特别适合使用在 App 的介绍界面上.

jazzhands-demo.gif

if-intro.gif

EYunDa.gif

Savr-Intro-Screen.gif

talkIntro.gif

前两个是 JazzHands 的Demo 和作品

后面3个分别是:

Savr-Intro-Screen
Intro-Guide-View-for-Talk.ai
"E运达" app

支持的动画类型

• IFTTTAlphaAnimation 透明度,内部修改 alpha属性
• IFTTTRotationAnimation 旋转角度,内部修改 view.transform 属性
• IFTTTBackgroundColorAnimation 背景色
• IFTTTCornerRadiusAnimation 圆角大小
• IFTTTHideAnimation 显示隐藏,内部调用 view.hidden=YES
• IFTTTScaleAnimation 内部修改 view.transform属性
• IFTTTTranslationAnimation 内部修改 view.transform属性
• IFTTTTransform3DAnimation 内部修改 layer.transform 属性
• IFTTTTextColorAnimation 修改 Label 的 textColor
• IFTTTFillColorAnimation CAShaperLayer 的 fillColor 属性
• IFTTTStrokeStartAnimation 修改 CAShapeLayer 的 strokeStart
• IFTTTStrokeEndAnimation 修改 CAShapeLayer 的 strokeEnd ,不能同时设置strokeEnd和 strokeStart动画
• IFTTTPathPositionAnimation 修改 UIView 的 Position 属性

AutoLayout 特有

• IFTTTConstraintConstantAnimation 修改 AutoLayout Constraint的 constant 属性
• IFTTTConstraintMultiplierAnimation 修改 AutoLayout Multiplier 属性,
• IFTTTScrollViewPageConstraintAnimation 用 AutoLayout 修改 ScrollView 和 View 的位置关系

Frame 果你用 AutoLayout 就不能用这个动画修改 Frame 属性

• IFTTTFrameAnimation 修改 View 的 frame 属性.

JazzHands - Hello World

先来做一个最基本的平移,透明度动画

helloworld.gif

开始

新建一个工程,在 ViewController 导入头文件

#import 

在 ViewController.m 加入

@interface ViewController ()
@property (strong, nonatomic) UIScrollView *scrollView; //和我们交互的scrollView
@property (strong,nonatomic) UIView *v; //蓝色方块 view
@property (strong,nonatomic) IFTTTAnimator *animator; //创建 Animator 来管理页面中的所有动画
@end

在 ViewDidLoad 中初始化

- (void)viewDidLoad {
    [super viewDidLoad];

    self.animator=[[IFTTTAnimator alloc]init];

    //初始化 scrollView
    self.scrollView=[[UIScrollView alloc]initWithFrame:self.view.bounds];
    self.scrollView.pagingEnabled=YES;
    self.scrollView.backgroundColor=[UIColor whiteColor];
   self.scrollView.contentSize=CGSizeMake(self.view.boundWidth*PageCount,0);
    self.scrollView.delegate=self;
    [self.view addSubview:self.scrollView];

    //创建蓝色方块 View
    self.v=[[UIView alloc]initWithFrame:CGRectMake(100,200, ViewSize, ViewSize)];
    self.v.backgroundColor=[UIColor blueColor];
    [self.scrollView addSubview:self.v];

    [self setupAnimation];
}

上面都是我们熟悉的初始化操作,接下来该实现动画了

-(void)setupAnimation{
    //创建一个透明度动画
    IFTTTAlphaAnimation *alpha=[IFTTTAlphaAnimation animationWithView:self.v];
    //将所有动画添加到 animator 中
    [self.animator addAnimation:alpha];

    //添加2个帧,在 scrollView 从 0 滚动到 200 时, 淡出我们的 View
    [alpha addKeyframeForTime:0 alpha:1.0];
    [alpha addKeyframeForTime:200 alpha:0.0];

    //创建平移动画
    IFTTTTranslationAnimation *tran=[IFTTTTranslationAnimation animationWithView:self.v];
    [self.animator addAnimation:tran];

    //添加2个帧,在 scrollView 从 0 滚动到 200 时, view 沿X轴平移150,沿Y便宜60.
    [tran addKeyframeForTime:0 translation:CGPointMake(0, 0)];
    [tran addKeyframeForTime:200 translation:CGPointMake(150, 60)];
}

我们创建完动画,并将它添加到 Animator 中,现在我们要把 scrollView 和 Animator 关联起来,当 scrollView 滚动时,产生相应的动画
在 scrollView的代理方法中

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

这样在我们滑动 scrollView 时, 根据滑动距离,scrollView.contentOffset.x 从0变化到200,我们的蓝色方块View 产生淡出, 偏移的动画.

---

Done

所有代码你可以在 Github 中找到

在 下一篇 中我们自己实现简聊 App的Guide 动画