swift: autolayoutでuivisualeffectviewをアニメーションさせてみた
DESCRIPTION
http://tomoyaonishi.hatenablog.jp/entry/2014/07/02/Swift%3A_AutoLayoutでUIVisualEffectviewをアニメーションさせてみたTRANSCRIPT
![Page 1: Swift: AutoLayoutでUIVisualEffectviewをアニメーションさせてみた](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a11e7d8b42a34248b46f6/html5/thumbnails/1.jpg)
Swift : AutoLayoutでUIVisualEffectViewをアニメーションさせてみた
iOS_LT #16
@Tomoya_Onishi
![Page 2: Swift: AutoLayoutでUIVisualEffectviewをアニメーションさせてみた](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a11e7d8b42a34248b46f6/html5/thumbnails/2.jpg)
自己紹介
• iOS開発歴約3年
• ツイート専用アプリ「FasPos」
• QRコード読み取りアプリ「QR Reader」
• その他位置情報ログアプリなどいくつか
![Page 3: Swift: AutoLayoutでUIVisualEffectviewをアニメーションさせてみた](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a11e7d8b42a34248b46f6/html5/thumbnails/3.jpg)
UIVisualEffectView
• iOS8で登場した
• さまざまなエフェクトを適応したビューを簡単に生成できる
• Apple公式のすりガラス表現ができる!!!!
• どういうエフェクトにするかはUIVisualEffectで指定する
![Page 4: Swift: AutoLayoutでUIVisualEffectviewをアニメーションさせてみた](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a11e7d8b42a34248b46f6/html5/thumbnails/4.jpg)
UIVisualEffect• サブクラスのUIBlurEffect, UIVibrancyEffectが利用できる
• BlurEffectは3つのスタイルが用意されている
enum UIBlurEffectStyle : Int { case ExtraLight case Light case Dark }
![Page 5: Swift: AutoLayoutでUIVisualEffectviewをアニメーションさせてみた](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a11e7d8b42a34248b46f6/html5/thumbnails/5.jpg)
let effect = UIBlurEffect(style: UIBlurEffectStyle.Light) !let effectView: UIVisualEffectView = UIVisualEffectView(effect: effect) !view.addSubview(effectView)
これだけのコードですりガラス表現のビューが表示できる
![Page 6: Swift: AutoLayoutでUIVisualEffectviewをアニメーションさせてみた](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a11e7d8b42a34248b46f6/html5/thumbnails/6.jpg)
![Page 7: Swift: AutoLayoutでUIVisualEffectviewをアニメーションさせてみた](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a11e7d8b42a34248b46f6/html5/thumbnails/7.jpg)
AutoLayoutを使ってコントロールセンター みたいなアニメーションを再現してみる
![Page 8: Swift: AutoLayoutでUIVisualEffectviewをアニメーションさせてみた](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a11e7d8b42a34248b46f6/html5/thumbnails/8.jpg)
// 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
![Page 9: Swift: AutoLayoutでUIVisualEffectviewをアニメーションさせてみた](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a11e7d8b42a34248b46f6/html5/thumbnails/9.jpg)
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 } }
![Page 10: Swift: AutoLayoutでUIVisualEffectviewをアニメーションさせてみた](https://reader033.vdocuments.site/reader033/viewer/2022060118/558a11e7d8b42a34248b46f6/html5/thumbnails/10.jpg)
まとめ
• UIImage+ImageEffectsを置き換えられる
• アニメーションがおかしくなる
• storyboardもframeに頼らない作りになったので、基本的にはAutoLayout管理に移行すべき(3.5, 4inch, iPad, resizable, カーナビ, iPhone iPadのStoryboardの共有化, 通知センターのウィジェット)