博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
动画-仿微博弹簧动画
阅读量:5874 次
发布时间:2019-06-19

本文共 1246 字,大约阅读时间需要 4 分钟。

hot3.png

#仿微博弹簧动画

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

实现步骤

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

你可能感兴趣的文章
Redis 通用操作2
查看>>
性能优化——统计信息——SQLServer自动更新和自动创建统计信息选项
查看>>
11. Spring Boot JPA 连接数据库
查看>>
洛谷P2925 [USACO08DEC]干草出售Hay For Sale
查看>>
MapReduce工作原理流程简介
查看>>
那些年追过的......写过的技术博客
查看>>
小米手机解锁bootload教程及常见问题
查看>>
Python内置函数property()使用实例
查看>>
Spring MVC NoClassDefFoundError 问题的解决方法。
查看>>
CentOS 6.9配置网卡IP/网关/DNS命令详细介绍及一些常用网络配置命令(转)
查看>>
python基础教程_学习笔记19:标准库:一些最爱——集合、堆和双端队列
查看>>
C# 解决窗体闪烁
查看>>
CSS魔法堂:Transition就这么好玩
查看>>
【OpenStack】network相关知识学习
查看>>
centos 7下独立的python 2.7环境安装
查看>>
[日常] 算法-单链表的创建
查看>>
用ASP.NET Core 2.1 建立规范的 REST API -- 保护API和其它
查看>>
前端工程化系列[01]-Bower包管理工具的使用
查看>>
使用 maven 自动将源码打包并发布
查看>>
ES6 对象的扩展
查看>>