iOS技术交流园swiftiOS优秀译文

swift中的转场

2015-10-31  本文已影响2001人  Girl_iOS

本文翻译自这里
上一篇中我写了如何来创建一个自定义转场动画.
但仅限于屏幕的整个frame的转场,而我们经常需要页面中的元素也有动画...

Menu-8.gif
这篇文章我将从0到1教你如何来实现页面元素的转场.
照例,你可以在这里来下载初始项目文件.
当你一步步完成这篇教程的时候,你就可以了解其中的原理并能轻松地写出自己的转场动画了:) Storyboard.png
在storyboard设置这些东西是有些费时,所以你可以直接下载已经为你准备好的初始项目文件.
当你运行示例项目后,点击"+"按钮时,会以sliding up的动画从屏幕底部弹出. Menu-1.gif storyboard-background-color.png

运行项目你会发现页面弹出的时候背景页面可以看到,但当弹出结束的时背景页面消失了,取而代之的是漆黑一片.

Menu-2.gif

修复此问题只需在modal segue中做些调整.
选中Segue,使presentation的值从'Default'换为'Over Full Screen'.

segue-presentation.png
而当前有个不能退出的bug.如果我们不修复就会造成点击取消按钮时无法退出的情况.
修复很简单,只需添加退出的代码即可. 
@IBAction func unwindToMainViewController (sender: UIStoryboardSegue){
        // bug? exit segue doesn't dismiss so we do it manually... 
        self.dismissViewControllerAnimated(true, completion: nil)
}

再次运行项目,会看到当转场动画结束后背景页面仍然能够看见.

Menu-3.gif 
transitionContext.viewForKey(UITransitionContextFromViewKey)!

我们将用如下方法获取页面的view controllers:

transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)!

另外,因为按钮页面的view controller会在From ViewController和ToViewController交替变换(取决于是调用presenting还是dismissing方法).我们将用一个元组来暂存,并通过presenting标记true或false来指派menuViewController和bottomViewController.

// create a tuple of our screens
let screens : (from:UIViewController, to:UIViewController) = (transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)!, transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)!)
// assign references to our menu view controller and the 'bottom' view controller from the tuple
// remember that our menuViewController will alternate between the from and to view controller depending if we're presenting or dismissing
let menuViewController = !self.presenting ? screens.from as MenuViewController : screens.to as MenuViewController
let bottomViewController = !self.presenting ? screens.to as UIViewController : screens.from as UIViewController
let menuView = menuViewController.view
let bottomView = bottomViewController.view

没有特殊的东西,但却为复杂动画做了些基础工作.

Menu-4.gif create-IBOutlets.gif

当我们完成时,我们一共有12个IBOutlets,每个连接相对应的icon和text label.

@IBOutlet weak var textPostIcon: UIImageView!
@IBOutlet weak var textPostLabel: UILabel!

@IBOutlet weak var photoPostIcon: UIImageView!
@IBOutlet weak var photoPostLabel: UILabel!

@IBOutlet weak var quotePostIcon: UIImageView!
@IBOutlet weak var quotePostLabel: UILabel!

@IBOutlet weak var linkPostIcon: UIImageView!
@IBOutlet weak var linkPostLabel: UILabel!

@IBOutlet weak var chatPostIcon: UIImageView!
@IBOutlet weak var chatPostLabel: UILabel!

@IBOutlet weak var audioPostIcon: UIImageView!
@IBOutlet weak var audioPostLabel: UILabel!

依然在animateTransition方法里我们首先要探寻从渐显动画转变为两个元素的的逐渐滑入动画:
我们要首先准备按钮页面的动画:

// setup 2D transitions for animations 
let offstageLeft = CGAffineTransformMakeTranslation(-150, 0)
let offstageRight = CGAffineTransformMakeTranslation(150, 0)

// prepare the menu
if (self.presenting){
    
    // prepare menu to fade in
    menuView.alpha = 0
    
    // prepare menu items to slide in
    menuViewController.textPostIcon.transform = offstageLeft
    menuViewController.textPostLabel.transform = offstageLeft
    
    menuViewController.photoPostIcon.transform = offstageRight
    menuViewController.photoPostLabel.transform = offstageRight
    
}

然后在我们动画block中:

