亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

iOS實(shí)現(xiàn)萌貨貓頭鷹登錄界面動(dòng)畫(huà)

 更新時(shí)間：2016年08月02日 09:31:25   作者：Dariel在杭州  
本文介紹的動(dòng)畫(huà)效果仿自國(guó)外網(wǎng)站readme.io的登錄界面,超萌可愛(ài)的貓頭鷹,感興趣的朋友們可以參考學(xué)習(xí)。

效果如下圖.

動(dòng)畫(huà)實(shí)現(xiàn)核心:

動(dòng)畫(huà)核心的是用到了iOS中UIView的transform屬性,然后根據(jù)尺寸坐標(biāo)對(duì)四張圖片進(jìn)行平移以及縮放.
具體的圖層結(jié)構(gòu)如圖所示:

注意點(diǎn):

    1.圖中只露出兩個(gè)點(diǎn)的手臂,是不需要裁剪的,有部分是能遮擋粉色view的.所以可以將它們與頭部圖片放在一個(gè)view中.

    2.而動(dòng)畫(huà)中的手臂只露出粉色文本框以上的部分的方法,是將兩個(gè)手臂圖片添加到一個(gè)另外一個(gè)View中,然后設(shè)置這個(gè)View的屬性為超過(guò)UIView的部分自動(dòng)裁剪.

核心代碼:

 //相對(duì)于初始位置的平移
 self.greenView.transform = CGAffineTransformMakeTranslation(100, 0);
 //相對(duì)于上次位置的平移
 self.greenView.transform = CGAffineTransformTranslate(self.greenView.transform, 100, 0);
 //相對(duì)于初始尺寸的縮放,2是倍數(shù)
 self.greenView.transform = CGAffineTransformMakeScale(2, 2);
 //相對(duì)于上次的尺寸縮放0.5倍
 self.greenView.transform = CGAffineTransformScale(self.greenView.transform, 0.5, 0.5);

步驟1:

主要視圖在storyBorad中創(chuàng)建

1.將兩個(gè)小點(diǎn)手臂圖片和頭部圖片放到一個(gè)view中.

 

2.將那兩個(gè)長(zhǎng)的手臂放到一個(gè)view中,然后將這個(gè)view堆疊到1中的view上,位置要對(duì)應(yīng),手正好能蒙住眼睛,這個(gè)view的屬性要設(shè)置為超出部分自動(dòng)裁剪.view的顏色為透明.


3.最后的視圖效果是這樣的.

步驟2:

考慮到代碼的封裝性,我們可以這整個(gè)View關(guān)聯(lián)到一個(gè)UIView的類中.

1.對(duì)圖中的4張圖片拖線到剛剛新建的類中,建立4個(gè)UIImageView屬性.對(duì)一整個(gè)view進(jìn)行拖線

//Arm是長(zhǎng)長(zhǎng)的手臂
@property (weak, nonatomic) IBOutlet UIImageView *leftArm;
@property (weak, nonatomic) IBOutlet UIImageView *rightArm;
//Hand是那兩個(gè)小圓點(diǎn)
@property (weak, nonatomic) IBOutlet UIImageView *leftHand;
@property (weak, nonatomic) IBOutlet UIImageView *rightHand;
//包含5張圖片的整個(gè)view
@property (weak, nonatomic) IBOutlet UIView *viewFrame;

2.在awakeFromNib方法中對(duì)控件進(jìn)行初始化

獲得手臂圖片相對(duì)于一整個(gè)view的位置,以及整個(gè)view的寬高

  //當(dāng)前左手的位置
  CGFloat leftArmX = self.leftArm.frame.origin.x;
  CGFloat leftArmY = self.leftArm.frame.origin.y;
  //當(dāng)前右手的位置
  CGFloat rightArmX = self.rightArm.frame.origin.x;
  CGFloat rightArmY = self.rightArm.frame.origin.y;
  //viewFrame的寬高
  CGFloat viewFrameH = self.viewFrame.frame.size.height;
  CGFloat viewFrameW = self.viewFrame.frame.size.width;

