在上一篇中你已经基本掌握了 JazzHands 的用法
我们来继续实现完整的 TalkIntro Guide 动画
学习其他类型动画的用法
talkIntro.gif
开始
打开或者复制上一篇制作的 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 图中位置.
运行一下,效果如图
talkIntroFull_Start.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];
运行一下,效果如图
talkIntroFull_Step1.gif
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;
先运行一下..看看我们的成果..
talkIntroFull_Final.gif
完成
我们已经实现了 TalkIntro Guide 动画 的第一二个页,剩下的你完全有能力自己实现..
IFTTTAnimatedScrollViewController
JazzHands 还为我们提供了一个方便使用的类.
IFTTTAnimatedScrollViewController,它只是帮我做了初始化 scrollView 和 Animator 的操作,
我们以后可以直接继承 IFTTTAnimatedScrollViewController,直接向 self.scrollView 中添加View, 并添加动画即可.
具体可以看 Demo 工程中的 IFTTTAnimatedScrollViewDemo 代码
