http://tomoyaonishi.hatenablog.jp/entry/2014/07/02/Swift%3A_AutoLayoutでUIVisualEffectviewをアニメーションさせてみた

1. Swift :
AutoLayoutでUIVisualEffectView
をアニメーションさせてみた
iOS_LT #16
@Tomoya_Onishi

2. 自己紹介
• iOS開発歴約３年
• ツイート専用アプリ「FasPos」
• QRコード読み取りアプリ「QR Reader」
• その他位置情報ログアプリなどいくつか

3. UIVisualEffectView
• iOS8で登場した
• さまざまなエフェクトを適応したビューを簡単に生成できる
• Apple公式のすりガラス表現ができる！！！！
• どういうエフェクトにするかはUIVisualEffectで指定する

4. UIVisualEffect
• サブクラスのUIBlurEffect, UIVibrancyEffectが利用できる
• BlurEffectは3つのスタイルが用意されている
enum UIBlurEffectStyle : Int {
case ExtraLight
case Light
case Dark
}

5. let effect = UIBlurEffect(style: UIBlurEffectStyle.Light)
!
let effectView: UIVisualEffectView = UIVisualEffectView(effect: effect)
!
view.addSubview(effectView)
これだけのコードですりガラス表現のビューが表示できる

7. AutoLayoutを使ってコントロールセンター
みたいなアニメーションを再現してみる

8. // View
let effect = UIBlurEffect(style: UIBlurEffectStyle.Light)
let effectView: UIVisualEffectView = UIVisualEffectView(effect: effect)
effectView.clipsToBounds = false
// falseにすると AutoResizingMaskをAutoLayoutの制約に自動変換しないようになる
effectView.setTranslatesAutoresizingMaskIntoConstraints(false)
view.addSubview(effectView)
// AutoLayout
// NSDictionaryOfVariableBindings関数はどこにいったのかよくわからないので自分で辞書を生成
let views = ["effectView" : effectView]
let metrics = ["marginZero" : 0, "marginTop" : 100]
// 水平方向の制約を追加:superviewに対してぴったり張り付く
let horizontalConstraints: AnyObject[] =
NSLayoutConstraint.constraintsWithVisualFormat("|-marginZero-[effectView]-marginZero-|",
options: NSLayoutFormatOptions(0),
metrics: metrics,
views: views)
view.addConstraints(horizontalConstraints)
// 垂直方向の制約を追加:superviewに対して上は100ptあける、下はぴったり張り付く
let verticalConstraints: AnyObject[] =
NSLayoutConstraint.constraintsWithVisualFormat("V:|-marginTop-[effectView]-marginZero-|",
options: NSLayoutFormatOptions(0),
metrics: metrics,
views: views)
view.addConstraints(verticalConstraints)
// アニメーションのために上からの制約を保持
let constraint : AnyObject = verticalConstraints[0]
marginTopConstraint = constraint as? NSLayoutConstraint

9. var flag : Bool = false
@IBAction func didTapButton(sender: UIButton) {
if let constraint = marginTopConstraint {
UIView.animateWithDuration(1.0,
delay: 0.0,
usingSpringWithDamping: 0.5,
initialSpringVelocity: 0.1,
options: UIViewAnimationOptions(0),
animations: {
// frameのアニメーションと同じ考えだとアニメーションできない
// constantを変更するだけでは足りない
constraint.constant = self.flag ? 150 : 500
// 画面の再描画を呼び出す必要あり
self.view.layoutIfNeeded()
},
completion: nil)
flag = !flag
}
}

10. まとめ
• UIImage+ImageEffectsを置き換えられる
• アニメーションがおかしくなる
• storyboardもframeに頼らない作りになったので、基本的にはAutoLayout管理に
移行すべき（3.5, 4inch, iPad, resizable, カーナビ, iPhone iPadのStoryboardの
共有化, 通知センターのウィジェット）