在上一篇中你已經基本掌握了 JazzHands 的用法
我們來繼續(xù)實現(xiàn)完整的 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);
不要在意上面的數(shù)字,他們只是將元素放在類似 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 的過渡實現(xiàn)完成..
繼續(xù)實現(xiàn)其它元素的動畫,
看起來其它的平移動畫都是小菜一碟了..
第一頁的藍色聊天語音消息延 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
完成
我們已經實現(xiàn)了 TalkIntro Guide 動畫 的第一二個頁,剩下的你完全有能力自己實現(xiàn)..
IFTTTAnimatedScrollViewController
JazzHands 還為我們提供了一個方便使用的類.
IFTTTAnimatedScrollViewController,它只是幫我做了初始化 scrollView 和 Animator 的操作,
我們以后可以直接繼承 IFTTTAnimatedScrollViewController,直接向 self.scrollView 中添加View, 并添加動畫即可.
具體可以看 Demo 工程中的 IFTTTAnimatedScrollViewDemo 代碼
