動畫-仿微博彈簧動畫

#仿微博彈簧動畫

老玩微博，最近在研究動畫，週末抽空寫了個發微博的動畫

實現步驟

• 首先模打出一個控制器
• 這個控制器用來顯示多個按鈕。（按鈕是圖文上下排列的，因此咱們須要自定義按鈕的佈局樣式）
• 動畫思路：先在界面添加好幾個 UIButton，以後給每一個 button 添加y方向的平移動畫 -> 設置一個定時器，每次執行的時候依次取出按鈕，將按鈕添加一個彈簧動畫（**usingSpringWithDamping **）將形變更畫恢復原位
• 給按鈕添加2種事件（按下的事件、點擊後擡起的事件）

關鍵代碼

//開始時讓全部按鈕都移動到最底部
btn.transform = CGAffineTransformMakeTranslation(0, self.view.bounds.size.height);
//添加定時器
self.timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(update) userInfo:nil repeats:YES];



- (void)update{
    if (self.btnIndex == self.btnArray.count) {
        [self.timer invalidate];
        return ;
    }
    
    VerticalStyleButton *button = self.btnArray[self.btnIndex];
    //彈簧動畫
    [UIView animateWithDuration:0.3 delay:0.2 usingSpringWithDamping:0.8 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
        button.transform = CGAffineTransformIdentity;
    } completion:^(BOOL finished) {
       
    }];
     self.btnIndex++;
}


[UIView animateWithDuration:0.25 animations:^{
        button.transform = CGAffineTransformMakeScale(1.2, 1.2);
}];

[UIView animateWithDuration:0.25 animations:^{
        button.alpha = 0;
        button.transform = CGAffineTransformMakeScale(2, 2);
}];

效果圖

源碼地址