你的位置:首页 > 操作系统

[操作系统]实现闲鱼首页添加按钮的动画效果


先看下效果图: 点击第一张图中的添加按钮后,在上方先后弹出两个按钮并附带类似弹簧的效果(时间差较短)

 

具体实现比较简单,主要就是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、效果图,视觉效果一般般,但是效果实现了,我自己写的时候是弹出三个控件