JazzHands TalkIntro 完整实现

上一篇 中我们已经基本掌握了 JazzHands 的用法
我们来继续实现完整的 TalkIntro Guide 动画
学习其他类型动画的用法

开始

打开或者复制上一篇制作的 Demo 工程, 将类扩展中的代码修改

我们又为 Page1和 Page2添加了几个 View,并设置好位置.

//Page1
@property (strong,nonatomic) UIImageView *voiceGroup;
@property (strong,nonatomic) UIImageView *myVoice;
@property (strong,nonatomic) UIImageView *title1CN;

//Page2
@property (strong,nonatomic) UIImageView *searchField;
@property (strong,nonatomic) UIImageView *searchResult;
@property (strong,nonatomic) UIImageView *title2CN;



self.voiceGroup.center=CGPointMake(PageWidth*0.5, PageHeight*0.5);
self.myVoice.center=CGPointMake(PageWidth*0.5+90, PageHeight*0.5+120);
self.title1CN.center=CGPointMake(PageWidth*0.5, 0);
//
self.searchField.center=CGPointMake(PageWidth*1.5, PageHeight*0.5-90);
self.searchResult.center=CGPointMake(PageWidth*1.5, PageHeight*0.5+40);
self.title2CN.center=CGPointMake(PageWidth*1.5, 0);

不要在意上面的数字,他们只是将元素放在类似 TalkIntro Guide 动画 Gif 图中位置.

运行一下,效果如图

不加动画,果然好搓..

先添加最上面的 Title 切换的动画吧,
先来分析一下

  • 每一页的 title 都是一个 ImageView
  • 在动画中2个 title 分别,淡入淡出.
  • 位置一直保持在第一页和第二页的顶部

(⊙o⊙)…没错..还是 Magic Move

添加 title 1 的移动和淡出动画

    //TitleView1
    IFTTTFrameAnimation *title1Frame=[IFTTTFrameAnimation animationWithView:self.title1CN];
    [self.animator addAnimation:title1Frame];

    [title1Frame addKeyframeForTime:timeForPage(1) frame:self.title1CN.frame];
    [title1Frame addKeyframeForTime:timeForPage(2) frame:self.title2CN.frame];

    IFTTTAlphaAnimation *title1Alpha=[IFTTTAlphaAnimation animationWithView:self.title1CN];
    [self.animator addAnimation:title1Alpha];

    [title1Alpha addKeyframeForTime:timeForPage(1) alpha:1.0];
    [title1Alpha addKeyframeForTime:timeForPage(2) alpha:0.0];

再添加 title 2的移动和淡入动画,

    //TitleView2
    IFTTTFrameAnimation *title2Frame=[IFTTTFrameAnimation animationWithView:self.title2CN];
    [self.animator addAnimation:title2Frame];

    [title2Frame addKeyframeForTime:timeForPage(1) frame:self.title1CN.frame];
    [title2Frame addKeyframeForTime:timeForPage(2) frame:self.title2CN.frame];

    IFTTTAlphaAnimation *title2Alpha=[IFTTTAlphaAnimation animationWithView:self.title2CN];
    [self.animator addAnimation:title2Alpha];

    [title2Alpha addKeyframeForTime:timeForPage(1) alpha:0.0];
    [title2Alpha addKeyframeForTime:timeForPage(2) alpha:1.0];

运行一下,效果如图

Ok..title 的过渡实现完成..

继续实现其它元素的动画, 看起来其它的平移动画都是小菜一碟了..

第一页的蓝色聊天语音消息延 X 轴,向右平移

//myVoice 
    IFTTTTranslationAnimation *myVoiceTran=[IFTTTTranslationAnimation animationWithView:self.myVoice];
    [self.animator addAnimation:myVoiceTran];

    [myVoiceTran addKeyframeForTime:timeForPage(1) translation:CGPointZero];
    [myVoiceTran addKeyframeForTime:timeForPage(2) translation:CGPointMake(PageWidth*2, 0)];

让第二页的搜索框和搜索结果列表平移,淡入

//searchField
    IFTTTAlphaAnimation *searchFieldAlpha=[IFTTTAlphaAnimation animationWithView:self.searchField];
    [self.animator addAnimation:searchFieldAlpha];

    [searchFieldAlpha addKeyframeForTime:timeForPage(1) alpha:0.0 ];
    [searchFieldAlpha addKeyframeForTime:timeForPage(2) alpha:1.0 withEasingFunction:IFTTTEasingFunctionEaseInOutCubic];

    //searchResult
    IFTTTTranslationAnimation *searchResultTran=[IFTTTTranslationAnimation animationWithView:self.searchResult];
    [self.animator addAnimation:searchResultTran];

    [searchResultTran addKeyframeForTime:timeForPage(1) translation:CGPointMake(200, 200)];
    [searchResultTran addKeyframeForTime:timeForPage(2) translation:CGPointZero];

上面的代码你都很熟悉了,除了 withEasingFunction:IFTTTEasingFunctionEaseInOutCubic

它和我们的 UIView动画中的 UIViewAnimationOptions 一样

typedef NS_OPTIONS(NSUInteger, UIViewAnimationOptions) {
	...
	
    UIViewAnimationOptionCurveEaseInOut            = 0 << 16, // default
    UIViewAnimationOptionCurveEaseIn               = 1 << 16,
    UIViewAnimationOptionCurveEaseOut              = 2 << 16,
    UIViewAnimationOptionCurveLinear               = 3 << 16,
    ...
   }

我们可以设置 easing function 来产生动画先快后慢,等效果,让我们的动画看起来更舒适

还有其他常量

typedef CGFloat (^IFTTTEasingFunction) (CGFloat t);

UIKIT_EXTERN IFTTTEasingFunction const IFTTTEasingFunctionLinear;

UIKIT_EXTERN IFTTTEasingFunction const IFTTTEasingFunctionEaseInQuad;  
UIKIT_EXTERN IFTTTEasingFunction const IFTTTEasingFunctionEaseOutQuad;  
UIKIT_EXTERN IFTTTEasingFunction const IFTTTEasingFunctionEaseInOutQuad;  

UIKIT_EXTERN IFTTTEasingFunction const IFTTTEasingFunctionEaseInCubic;  
UIKIT_EXTERN IFTTTEasingFunction const IFTTTEasingFunctionEaseOutCubic;  
UIKIT_EXTERN IFTTTEasingFunction const IFTTTEasingFunctionEaseInOutCubic;  

UIKIT_EXTERN IFTTTEasingFunction const IFTTTEasingFunctionEaseInBounce;  
UIKIT_EXTERN IFTTTEasingFunction const IFTTTEasingFunctionEaseOutBounce;  

先运行一下..看看我们的成果..

完成

我们已经实现了 TalkIntro Guide 动画 的第一二个页,剩下的你完全有能力自己实现..

我们的动画都是基于 Frame 布局的,适配可能会有写麻烦, 下一篇 我们会介绍如何结合 AutoLayout 和 JazzHands

IFTTTAnimatedScrollViewController

JazzHands 还为我们提供了一个方便使用的类.

IFTTTAnimatedScrollViewController,它只是帮我做了初始化 scrollView 和 Animator 的操作,
我们以后可以直接继承 IFTTTAnimatedScrollViewController,直接向 self.scrollView 中添加View, 并添加动画即可.
具体可以看 Demo 工程中的 IFTTTAnimatedScrollViewDemo 代码

本文的所有代码和 IFTTTAnimatedScrollViewController使用实例都可在 Github 中找到