iOS彈簧動(dòng)畫與視圖過渡動(dòng)畫

這兩種動(dòng)畫實(shí)現(xiàn)起來都很簡單,蘋果已經(jīng)為我們封裝好了,并且提供了多種好看實(shí)用的效果

彈簧動(dòng)畫

彈簧動(dòng)畫
- (void)viewDidLoad {
    [super viewDidLoad];

    // 創(chuàng)建一個(gè)氣泡
    UIButton * bubble = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    [self.view addSubview:bubble];
    bubble.layer.cornerRadius = 50;
    bubble.backgroundColor = [UIColor cyanColor];

    [bubble addTarget:self action:@selector(bubbleAction:) forControlEvents:UIControlEventTouchUpInside];
}

- (void)bubbleAction:(UIButton *)button {
    // 先縮小
    button.transform = CGAffineTransformMakeScale(0.7, 0.7);
    
    // 彈簧動(dòng)畫,參數(shù)分別為:時(shí)長襟衰,延時(shí),彈性(越小彈性越大)禁荸,初始速度
    [UIView animateWithDuration: 0.7 delay:0 usingSpringWithDamping:0.3 initialSpringVelocity:0.3 options:0 animations:^{
        // 放大
        button.transform = CGAffineTransformMakeScale(1, 1);
    } completion:nil];
}

完事

視圖過渡動(dòng)畫

視圖過渡動(dòng)畫有兩種右蒲,一種是單個(gè)視圖的過渡動(dòng)畫,另一種是兩個(gè)UIView之間的過渡

過渡類型:

  • UIViewAnimationOptionTransitionFlipFromTop由上向下翻轉(zhuǎn)動(dòng)畫
  • UIViewAnimationOptionTransitionFlipFromBottom由下向上翻轉(zhuǎn)動(dòng)畫
  • UIViewAnimationOptionTransitionCrossDissolve漸現(xiàn)動(dòng)畫
  • UIViewAnimationOptionTransitionCurlDown由上到下翻頁動(dòng)畫
  • UIViewAnimationOptionTransitionCurlUp由下到上翻頁動(dòng)畫
  • UIViewAnimationOptionTransitionFlipFromRight由左向右翻轉(zhuǎn)
  • UIViewAnimationOptionTransitionFlipFromLeft由右向左翻轉(zhuǎn)

速度

  • UIViewAnimationOptionCurveEaseInOut 緩入緩出赶熟,開始和結(jié)束時(shí)減速
  • UIViewAnimationOptionCurveEaseIn 緩入瑰妄,開始時(shí)候減速
  • UIViewAnimationOptionCurveEaseOut 緩出,結(jié)束時(shí)減速
  • UIViewAnimationOptionCurveLinear 線性映砖,勻速運(yùn)動(dòng)

過渡視圖和速度在動(dòng)畫的options參數(shù)中使用间坐。但是不要使用多種過渡類型,真是要難看死了我的天哪邑退。

options: UIViewAnimationOptionTransitionCrossDissolve | UIViewAnimationOptionCurveEaseInOut

Swift寫法(感謝熊格智障的評(píng)論):

options: [.TransitionCrossDissolve,.CurveEaseInOut]

1. 單個(gè)視圖的過渡

單個(gè)視圖的動(dòng)畫
- (void)viewDidLoad {
    [super viewDidLoad];

    // 創(chuàng)建一個(gè)按鈕
    UIButton * button = [[UIButton alloc] initWithFrame:CGRectMake(50, 100, 200, 100)];
    [self.view addSubview:button];
    button.backgroundColor = [UIColor orangeColor];
    button.layer.cornerRadius = 3;
    
    [button setTitle:@"??" forState:UIControlStateNormal];
    [button addTarget:self action:@selector(buttonAction:) forControlEvents:UIControlEventTouchUpInside];
}

- (void)buttonAction:(UIButton *)button {
    // transition動(dòng)畫:指定一個(gè)view竹宋,單獨(dú)為它設(shè)置transition的動(dòng)畫
    // option設(shè)置動(dòng)畫類型,這里使用翻頁動(dòng)畫以及淡出淡入
    [UIView transitionWithView:button duration:0.7 options:UIViewAnimationOptionTransitionCurlDown | UIViewAnimationOptionCurveEaseOut animations:^{
        [button setTitle:@"??" forState:UIControlStateNormal];
    } completion:nil];
}

再來一個(gè)實(shí)用的imageView圖片漸變效果:

圖片漸變
@interface ViewController ()
@property (nonatomic, retain) UIImageView * imageView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 200)];
    [self.view addSubview:_imageView];
    _imageView.image = [UIImage imageNamed:@"1.jpg"];
    
    // 1s后換圖片
    [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(changeImage) userInfo:nil repeats:NO];
}

