我們來實現(xiàn)這個簡聊 App 介紹界面

talkIntro.gif

其中小圓點的變化動畫非常舒服, 類似 Keynote 中的 Magic Move 神奇移動效果

實現(xiàn)小圓點 Magic Move

原理淺析:

每個頁面都有一個小圓點

1. 首先在每頁的合適位置固定圓點
2. 讓第一頁的圓點移動到第二頁圓點的位置上
3. 讓第二頁的圓點從第一頁圓點的初始位置移動到第二頁圓點應(yīng)該在的固定位置上.這給人錯覺好像是第一頁的圓點移動到了第二頁,實際上是兩個圓點疊加在一起移動的.
4. 同時淡出第一個圓點,淡入第二個圓點
5. 這樣實現(xiàn)了第一個圓點 Magic Move 到第二頁,并淡入淡出過渡的效果

接下來我們一步一步實現(xiàn)這個效果.

開始

創(chuàng)建一個空工程或者空 VieController 繼承自 UIViewCOntroller
引入頭

#import <IFTTTJazzHands.h>

在. M 文件中添加

@interface TalkIntroDemo ()<UIScrollViewDelegate>
@property (strong,nonatomic) UIScrollView *scrollView;
@property (strong,nonatomic) IFTTTAnimator *animator;
@property (strong,nonatomic) UIImageView *point1;
@property (strong,nonatomic) UIImageView *point2;
@property (strong,nonatomic) UIImageView *point3;
@end

scrollView 和 Animator 分別是交互的 View 和動畫管理者
point 代表前3個頁面的小圓點...

設(shè)置好 scrollView 的代理

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

在 ViewDidLoad 中

- (void)viewDidLoad {
    [super viewDidLoad];
    [self setupView];  //設(shè)置 View 的位置
    [self setupAnimation]; //添加動畫
}

布局 View

首先將3個圓點初始化,并設(shè)置他們的位置

-(void)setupView{
    self.scrollView=[[UIScrollView alloc]initWithFrame:self.view.bounds];
    self.scrollView.delegate=self;
    self.scrollView.backgroundColor=[UIColor whiteColor];
    self.scrollView.pagingEnabled=YES;
    self.scrollView.contentSize=CGSizeMake(self.view.boundWidth*NUMBER_OF_PAGES,0); //高度為0,不會上下滾動
    self.animator=[IFTTTAnimator new];
    //
    self.point1=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"RedPoint"]];
    self.point2=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"pdfIcon"]];
    self.point3=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"CategoryIcon"]];
    //
    self.point1.center=CGPointMake(PageWidth*0.5+80, PageHeight*0.5+80); //第一個點,放在第一頁中間偏右下的位置
    self.point2.center=CGPointMake(PageWidth*1.5-80, PageHeight*0.5+80); //第二個點,放在第二頁中間偏左的位置
    self.point3.center=CGPointMake(PageWidth*2.5, PageHeight*0.5-80); //第三個點,放在第三頁偏上位置.
    //
    [self.view addSubview:self.scrollView];
    [self.scrollView addSubview:self.point1];
    [self.scrollView addSubview:self.point2];
    [self.scrollView addSubview:self.point3];
}

我定義了4個宏,來方便 Code

#define NUMBER_OF_PAGES 3

#define PageWidth self.view.boundWidth //每一頁的寬度 

#define PageHeight self.view.boundHeight

#define timeForPage(page) (NSInteger)(PageWidth * (page - 1)) //馬上下面會說到

運(yùn)行一下,效果如下

talkIntro_Start.gif

添加動畫

3個圓點的位置已經(jīng)確定好了,接下來實現(xiàn)動畫,先添加 Point1的動畫

-(void)setupAnimation{
    //Point1
    IFTTTFrameAnimation *point1Frame=[IFTTTFrameAnimation animationWithView:self.point1];
    [self.animator addAnimation:point1Frame];

    //添加2個幀動畫,在 scrollView 從第一頁滾動到第二頁時,圓點1的位置從它的起始位置移動到圓點2的位置.
    [point1Frame addKeyframeForTime:timeForPage(1) frame:self.point1.frame];
    [point1Frame addKeyframeForTime:timeForPage(2) frame:self.point2.frame];

    //timeForPage 方便我們轉(zhuǎn)換,頁數(shù) - 時間
}

