實現閑魚首頁添加按鈕的動畫效果，首頁動畫

實現閑魚首頁添加按鈕的動畫效果，首頁動畫

先看下： 點擊第一張圖中的添加按鈕後，在上方先後彈出兩個按鈕並附帶類似彈簧的效果（時間差較短）

 

具體實現比較簡單，主要就是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、，視覺效果一般般，但是效果實現了，我自己寫的時候是彈出三個控制項