欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

iOS實現萌貨貓頭鷹登錄界面動畫

 更新時間：2016年08月02日 09:31:25   作者：Dariel在杭州  
本文介紹的動畫效果仿自國外網站readme.io的登錄界面,超萌可愛的貓頭鷹,感興趣的朋友們可以參考學習。

效果如下圖.

動畫實現核心:

動畫核心的是用到了iOS中UIView的transform屬性,然后根據尺寸坐標對四張圖片進行平移以及縮放.
具體的圖層結構如圖所示:

注意點:

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

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

核心代碼:

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

步驟1:

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

1.將兩個小點手臂圖片和頭部圖片放到一個view中.

 

2.將那兩個長的手臂放到一個view中,然后將這個view堆疊到1中的view上,位置要對應,手正好能蒙住眼睛,這個view的屬性要設置為超出部分自動裁剪.view的顏色為透明.


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

步驟2:

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

1.對圖中的4張圖片拖線到剛剛新建的類中,建立4個UIImageView屬性.對一整個view進行拖線

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

2.在awakeFromNib方法中對控件進行初始化

獲得手臂圖片相對于一整個view的位置,以及整個view的寬高

  //當前左手的位置
  CGFloat leftArmX = self.leftArm.frame.origin.x;
  CGFloat leftArmY = self.leftArm.frame.origin.y;
  //當前右手的位置
  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;

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

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

添加四個屬性

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

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

//方便調用,樣式:[self.loginAnim startAnim:YES];
- (void)startAnim:(BOOL)isCoverd
{
  if (isCoverd) {
    //動畫持續(xù)時間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);
      //小圓點移動到眼睛的位置,30為根據圖片顯示位置手動調整的尺寸
      CGAffineTransform rightHand = CGAffineTransformTranslate(self.rightArm.transform, -self.rightArmX, -self.rightArmY+30);
      CGAffineTransform leftHand = CGAffineTransformTranslate(self.leftArm.transform, -self.leftArmX, -self.leftArmY+30);
      //小圓點在移動的過程中逐漸減小
      self.rightHand.transform = CGAffineTransformScale(rightHand, 0.01, 0.01);
      self.leftHand.transform = CGAffineTransformScale(leftHand, 0.01, 0.01);

2.不蒙眼

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

至此本文介紹的萌版貓頭鷹登錄動畫就完成了，是不是很有趣呢？感興趣的小伙伴們快快動手實現起來吧。

相關文章

  • ios使用AVFoundation讀取二維碼的方法

    ios使用AVFoundation讀取二維碼的方法

    這篇文章主要介紹了ios使用AVFoundation讀取二維碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • 詳解IOS串行隊列與并行隊列進行同步或者異步的實例

    詳解IOS串行隊列與并行隊列進行同步或者異步的實例

    這篇文章主要介紹了詳解IOS串行隊列與并行隊列進行同步或者異步的實例的相關資料,IOS中GCD的隊列分為串行隊列和并行隊列，任務分為同步任務和異步任務，他們的排列組合有四種情況這里就一一分析下，需要的朋友可以參考下
    2017-07-07
  • iOS10適配問題點總結

    iOS10適配問題點總結

    升級到ios10遇到一系列問題，今天小編抽時間吧iOS10適配問題點整理分享給大家，感興趣的朋友可以參考下
    2016-09-09
  • 詳解iOS使用Keychain中的kSecClassGenericPassword存儲數據

    詳解iOS使用Keychain中的kSecClassGenericPassword存儲數據

    iOS設備中的Keychain是一個安全的存儲容器,本篇文章主要介紹了iOS使用Keychain中的kSecClassGenericPassword存儲數據，有興趣的可以了解一下。
    2016-11-11
  • iOS實現高性能簡單易用的星星評分控件

    iOS實現高性能簡單易用的星星評分控件

    在做APP時會用到星星評分的一個視圖，在網上也找到一些相關的代碼，下面這篇文章主要給大家介紹了關于iOS實現高性能簡單易用的星星評分控件的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。
    2018-03-03
  • iOS App開發(fā)中導航欄的創(chuàng)建及基本屬性設置教程

    iOS App開發(fā)中導航欄的創(chuàng)建及基本屬性設置教程

    這篇文章主要介紹了iOS App開發(fā)中導航欄的創(chuàng)建及基本屬性設置教程,即用UINavigationController來編寫navigation,示例代碼為Objective-C語言,需要的朋友可以參考下
    2016-02-02
  • ios端ijkplayer編譯教程

    ios端ijkplayer編譯教程

    下面小編就為大家分享一篇ios端ijkplayer編譯教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-01-01
  • iOS App設計模式開發(fā)中對迭代器模式的使用示例

    iOS App設計模式開發(fā)中對迭代器模式的使用示例

    這篇文章主要介紹了iOS App設計模式開發(fā)中對迭代器模式的使用示例,示例代碼為傳統(tǒng)的Objective-C,需要的朋友可以參考下
    2016-03-03
  • iOS開發(fā)中使用UILabel設置字體的相關技巧小結

    iOS開發(fā)中使用UILabel設置字體的相關技巧小結

    這篇文章主要介紹了iOS開發(fā)中UILabel設置字體的相關技巧小結,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下
    2016-01-01
  • 總結IOS界面間跳轉的幾種方法

    總結IOS界面間跳轉的幾種方法

    前段時間被問到界面間的跳轉有幾種方式？想不到說的竟有點含糊其辭，于是就想總結一下。有句話說的好，“前人種樹，后人乘涼”，目前作為一個乘涼者，我也希望能種一些樹木，為代碼世界營造一份清新。好了，話不多說，進入主題。
    2016-08-08

最新評論