专业java、php、iOS、C++、网页设计、平面设计、网络营销、游戏开发、前端与移动开发培训机构

完成欢迎界面

添加控件约束

// MARK: - 准备UI
/// 准备UI
private func setupUI() {
  // 1.添加子控件
  view.addSubview(backgroundImageView)
  view.addSubview(iconView)
  view.addSubview(messageLabel)

  // 2.添加约束
  backgroundImageView.translatesAutoresizingMaskIntoConstraints = false
  iconView.translatesAutoresizingMaskIntoConstraints = false
  messageLabel.translatesAutoresizingMaskIntoConstraints = false

  // 背景
  // leading
  self.view.addConstraint(NSLayoutConstraint(item: backgroundImageView, attribute: NSLayoutAttribute.leading, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.leading, multiplier: 1, constant: 0))
  // top
  self.view.addConstraint(NSLayoutConstraint(item: backgroundImageView, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.top, multiplier: 1, constant: 0))
  // trailing
  self.view.addConstraint(NSLayoutConstraint(item: backgroundImageView, attribute: NSLayoutAttribute.trailing, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.trailing, multiplier: 1, constant: 0))
  // bottom
  self.view.addConstraint(NSLayoutConstraint(item: backgroundImageView, attribute: NSLayoutAttribute.bottom, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: 0))

  // 头像
  // centerX
  self.view.addConstraint(NSLayoutConstraint(item: iconView, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0))
  // bottom
  self.view.addConstraint(NSLayoutConstraint(item: iconView, attribute: NSLayoutAttribute.bottom, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: -160))

  // 欢迎label
  // centerX
  self.view.addConstraint(NSLayoutConstraint(item: messageLabel, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: self.iconView, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0))
  // top
  self.view.addConstraint(NSLayoutConstraint(item: messageLabel, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: self.iconView, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: 16))
}

用户头像添加动画

使用属性记录底部约束

/// 头像的底部约束
  var iconViewBottoCons: NSLayoutConstraint?

// 头像
// bottom
iconViewBottoCons = NSLayoutConstraint(item: iconView, attribute: NSLayoutAttribute.bottom, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: -160)
self.view.addConstraint(iconViewBottoCons!)

更新约束做动画

// MARK: - 动画
// 动画在界面显示出来,我们看到界面的时候再做动画
override func viewDidAppear(_ animated: Bool) {
  super.viewDidAppear(animated)

  moveAnimation()
}

/// 头像从下方移动到上方
private func moveAnimation() {
  // 动画, 使用弹簧效果
  // usingSpringWithDamping: 范围 0 - 1之间, 数值越小弹簧效果月明显
  // initialSpringVelocity: 初始速度.
  UIView.animate(withDuration: 1.2, delay: 0.1, usingSpringWithDamping: 0.7, initialSpringVelocity: 5, options: UIViewAnimationOptions(rawValue: 0), animations: { () -> Void in
      // 更新约束
      self.iconViewBottoCons?.constant = -(UIScreen.main.bounds.height - 160)

      // AutoLayout动画必须调用layoutIfNeeded,layoutIfNeeded会根据约束重新设置frame
      self.view.layoutIfNeeded()
  }) { (_) -> Void in
      // 移动动画完成, 是label.alpha = 1
      UIView.animate(withDuration: 1, animations: { () -> Void in
          self.messageLabel.alpha = 1
          }, completion: { (_) -> Void in
              // TODO: 回到首页
              print("动画完成")
      })
  }
}

usingSpringWithDamping 的范围为 0.0f 到 1.0f，数值越小 弹簧 的振动效果越明显
initialSpringVelocity 则表示初始的速度，数值越大一开始移动越快

完成欢迎界面

完成欢迎界面

results matching ""

No results matching ""