iOS 动画-仿微博弹簧动画

热门标签

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

#仿微博弹簧动画

老玩微博,最近在研究动画,周末抽空写了个发微博的动画

实现步骤

  • 首先模打出一个控制器
  • 这个控制器用来显示多个按钮。(按钮是图文上下排列的,所以我们需要自定义按钮的布局样式)
  • 动画思路:先在界面添加好几个 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);
}];

效果图

iOS 动画-仿微博弹簧动画

源码地址

标签:

未经允许不得转载:作者:SheaYang, 转载或复制请以 超链接形式 并注明出处 技术狗|博客
原文地址:《iOS 动画-仿微博弹簧动画》 发布于2019-10-05

分享到:
赞(0)

评论 抢沙发

7 + 7 =


iOS 动画-仿微博弹簧动画

长按图片转发给朋友

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录