先看下效果图: 点击第一张图中的添加按钮后,在上方先后弹出两个按钮并附带类似弹簧的效果(时间差较短)
images/loading.gif' data-original="http://images2015.cnblogs.com/blog/982488/201606/982488-20160624161007688-673777863.jpg" width="218" height="387" />
具体实现比较简单,主要就是UIView的动画方法调用:
1、在界面初始化时,将弹出的控件及添加按钮都加到父View中(坐标、大小可自行设定),设置要弹出的控件的透明度为0,这样就只会显示添加按钮;
2、之后为添加按钮添加点击方法,方法内容如下:
[UIView animateWithDuration:1.0 // 动画时长(设置弹出按钮到设定位置的时间)
delay:0.0 // 动画延迟 (设置时间以控制弹出按钮先后弹出的顺序)
usingSpringWithDamping:0.3 // 类似弹簧振动效果 0~1 (设定范围从0~1,具体效果大家可以自己试一下)
initialSpringVelocity:0.0 // 初始速度
options:UIViewAnimationOptionCurveEaseInOut // 动画过渡效果
animations:^{
// 这里写要执行的动画
// 在这个案例中,在这设置(1)要弹出的三个控件的目的坐标;(2)将弹出控件的透明度设置为1,否则不显示
} completion:^(BOOL finished) {
// 动画完成后执行
}];
3、控件的弹出过程与取消过程恰好相反,大家可自行尝试(取消可采用背景点击事件:UITapGestureRecognizer)。
主要代码:
// 初始化界面,添加控件(一个添加按钮,两个弹出控价;我添加的是UIImageView,大家可以自己更换)
UIButton *addBtn = [[UIButton alloc]initWithFrame:CGRectMake(100,200,50,50)];
addBtn.layer.cornerRadius = 25; // 设置为圆形,属性值为控件宽度的一半
[addBtn setBackgroundImage:[UIImage imageNamed:@"add"] forState:0];
[addBtn addTarget:self action:@selector(addBtnClick) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:addBtn];
UIImageView *img0 = [[UIImageView alloc]initWithFrame:CGRectMake(100,200,50,50)];
img0.alpha = 0;
img0.layer.cornerRadius = 25;
[img0 setBackgroundColor:[UIColor orangeColor]];
[self.view addSubview:img0];
UIImageView *img1 = [[UIImageView alloc]initWithFrame:CGRectMake(100,200,50,50)];
img1.alpha = 0;
img1.layer.cornerRadius = 25;
[img1 setBackgroundColor:[UIColor orangeColor]];
[self.view addSubview:img1];
// 添加那妞点击事件(省略了第二个弹出控件img1的动画设置)
[UIView animateWithDuration:1.0
delay:0.0
usingSpringWithDamping:0.3
initialSpringVelocity:0.0
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
img0.alpha = 1;
img0.frame = CGRectMake(30,270,50,50);
} completion:^(BOOL finished) {}];
4、效果图,视觉效果一般般,但是效果实现了,我自己写的时候是弹出三个控件
原标题:实现闲鱼首页添加按钮的动画效果
关键词: