Imitation micro blog spring animation

I am always playing micro-blog, and recently I am studying animation. I took time to write a micro-blog animation on weekends

Implementation steps

  • First mold out a controller
  • This controller is used to display multiple buttons. (The buttons are graphic, so we need to customize the layout of the buttons)
  • Animation idea: First, add several uibuttons to the interface, and then add translation animation in y direction to each button -> set a timer, take out the button one by one during each execution, add a spring animation (**usingSpringWithDamping **) to restore the deformation animation to its original position
  • Add two kinds of events to the button (press event and lift event after click)

The key code

/ / let all button moves to the bottom at the beginning of BTN. Transform = CGAffineTransformMakeTranslation (0, the self. The view. The bounds. Size. The height); / / add the self timer. The timer = [NSTimer scheduledTimerWithTimeInterval: 0.1 target: self selector: @ the selector (update) the userInfo: nil repeats:YES]; - (void)update{if (self.btnIndex == self.btnArray.count) {
[self.timer invalidate];
return; } VerticalStyleButton *button = self.btnArray[self.btnIndex]; / / spring animation [UIView animateWithDuration: delay 0.3:0.2 usingSpringWithDamping: 0.8 initialSpringVelocity: 0 options:UIViewAnimationOptionCurveLinear animations:^{ button.transform = CGAffineTransformIdentity;  } completion:^(BOOL finished) { }]; self.btnIndex++; } - (void)btnClick:(UIButton *)button{[UIView animateWithDuration:0.25 animations:^{button.transform = CGAffineTransformMakeScale (1.2, 1.2);}]; } - (void)btnClick1:(UIButton *)button{[UIView animateWithDuration:0.25 animations:^{button.alpha = 0;  button.transform = CGAffineTransformMakeScale(2, 2); }]; }Copy the code

rendering

The source address