- (void)changeImage {
    // 使用漸變效果就夠了
    [UIView transitionWithView:_imageView duration:1 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
        _imageView.image = [UIImage imageNamed:@"2.jpg"];
    } completion:nil];
}

2. 兩個(gè)視圖的過渡動(dòng)畫

兩個(gè)視圖的過渡動(dòng)畫

方法:UIViewtransitionFromView: toView: duration: options:方法
官方解釋:toView added to fromView.superview, fromView removed from its superview
實(shí)際效果:動(dòng)畫的作用范圍為fromView的父視圖的frame地技。動(dòng)畫結(jié)束后fromView會(huì)被刪除蜈七,toView會(huì)被添加到fromView的父視圖

@interface ViewController ()
@property (nonatomic, retain) UIView * view1;
@property (nonatomic, retain) UIView * view2;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 創(chuàng)建占用半個(gè)屏幕的view,作為過渡view的父視圖莫矗,測試動(dòng)畫的作用范圍
    UIView * bigView = [[UIView alloc] initWithFrame: CGRectMake(0, 0, self.view.frame.size.width, 300)];
    [self.view addSubview:bigView];
    bigView.backgroundColor = [UIColor orangeColor];

    self.view1 = [[UIView alloc] initWithFrame:CGRectMake(50, 100, 200, 100)];
    [bigView addSubview:_view1];
    _view1.backgroundColor = [UIColor redColor];
    
    self.view2 = [[UIView alloc] initWithFrame:CGRectMake(50, 100, 200, 100)];
    // 不要加到視圖上飒硅!看效果
//    [self.view addSubview:_view2];
    _view2.backgroundColor = [UIColor blackColor];
    
    // 1s后執(zhí)行
    [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(animate) userInfo:nil repeats:NO];
}

- (void)animate {
    [UIView transitionFromView:_view1 toView:_view2 duration:1 options:UIViewAnimationOptionTransitionCurlDown completion:^(BOOL finished) {
    }];
}
@end
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末砂缩,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子三娩,更是在濱河造成了極大的恐慌庵芭,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,290評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件雀监,死亡現(xiàn)場離奇詭異双吆,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)会前,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門好乐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人回官,你說我怎么就攤上這事曹宴。” “怎么了歉提?”我有些...
    開封第一講書人閱讀 156,872評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長区转。 經(jīng)常有香客問我苔巨,道長,這世上最難降的妖魔是什么废离? 我笑而不...
    開封第一講書人閱讀 56,415評(píng)論 1 283
  • 正文 為了忘掉前任侄泽,我火速辦了婚禮,結(jié)果婚禮上蜻韭,老公的妹妹穿的比我還像新娘悼尾。我一直安慰自己,他們只是感情好肖方,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,453評(píng)論 6 385
  • 文/花漫 我一把揭開白布闺魏。 她就那樣靜靜地躺著,像睡著了一般俯画。 火紅的嫁衣襯著肌膚如雪析桥。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,784評(píng)論 1 290
  • 那天艰垂,我揣著相機(jī)與錄音泡仗,去河邊找鬼。 笑死猜憎,一個(gè)胖子當(dāng)著我的面吹牛娩怎,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播胰柑,決...
    沈念sama閱讀 38,927評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼截亦,長吁一口氣:“原來是場噩夢啊……” “哼辣辫!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起魁巩,我...
    開封第一講書人閱讀 37,691評(píng)論 0 266
  • 序言:老撾萬榮一對情侶失蹤急灭,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后谷遂,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體葬馋,經(jīng)...
    沈念sama閱讀 44,137評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,472評(píng)論 2 326
  • 正文 我和宋清朗相戀三年肾扰,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了畴嘶。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,622評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡集晚,死狀恐怖窗悯,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情偷拔,我是刑警寧澤蒋院,帶...
    沈念sama閱讀 34,289評(píng)論 4 329
  • 正文 年R本政府宣布,位于F島的核電站莲绰,受9級(jí)特大地震影響欺旧,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蛤签,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,887評(píng)論 3 312
  • 文/蒙蒙 一辞友、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧震肮,春花似錦称龙、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至躬厌,卻和暖如春马昨,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背扛施。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來泰國打工鸿捧, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人疙渣。 一個(gè)月前我還...
    沈念sama閱讀 46,316評(píng)論 2 360
  • 正文 我出身青樓匙奴,卻偏偏與公主長得像,于是被迫代替她去往敵國和親妄荔。 傳聞我的和親對象是個(gè)殘疾皇子泼菌,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,490評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容