Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

魅せるUIの作り方 | iOS 7エンジニア勉強会

34,404 views

Published on

Published in: Technology
  • Be the first to comment

魅せるUIの作り方 | iOS 7エンジニア勉強会

  1. 1. 魅せるUIの作り方 iOS 7 エンジニア勉強会@ヤフー 2013/10/7 カカオジャパン 佐藤新悟
  2. 2. iOS 7 らしい UI •フラットデザイン、それだけ? •物理法則にもとづいたリアルなアニ メーション •視差を利用した奥行きの表現 •磨りガラスのような透過表現
  3. 3. UIKit Dynamics •UIKitのための2次元物理エンジン •これまでのアニメーションの仕組みを 置き換えるものではない •ゲームのためのものではない(Sprite Kitを使おう)
  4. 4. Demo
  5. 5. Gravity and Collision UIDynamicAnimator* animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view]; UIGravityBehavior* gravityBeahvior = [[UIGravityBehavior alloc] initWithItems:@[square1,square2]]; UICollisionBehavior* collisionBehavior = [[UICollisionBehavior alloc] initWithItems:@[square1,square2]]; collisionBehavior.translatesReferenceBoundsIntoBoundary = YES; [animator addBehavior:gravityBeahvior]; [animator addBehavior:collisionBehavior];
  6. 6. Architecture UIDynamicAnimator UIDynamicBehavior UIDynamicBehavior UIDynamicBehavior View View View Reference View
  7. 7. Architecture Subview Subview Subview Superview
  8. 8. UIDynamicBehavior • UIGravityBehavior • UICollisionBehavior • UIAttachmentBehavior • UISnapBehavior • UIPushBehavior • UIDynamicItemBehavior
  9. 9. Demo
  10. 10. UIGravityBehavior UIGravityBehavior* gravityBeahavior = [[UIGravityBehavior alloc] initWithItems:@[self.square1]]; gravityBeahavior.gravityDirection = CGVectorMake(0.0f, 1.0f); gravityBeahavior.magnitude = 1.0f; gravityBeahavior.angle = -M_PI/2.0; •重力の強さと方向を設定可能
  11. 11. UICollisionBehavior UICollisionBehavior* collisionBehavior = [[UICollisionBehavior alloc] initWithItems: @[self.square1, self.square2]]; collisionBehavior.collisionMode = UICollisionBehaviorModeEverything; // UICollisionBehaviorModeBoundaries, UICollisionBehaviorModeItems CGPoint p0; CGPoint p1; [collisionBehavior addBoundaryWithIdentifier:@"b0" fromPoint:p0 toPoint:p1]; UIBezierPath *path; [collisionBehavior addBoundaryWithIdentifier:@"b1" forPath:path]; • view同士の衝突も可能 • CGPointで直線を指定、またはUIBezierPath を使って境界を追加可能
  12. 12. UIAttachmentBehavior CGPoint anchorPoint = CGPointMake(self.square1.center.x, self.square1.center.y - 100.0); UIOffset offset = UIOffsetMake(-25.0, -25.0); UIAttachmentBehavior* attachmentBehavior = [[UIAttachmentBehavior alloc] initWithItem:self.square1 offsetFromCenter:offset attachedToAnchor:anchorPoint]; attachmentBehavior.frequency = 1.0; attachmentBehavior.damping = 0.1; • view上の点と指定した点を繋ぐ • バネのように伸び縮みさせることもできる
  13. 13. UISnapBehavior UISnapBehavior* snapBehavior = [[UISnapBehavior alloc] initWithItem:self.square1 snapToPoint:point]; • viewを指定した点に吸い付くようにする
  14. 14. UIPushBehavior typedef NS_ENUM(NSInteger, UIPushBehaviorMode) { UIPushBehaviorModeContinuous, UIPushBehaviorModeInstantaneous } UIPushBehavior *pushBehavior = [[UIPushBehavior alloc] initWithItems:@[self.square1] mode:UIPushBehaviorModeInstantaneous]; pushBehavior.angle = 0.0; pushBehavior.magnitude = 1.0; • 瞬間的に力を加える instantaneous と、継続 的に力を加える continuous のモードがある • 力の方向と強さを設定可能
  15. 15. UIDynamicItemBehavior UIDynamicItemBehavior* propertiesBehavior = [[UIDynamicItemBehavior alloc] initWithItems:@[self.square1]]; propertiesBehavior.elasticity = 0.5; • 指定したviewの特性を変える • elasticity: 弾性 • friction: 摩擦 • density: 密度(質量) • resistance: 抵抗 • angularResistance: 回転に対する抵抗 • allowsRotation: itemの回転を許すか否か
  16. 16. Motion Effects •端末の傾きに応じて視差効果を与える
  17. 17. Motion Effects
  18. 18. UIMotionEffect UIInterpolatingMotionEffect *xAxis = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"center.x" type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis]; xAxis.minimumRelativeValue = @(-20.0f); xAxis.maximumRelativeValue = @20.0f; UIInterpolatingMotionEffect *yAxis = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"center.y" type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis]; yAxis.minimumRelativeValue = @(-20.0f); yAxis.maximumRelativeValue = @20.0f; UIMotionEffectGroup *group = [[UIMotionEffectGroup alloc] init]; group.motionEffects = @[xAxis, yAxis]; [self.button addMotionEffect:group];
  19. 19. Blur Effect
  20. 20. Blur Effect • UIKit標準のコントロールは背景をぼかして透過する処 理を自動で行う • APIは公開されていないので独自のviewで同じことをや るには自力で実装が必要 • WWDCのサンプルコードとしてUIImageのカテゴリが 配布されている (UIImage+ImageEffects) • 静止画を作るだけなので動的なコンテンツへの利用 は難しい • 静止画だけでも工夫次第でできることは多い
  21. 21. Demo
  22. 22. Blur Effect // viewのスナップショットを撮る UIGraphicsBeginImageContextWithOptions(self.view.frame.size, NO, 0.0); [self.view drawViewHierarchyInRect:self.view.bounds afterScreenUpdates:NO]; UIImage *bgImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); // blurをかける bgImage = [bgImage applyLightEffect]; • -[CALayer renderInContext:] よりも高速
  23. 23. (A) 背景view (B) 降りてくるview clipsToBounds = YES (C) blurred image Bのsubview B の動きに合わせて C のframeを調整して 動かないように見せる
  24. 24. まとめ • 物理法則にもとづいたリアルなアニメーション → UIKit Dynamics • 視差を利用した奥行きの表現 → Motion Effects • 磨りガラスのような透過表現 • UIKit標準コントロールを利用 • 自前実装はパフォーマンスに注意
  25. 25. 参考資料 • UIKit Dynamics Catalog https://developer.apple.com/library/ios/samplecode/DynamicsCatalog • WWDC 2013 sessions https://developer.apple.com/wwdc/videos/ • Getting Started with UIKit Dynamics • Advanced Techniques with UIKit Dynamics • Implementing Engaging UI on iOS (Motion Effects, Snapshot, Blur) • WWDC 2013 Sample Codes https://developer.apple.com/wwdc/resources/ • iOS_RunningWithASnap • iOS_UIImageEffects (ぼかし用UIImageカテゴリ)

×