JazzHands 基本使用

作者: 王大屁帅2333 | 来源:发表于2016-03-05 01:27 被阅读1750次

    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 <IFTTTJazzHands.h>
    

    在 ViewController.m 加入

    @interface ViewController ()<UIScrollViewDelegate>
    @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 动画

    相关文章

      网友评论

        本文标题: JazzHands 基本使用

        本文链接:https://www.haomeiwen.com/subject/dugokttx.html