根據(jù)以上數(shù)據(jù)計(jì)算得出,在初始狀態(tài)手臂的位置(注意:設(shè)置圖片時(shí)手臂是蒙住眼睛的,初始狀態(tài)手臂是看不到的,只有兩個(gè)小點(diǎn)(hand))

  //為了便于以后的計(jì)算,將左右手的初始位置設(shè)置為屬性
  //15為根據(jù)圖片顯示的位置作適當(dāng)調(diào)整的尺寸
  self.leftArmX = -leftArmX - 15;
  self.leftArmY = viewFrameH - leftArmY;
  self.rightArmX = viewFrameW - rightArmX - self.rightArm.frame.size.width +15;
  self.rightArmY = viewFrameH - rightArmY;
  //根據(jù)計(jì)算出的左右手的初始位置,設(shè)置初始位置左右手的偏移量
  self.rightArm.transform = CGAffineTransformMakeTranslation(self.rightArmX, self.rightArmY);
  self.leftArm.transform = CGAffineTransformMakeTranslation(self.leftArmX, self.leftArmY);

添加四個(gè)屬性

@property (nonatomic,assign)CGFloat leftArmX;
@property (nonatomic,assign)CGFloat leftArmY;
@property (nonatomic,assign)CGFloat rightArmX;
@property (nonatomic,assign)CGFloat rightArmY;

3.貓頭鷹的狀態(tài)有兩種,蒙住眼以及不蒙眼的

//方便調(diào)用,樣式:[self.loginAnim startAnim:YES];
- (void)startAnim:(BOOL)isCoverd
{
  if (isCoverd) {
    //動(dòng)畫(huà)持續(xù)時(shí)間0.25秒
    [UIView animateWithDuration:0.25 animations:^{
      // 蒙眼 
    }];
  }else
  {
    [UIView animateWithDuration:0.25 animations:^{
      //不蒙眼,也就是初始狀態(tài)
    }];
  }
}

1.蒙眼狀態(tài)

      //手臂偏移到蒙住眼睛的位置
      self.rightArm.transform = CGAffineTransformTranslate(self.rightArm.transform, -self.rightArmX, -self.rightArmY);
      self.leftArm.transform = CGAffineTransformTranslate(self.leftArm.transform, -self.leftArmX, -self.leftArmY);
      //小圓點(diǎn)移動(dòng)到眼睛的位置,30為根據(jù)圖片顯示位置手動(dòng)調(diào)整的尺寸
      CGAffineTransform rightHand = CGAffineTransformTranslate(self.rightArm.transform, -self.rightArmX, -self.rightArmY+30);
      CGAffineTransform leftHand = CGAffineTransformTranslate(self.leftArm.transform, -self.leftArmX, -self.leftArmY+30);
      //小圓點(diǎn)在移動(dòng)的過(guò)程中逐漸減小
      self.rightHand.transform = CGAffineTransformScale(rightHand, 0.01, 0.01);
      self.leftHand.transform = CGAffineTransformScale(leftHand, 0.01, 0.01);

2.不蒙眼

      //兩個(gè)手臂回到初始化狀態(tài)
      self.rightArm.transform = CGAffineTransformMakeTranslation(self.rightArmX, self.rightArmY);
      self.leftArm.transform = CGAffineTransformMakeTranslation(self.leftArmX, self.leftArmY);
      //兩個(gè)小圓點(diǎn)回到默認(rèn)設(shè)置
      self.rightHand.transform = CGAffineTransformIdentity;
      self.leftHand.transform = CGAffineTransformIdentity;

至此本文介紹的萌版貓頭鷹登錄動(dòng)畫(huà)就完成了，是不是很有趣呢？感興趣的小伙伴們快快動(dòng)手實(shí)現(xiàn)起來(lái)吧。

相關(guān)文章

最新評(píng)論