Fork me on GitHub

开始用Swift开发iOS 10 - 14 基础动画,模糊效果和Unwind Segue

动画是通过一系列静态图片(帧)快速显示来模拟动作和形状的变化过程。

在iOS中,创建基础动画很简单,只需要利用UIView的类型方法:animate(withDuration:animations:)。这个方法的原理就是,设置好开始状体和结束状态,然后 UIView animation 创建中间的过程效果。继续上一篇开始用Swift开发iOS 10 - 13 Self Sizing Cells and Dynamic Type

添加评级Button

  • 下载图片包,添加到xcassets里。
  • detail view右上角添加一个Button,设置其内容为空,image为更添加的图片check(一个对勾图标),typesystemtintwhite

  • Button添加四个约束,右、上两个spacing约束,宽度和高度约束。

创建Restaurant Review视图控制器

  • 在storyboard中新建一个View Controller
  • 在新建视图控制器中添加Image View,并改变其大小为整个view,先设置image属性为一个随机图片,比如cafeloisl。 并设置一些约束。

按照下图设置之后是UI:

  • Review的图片上添加一个UIView,x、y、宽度、高度分别是53、40、269、420。
  • 添加Image View,宽度和高度分别为269,200,随机设置image
  • 添加一个内容为You've dined here. What do you think?Label。字体风格为Light,大小为27,居中退器,行数为2。
  • 添加三个按钮内容分别为Absolutely love it!GoodI don't like it。背景为红色,tintwhite,字体是Light和16。
  • 设置三个按钮为一个stack view,改变distributionFill Equallyspaing为5。
  • 为上面添加的UIView添加四个约束。上左右的spacing约束分别为20,37,37。高度约束为420。

  • 为label添加左右下三个spacing约束,值都是15。
  • 为stack view天机左右下三个spacing约束,分别为8,8,10。

创建Present modally类型的Segue

开始用Swift开发iOS 10 - 10 Navigation Controller的介绍和Segue中介绍过Segue类型。Present modally是新页面将以动画形式从底部出现到覆盖整个手机屏幕。

  • contrl-drag从对勾button到Review视图控制,选择Present modally。并设置新生成segue的identifiershowReview

定义如何退出Review View Controller

Navigation Controller中自带了返回按钮,这边需要自己设置unwind segue

  • Review View Controller中的UIView的右上角添加一个关闭按钮,类似于对勾按钮,添加右上和宽度高度约束。

  • 为了实现unwind segue,需要做两件事:
    首先,在返回的的视图控制器(RestaurantDetailViewController)中定义一个方法,定义这个方法是为了告诉xcode这个segue是可以返回的。
    1
    2
    @IBAction func close(segue:UIStoryboardSegue) {
    }

其次在IB中关联返回。control+drag关闭按钮到Exit,选择closeWithSegue:

为背景图片添加模糊效果