if (self.presenting){
    // fade in
    menuView.alpha = 1
    
    // onstage items: slide in
    menuViewController.textPostIcon.transform = CGAffineTransformIdentity
    menuViewController.textPostLabel.transform = CGAffineTransformIdentity
    
    menuViewController.photoPostIcon.transform = CGAffineTransformIdentity
    menuViewController.photoPostLabel.transform = CGAffineTransformIdentity
    
}
else {
    // fade out
    menuView.alpha = 0
    
    // offstage items: slide out
    menuViewController.textPostIcon.transform = offstageLeft
    menuViewController.textPostLabel.transform = offstageLeft
    
    menuViewController.photoPostIcon.transform = offstageRight
    menuViewController.photoPostLabel.transform = offstageRight
    
}

我们可以在元素的正常位置下设置transform的属性为CGAffineTransformIdentity或者移动它们远离屏幕通过offstageLeft和offstageRight来改变.
运行项目,我们可以看到两个元素滑入滑出的动画:

Menu-5.gif 
func offStageMenuController(menuViewController: MenuViewController){
    menuViewController.view.alpha = 0
    // setup 2D transitions for animations
    let offstageLeft = CGAffineTransformMakeTranslation(-150, 0)
    let offstageRight = CGAffineTransformMakeTranslation(150, 0)

    menuViewController.textPostIcon.transform = offstageLeft
    // etc for all 12 IBOutlets...
}
func onStageMenuController(menuViewController: MenuViewController){
    // prepare menu to fade in
    menuViewController.view.alpha = 1
    menuViewController.textPostIcon.transform = CGAffineTransformIdentity
    // etc for all 12 IBOutlets...
}

此时,动画block里的代码会精简许多,只需调用这些方法即可:

// perform the animation!
UIView.animateWithDuration(duration, delay: 0.0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.8, options: nil, animations: {
    
        if (self.presenting){
            self.onStageMenuController(menuViewController) // onstage items: slide in
        }
        else {
            self.offStageMenuController(menuViewController) // offstage items: slide out
        }

    }, completion: { finished in
        
        // tell our transitionContext object that we've finished animating
        transitionContext.completeTransition(true)
        
        // bug: we have to manually add our 'to view' back http://openradar.appspot.com/radar?id=5320103646199808
        UIApplication.sharedApplication().keyWindow?.addSubview(screens.to.view)
})

运行程序,我们将看到12个元素随着页面的转变都有滑入滑出动画:

Menu-6.gif 
func offStage(amount: CGFloat) -> CGAffineTransform {
        return CGAffineTransformMakeTranslation(amount, 0)
}

在我们的offstaging帮助方法里我们使用:

// setup parameters for 2D transitions for animations
let topRowOffset  :CGFloat = 50
let middleRowOffset :CGFloat = 150
let bottomRowOffset  :CGFloat = 300
menuViewController.textPostIcon.transform = self.offStage(-topRowOffset)
menuViewController.textPostLabel.transform = self.offStage(-topRowOffset)
menuViewController.quotePostIcon.transform = self.offStage(-middleRowOffset)
menuViewController.quotePostLabel.transform = self.offStage(-middleRowOffset)
menuViewController.chatPostIcon.transform = self.offStage(-bottomRowOffset)
menuViewController.chatPostLabel.transform = self.offStage(-bottomRowOffset)
menuViewController.photoPostIcon.transform = self.offStage(topRowOffset)
menuViewController.photoPostLabel.transform = self.offStage(topRowOffset)
menuViewController.linkPostIcon.transform = self.offStage(middleRowOffset)
menuViewController.linkPostLabel.transform = self.offStage(middleRowOffset)
menuViewController.audioPostIcon.transform = self.offStage(bottomRowOffset)
menuViewController.audioPostLabel.transform = self.offStage(bottomRowOffset)

我们用每个元素的动画时间相同,替换使用我们分成的三个组里元素具有相同距离,而当时间相同,元素距离越短就会越早出现.
运行项目,我们将看到交错的效果:

Menu-7.gif 
// setup paramaters for 2D transitions for animations
let topRowOffset :CGFloat = 300
let middleRowOffset :CGFloat = 150
let bottomRowOffset :CGFloat = 50
Menu-8-2.gif

运行项目,我们会看到从底部向上渐入的效果.

Girl学iOS100天 第4天

上一篇 下一篇

猜你喜欢

热点阅读