美文网首页iOS独立开发者
动画-仿微博弹簧动画

动画-仿微博弹簧动画

作者: 杭城小刘 | 来源:发表于2018-06-11 09:46 被阅读4次

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

    实现步骤

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

    效果图

    发微博动画效果

    源码地址

    相关文章

      网友评论

        本文标题:动画-仿微博弹簧动画

        本文链接:https://www.haomeiwen.com/subject/kuoblftx.html