1. 程式人生 > >IOS系列——簡單動畫-位移和漸隱和旋轉

IOS系列——簡單動畫-位移和漸隱和旋轉

動畫其實在IOS中用的也是很多的,而且,就算是在普通的程式中,也用的很多,在這裡我也是不斷的學習,目前只搞會了一點點。

之前,我在做一個地產展示的小專案,有很多地方都要用到動畫,於是不停地找 不停的找,在對動畫沒什麼概念之前,一直以為動畫就是用NSTimer不停地定時來實現的,現在才知道,原來原生的還有這樣的一些動畫來供我們使用

       動畫一: 位移

             也是我們用的比較多的。比如我們有時候看到的  點一個按鈕。就從邊上彈出可一個小框框,其實這個就是位移

首先我先做一個點選之後隱藏到邊上去,再點選就顯示出來的效果  不過呢,我們可以用button來新增事件響應,在這裡我不用button了,就直接用手勢來實現

在.m檔案裡面新增一個方法

- (UIGestureRecognizer *)createTapRecognizerWithSelector:(SEL)selector {
    return [[[UITapGestureRecognizer alloc]initWithTarget:self action:selector]autorelease];
}

然後就可以實現具體程式碼

先定義一個檢視 UIView  *myview;

    myview = [[UIView alloc]initWithFrame:CGRectMake(55,40,210,160)];
    myview.backgroundColor = [UIColor colorWithRed:0.580 green:0.706 blue:0.796 alpha:1.000];
    [self.view addSubview:myiew];
給這個view新增手勢以響應點選事件
    [myview addGestureRecognizer:[self createTapRecognizerWithSelector:@selector(yidong)]];
然後就是實現點選事件的處理
- (void)moveMe {
    if (dianji == YES) {
        [UIView animateWithDuration:0.5 animations:^{
            myview.center = CGPointMake(moveMeView.center.x - 140,moveMeView.center.y );
        }];
        dianji = NO;
    }else if(dianji == NO){
        [UIView animateWithDuration:0.5 animations:^{
            myview.center = CGPointMake(moveMeView.center.x + 140,moveMeView.center.y );
        }];
        dianji = YES;
    } }

在這裡也解釋一下這個  0.5  這個引數的含義,他表示在這麼長的時間內(單位是 S ) 來完成這麼多的位移變化
不過這樣來實現有一個弊端,就是如果位移長度比較大 ,那麼就可以明顯看到,這位移的過程中,速度不是均勻變化,而是慢慢加快,然後在慢慢變慢  ,暫時還不知道有沒有什麼屬性可以直接控制這個變化,如果有人知道的話,歡迎留言告訴我。  在這裡我先說一下我地改變方法,我是結合NSTimer來實現的,  把位移變化量減小,時間減小然後用一個一樣時間的NSTimer來實現定時位移 ,就能感覺是勻速移動的

如果不是要點選產生位移,而是載入的時候直接就開始位移,就像是程式裡有些開場動畫那樣的,  可以直接加在viewdidLoad發的方法裡面

動畫二:漸變

 步驟一樣,只是方法有點不同而已,那就只寫出方法程式碼就好了,後面我會把完整地程式碼上傳

- (void)fadeMe {
    [UIView animateWithDuration:1.0 animations:^{
        fadeMeView.alpha = 0.0f;
    }];
}
原始碼下載 http://download.csdn.net/detail/engandend/6289097

在這裡也來說說多張圖組合的動畫效果實現

UIImageView *gifImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 1024  , 768)];
NSArray *gifArray = [NSArray arrayWithObjects:
 [UIImage imageNamed:@"img/首頁動畫/vc500/Frame0"],
 [UIImage imageNamed:@"img/首頁動畫/vc500/Frame8"],
 [UIImage imageNamed:@"img/首頁動畫/vc500/Frame16"],
 [UIImage imageNamed:@"img/首頁動畫/vc500/Frame24"],
 [UIImage imageNamed:@"img/首頁動畫/vc500/Frame32"],
 [UIImage imageNamed:@"img/首頁動畫/vc500/Frame40"],nil];
 gifImageView.animationImages = gifArray; //動畫圖片陣列
 gifImageView.animationDuration = 3; //執行一次完整動畫所需的時長
 gifImageView.animationRepeatCount = 0;  //動畫重複次數 0表示無限迴圈
 [gifImageView startAnimating];
 [viewIndex addSubview:gifImageView];

動畫三:旋轉
-(void)startAnimation2:(UIImageView *)view{
    CGAffineTransform endAngle = CGAffineTransformMakeRotation(angle * (M_PI / 180.0f));
    [UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
        view.transform = endAngle;
    } completion:^(BOOL finished) {
        angle += 1;
        [self startAnimation2:view];
    }];

}

angle是一個double型別  然後直接呼叫這個方法就可以實現旋轉

動畫四:延遲動畫

-(void)animation2{
    [UIView animateWithDuration:1 delay:3 options:UIViewAnimationOptionCurveEaseOut animations:^{
        btn3.alpha = 0;
        btn2.alpha = 1;
    } completion:^(BOOL finished){
        [UIView animateWithDuration:1 delay:3 options:UIViewAnimationOptionCurveEaseOut animations:^{
            btn2.alpha = 0;
            btn1.alpha = 1;
        } completion:^(BOOL finished){
            [UIView animateWithDuration:1 delay:3 options:UIViewAnimationOptionCurveEaseOut animations:^{
                btn1.alpha = 0;
                btn3.alpha = 1;
            } completion:^(BOOL finished){
                [self animation2];
            }];
        }];
    }];
}