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

iOS動(dòng)畫之向右拉的抽屜3D效果

 更新時(shí)間:2016年08月04日 14:31:45   作者:Dariel在杭州  
首先說下,其實(shí)一切的動(dòng)畫都是假象,3D效果也是這樣.本篇我們來做一個(gè)這樣的特效.來跟著小編一起學(xué)習(xí)學(xué)習(xí)。

首先我們忽略掉3D效果,先要做的是一個(gè)右拉的抽屜效果.

總體思路:

     1.創(chuàng)建一個(gè)ContainerViewController容器控制器,然后把左側(cè)選擇菜單的SideMenuViewController,和右側(cè)負(fù)責(zé)顯示內(nèi)容的MainViewController 添加到ContainerViewController中.

     2.給容器控制器ContainerViewController添加一個(gè)手勢(shì)監(jiān)聽,通過修改偏移量完成抽屜效果.

     3.設(shè)置anchorPoint,給左側(cè)SideMenuViewController的view以及左上角的圖片按鈕添加3D效果.

如果想知道詳情請(qǐng)看代碼,我們這邊把核心的部分說下:

給ContainerViewController添加手勢(shì)監(jiān)聽,然后在監(jiān)聽方法中該去怎么處理:

 func handleGesture(recognizer: UIPanGestureRecognizer) {
    let translation = recognizer.translationInView(recognizer.view!.superview!)

    // (isOpening ? 1.0 : -1.0) isOpening為BOOL值,表示打開或者關(guān)閉
    var progress = translation.x / menuWidth * (isOpening ? 1.0 : -1.0)

    // 保證在0~1之間
    progress = min(max(progress, 0), 1.0)

    switch recognizer.state {
    case .Began:

      let isOpen = mainVC.view.frame.origin.x/menuWidth
      isOpening = isOpen == 1.0 ? false:true

      // 為layer的效果添加一個(gè)緩存,作用是避免旋轉(zhuǎn)的時(shí)候產(chǎn)生鋸齒
      sideMenuVC.view.layer.shouldRasterize = true;
      // 設(shè)置渲染的范圍
      sideMenuVC.view.layer.rasterizationScale = UIScreen.mainScreen().scale

    case .Changed:

      // 核心代碼:調(diào)整容器中視圖的位置 3D效果 以及透明度 以及左上角按鈕的翻轉(zhuǎn)效果
      setToPercent(isOpening ? progress: (1.0 - progress))

    case .Ended: fallthrough
    case .Cancelled: fallthrough
    case .Failed:
      // 分頁(yè)效果
      var targetProgress: CGFloat
      if (isOpening) {
        targetProgress = progress < 0.5 ? 0.0 : 1.0
      }else {
        targetProgress = progress < 0.5 ? 1.0 : 0.0
      }

      // 設(shè)置failed狀態(tài)下的sideMenuVC的view的效果
      UIView.animateWithDuration(animationTime, animations: { () -> Void in
        self.setToPercent(targetProgress)
        }, completion: { (_) -> Void in
        // 記得關(guān)閉layer的緩存渲染
        self.sideMenuVC.view.layer.shouldRasterize = false
      })
    default: break
    }
  }

setToPercent方法中的設(shè)置:

  func setToPercent(percent: CGFloat) {

    // 調(diào)整mainVC.view的位置
    mainVC.view.frame.origin.x = menuWidth * CGFloat(percent)
    // 設(shè)置3D效果及透明度
    sideMenuVC.view.layer.transform = menuTransformForPercent(percent)
    sideMenuVC.view.alpha = CGFloat(max(0.2, percent))

    // 左上角按鈕的翻轉(zhuǎn)設(shè)置
    let mainVc = (mainVC as! UINavigationController).viewControllers.first as? MainViewController
    if let menuButton = mainVc?.menuButton {
      menuButton.imageView.layer.transform = buttonTransformForPercent(percent)
    }
  }