UIVisualEffectView

  • 新建ReviewViewController继承至UIViewController,关联上面新建视图控制器。
  • ReviewViewController中添加背景图片结构,并关联图片。
    @IBOutlet var backgroundImageView: UIImageView!
  • ReviewViewControllerviewDidLoad中添加:
    1
    2
    3
    4
    let blurEffect = UIBlurEffect(style: .dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = view.bounds
    backgroundImageView.addSubview(blurEffectView)

模糊效果有点像在要添加的视图上面添加一个视图(UIVisualEffectView),这图有模糊效果(UIBlurEffect),模糊样式通过UIBlurEffectStyle控制,有三种extraLight, light, dark
模糊样式:左为Light,右为Dark

实现 UIView Animation

  • 为准备实现动画效果的UIView添加接口,并关联。
    @IBOutlet var containerView: UIView!
  • 定义初始状态:在ReviewViewControllerviewDidLoad中添加:
    containerView.transform = CGAffineTransform.init(scaleX: 0, y: 0)
  • 定义介绍状态:在ReviewViewControllerviewDidAppear中添加:
    1
    2
    3
    4
    5
    override func viewDidAppear(_ animated: Bool) {
    UIView.animate(withDuration: 0.3, animations: {
    self.containerView.transform = CGAffineTransform.identity
    })
    }

CGAffineTransform.identity表示原本设置的大小和位置状态。
动画的变化过程

Spring 动画

只要修改一下结束状态就可以了:

1
2
3
UIView.animate(withDuration: 0.4, delay: 0.0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0.2, options: .curveEaseInOut, animations: {
self.containerView.transform = CGAffineTransform.identity
}, completion: nil)

从上向下的动画

只要修改一下初始状态,把初始位置设置在上面即可:

1
containerView.transform = CGAffineTransform.init(translationX: 0, y: -1000)

组合两种变化

containerView.transform = CGAffineTransform.init(translationX: 0, y: -1000)修改成:

1
2
3
4
let scaleTransform = CGAffineTransform.init(scaleX: 0, y: 0)
let translateTransform = CGAffineTransform.init(translationX: 0, y: -1000)
let combineTransform = scaleTransform.concatenating(translateTransform)
containerView.transform = combineTransform

Unwind Segues 和数据传输

Review View中点击三个不同评价按钮也通过Unwind Segues返回并传输数据。

  • RestaurantDetailViewController在添加另外一个unwind action方法。

    1
    2
    @IBAction func ratingButtonTapped(segue: UIStoryboardSegue) {
    }
  • 分别对三个按钮control+dragExit,选择ratingButtonTappedWithSegue:,并分别把三个unwind segue的identifier改成 great good dislike

  • Restaurant中添加rating属性: var rating = ""
  • 更新 ratingButtonTapped(segue:)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    @IBAction func ratingButtonTapped(segue: UIStoryboardSegue) {
    if let rating = segue.identifier {
    restaurant.isVisited = true

    switch rating {
    case "greate":
    restaurant.rating = "Absolutely love it! Must try."
    case "good":
    restaurant.rating = "Pretty good."
    case "dislike":
    restaurant.rating = "I don't like it."
    default:
    break
    }
    }
    tableView.reloadData()
    }
  • 更新RestaurantDetailViewControllertableView(_:cellForRowAt:)中当fieldLabel为“Been here”的valueLabel的值:

    cell.valueLabel.text = (restaurant.isVisited) ? "Yes, I've been herebefore. \(restaurant.rating)" : "No"
    

修改ReviewViewController中的图片为相应的图片

  • ReviewViewController中添加一个属性:
    var restaurant: Restaurant!

  • RestaurantDetailViewController中添加prepare(for:sender:)方法,作为RestaurantDetailViewControllerReviewViewController的segue时调用,用于传输数据。

    1
    2
    3
    4
    5
    6
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    if segue.identifier == "showReview" {
    let destinationController = segue.destination as! ReviewViewController
    destinationController.restaurant = self.restaurant
    }
    }
  • ReviewViewController 中添加图片接口。
    @IBOutlet var topImageView: UIImageView!

  • ReviewViewControllerviewDidLoad中显示图片:
    1
    2
    3
    let image = UIImage(named: self.restaurant.image)
    backgroundImageView.image = image
    topImageView.image = image

为closeButton添加动画效果

  • 添加接口
    @IBOutlet var closeButton: UIButton!
  • viewDieLoad中添加:
    closeButton.transform = CGAffineTransform.init(scaleX: 1000, y: 0)
    
  • viewDidAppear:添加:
    1
    2
    3
    4
    5
    UIView.animate(withDuration: 0.5, delay: 0.5, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.3, options: .curveEaseInOut, animations: {

    self.closeButton.transform = CGAffineTransform.identity

    }, completion: nil)

代码

Beginning-iOS-Programming-with-Swift

说明

此文是学习appcode网站出的一本书 《Beginning iOS 10 Programming with Swift》 的一篇记录

坚持原创技术分享,您的支持将鼓励我继续创作!
  • 本文标题: 开始用Swift开发iOS 10 - 14 基础动画,模糊效果和Unwind Segue
  • 本文作者: AndyRon
  • 发布时间: 2017年07月24日 - 00:00
  • 最后更新: 2017年09月09日 - 12:59
  • 本文链接: http://andyron.com/2017/beginning-ios-swift-14.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!