我們做的就是添加2個關(guān)鍵幀

• 圓點1,在第一頁時處于它原來的位置
• 圓點1,在第二頁時處于圓點2的位置
• 當(dāng) scrollView 從第一頁滑動到第二頁時, JazzHands 會幫我們平滑的在這2個關(guān)鍵幀中過渡,實現(xiàn)平移效果

運(yùn)行一下,效果如圖

talkIntro_Step1.gif

好像有點 Magic Move的感覺了
在 setupAnimation 方法中,在 Point1動畫的下面,繼續(xù)添加圓點2的動畫

    //Point2 位移
    IFTTTFrameAnimation *point2Frame=[IFTTTFrameAnimation animationWithView:self.point2];
    [self.animator addAnimation:point2Frame];

    //讓scrollView 從第一頁滾動到第二頁時
    //圓點2從圓點一個位置,移動到圓點原來的位置,這樣2個圓點疊加起來移動,看起來好像是一個圓點漸變成了另一個圓點了,
    [point2Frame addKeyframeForTime:timeForPage(1) frame:self.point1.frame];
    [point2Frame addKeyframeForTime:timeForPage(2) frame:self.point2.frame];

運(yùn)行一下,效果如圖

talkIntro_Step2.gif

看起來只是一個圓點在移動縮放..沒有 Magic 感

因為我們還沒加入淡入淡出的動畫
接著剛才的Point2動畫,添加如下

    //Point1 透明度
    IFTTTAlphaAnimation *point1Alpha=[IFTTTAlphaAnimation animationWithView:self.point1];
    [self.animator addAnimation:point1Alpha];

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

    //Point2 透明度
    IFTTTAlphaAnimation *point2Alpha=[IFTTTAlphaAnimation animationWithView:self.point2];
    [self.animator addAnimation:point2Alpha];

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

在scrollView 從第一頁滾動到第二頁的過程中,我們讓圓點1的透明度減小到0(淡出),讓圓點2淡入.

運(yùn)行一下,效果如圖

talkIntro_Step3.gif

我們可以看到,圓點 Magic Move 起來了.. Cool 接下來實現(xiàn)圓點3

繼續(xù)添加如下

    //Point3 平移
    IFTTTFrameAnimation *point3Frame=[IFTTTFrameAnimation animationWithView:self.point3];
    [self.animator addAnimation:point3Frame];

    [point3Frame addKeyframeForTime:timeForPage(2) frame:self.point2.frame];
    [point3Frame addKeyframeForTime:timeForPage(3) frame:self.point3.frame];

    //Point3 透明度
    IFTTTAlphaAnimation *point3Alpha=[IFTTTAlphaAnimation animationWithView:self.point3];
    [self.animator addAnimation:point3Alpha];

    [point3Alpha addKeyframeForTime:timeForPage(2) alpha:0.0];
    [point3Alpha addKeyframeForTime:timeForPage(3) alpha:1.0];

很熟悉了..讓圓點3從圓點2的位置移動到自身原來的位置,并淡入

再運(yùn)行一下,效果如圖

talkIntro_Step4.gif

額..圓點2怎么和圓點3分開了..
我們還需添加一個幀,讓圓點2平移并且淡出到圓點3的位置上

在添加圓點3動畫的代碼上面,加上

    //讓圓點2跟隨圓點3運(yùn)動并淡出
    [point2Frame addKeyframeForTime:timeForPage(3) frame:self.point3.frame];

    [point2Alpha addKeyframeForTime:timeForPage(3) alpha:0.0];

再再運(yùn)行一下,效果如圖

talkIntro_Complete.gif

Done

Magic Move 的效果完成了,一步一步的分析實現(xiàn),也并不難.
Magic Move 同樣也可以在 ViewController 的切換時實現(xiàn),如果你感興趣請搜索 ViewController 自定義轉(zhuǎn)場
或者參考 這篇博文

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

下一篇 會實現(xiàn)完整的簡聊 App 介紹界面