3D效果的核心代碼:

  // 根據(jù)百分比添加一個(gè)3D特效
  func menuTransformForPercent(percent: CGFloat) -> CATransform3D {

    var identify = CATransform3DIdentity
    // m34負(fù)責(zé)z軸方向的translation(移動(dòng)),m34= -1/D, 默認(rèn)值是0, D越小透視效果越明顯,這邊的1000視情況調(diào)整的
    identify.m34 = -1.0/1000

    let remainingPercent = 1.0 - percent
    let angle = remainingPercent * CGFloat(-M_PI_2)

    // 后面3個(gè)數(shù)為 x y z
    let rotationTransform = CATransform3DRotate(identify, angle, 0.0, 1.0, 0.0)
    // 將值轉(zhuǎn)換成一個(gè)矩陣
    let translationTransform =
    CATransform3DMakeTranslation(menuWidth * percent, 0, 0)
    // 將上面兩者結(jié)合起來
    return CATransform3DConcat(rotationTransform,
      translationTransform)
  }

  // 為按鈕添加一個(gè)3D效果
  func buttonTransformForPercent(percent: CGFloat) -> CATransform3D {

    var identity = CATransform3DIdentity
    identity.m34 = -1.0/1000

    let angle = percent * CGFloat(-M_PI)
    let rotationTransform = CATransform3DRotate(identity, angle, 1.0, 1.0, 0.0)

    return rotationTransform
  }

以上就是iOS中右拉的抽屜3D效果的實(shí)現(xiàn)實(shí)例代碼,效果是不是很好呢,相信IOS開發(fā)的小伙伴通過上面的實(shí)例代碼一樣可以實(shí)現(xiàn)這個(gè)動(dòng)畫哦。

相關(guān)文章

  • iOS富文本的使用方法示例詳解

    iOS富文本的使用方法示例詳解

    這篇文章主要給大家介紹了關(guān)于iOS富文本的使用方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-12-12
  • iOS使用WebView生成長(zhǎng)截圖的第3種解決方案

    iOS使用WebView生成長(zhǎng)截圖的第3種解決方案

    這篇文章主要給大家介紹了關(guān)于iOS使用WebView生成長(zhǎng)截圖的第3種解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-09-09
  • 關(guān)于iOS中的各種顏色設(shè)置總結(jié)大全(推薦)

    關(guān)于iOS中的各種顏色設(shè)置總結(jié)大全(推薦)

    這篇文章主要給大家介紹了關(guān)于iOS中顏色設(shè)置的相關(guān)資料,其中包括導(dǎo)航欄、狀態(tài)欄、Tabbar、Button、TextField、AttributedString和通用部分的顏色設(shè)置方法示例,對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起看看吧。
    2017-09-09
  • 詳解iOS設(shè)置字體的三種方式

    詳解iOS設(shè)置字體的三種方式

    這篇文章主要介紹了iOS設(shè)置字體的三種方式,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-04-04
  • iOS實(shí)現(xiàn)文字轉(zhuǎn)化成彩色文字圖片

    iOS實(shí)現(xiàn)文字轉(zhuǎn)化成彩色文字圖片

    這篇文章主要為大家詳細(xì)介紹了iOS文字轉(zhuǎn)化成彩色文字圖片的實(shí)現(xiàn)方法,可以實(shí)現(xiàn)不同字體,漸變的效果,感興趣的小伙伴們可以參考一下
    2016-03-03
  • iOS仿簡(jiǎn)書、淘寶等App的View彈出效果

    iOS仿簡(jiǎn)書、淘寶等App的View彈出效果

    這篇文章主要為大家詳細(xì)介紹了iOS仿簡(jiǎn)書、淘寶等App的View彈出效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • 3分鐘實(shí)現(xiàn)iOS語(yǔ)言本地化/國(guó)際化(圖文教程)

    3分鐘實(shí)現(xiàn)iOS語(yǔ)言本地化/國(guó)際化(圖文教程)

    這篇文章主要介紹了3分鐘實(shí)現(xiàn)iOS語(yǔ)言本地化/國(guó)際化,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • iOS如何定義名為任意的變量詳解

    iOS如何定義名為任意的變量詳解

    這篇文章主要給大家介紹了關(guān)于iOS如何定義名為任意的變量的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)各位iOS開發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2018-05-05
  • iOS 真機(jī)調(diào)試微信小程序

    iOS 真機(jī)調(diào)試微信小程序

    下面介紹下如何使用 Xcode、Reveal 和 Safari 來真機(jī)調(diào)試 iOS 上的小程序。感興趣的朋友跟隨腳本之家小編一起看看吧
    2018-08-08
  • iOS延遲執(zhí)行方法詳解

    iOS延遲執(zhí)行方法詳解

    這篇文章主要為大家詳細(xì)介紹了iOS延遲執(zhí)行方法,包括performSelector(NSObject)方法、NSTimer、GCD和sleep(NSThread)四種方法,需要的朋友可以參考下
    2016-11-11

最新評(píng)論