Swift: AutoLayoutでUIVisualEffectviewをアニメーションさせてみた

Swift : AutoLayoutでUIVisualEﬀectView をアニメーションさせてみた iOS_LT #16 @Tomoya_Onishi

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

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

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

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

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

// 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

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 } }

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

Swift: AutoLayoutでUIVisualEffectviewをアニメーションさせてみた

by Tomoya Onishi, エンジニア at Yahoo! JAPAN

on Jul 02, 2014

Statistics

Views

Actions

0 Embeds 0

Accessibility

Categories

Upload Details

Usage Rights

Report content

Swift: AutoLayoutでUIVisualEffectviewをアニメーションさせてみた Presentation Transcript