More Related Content
Similar to 魅せるUIの作り方 | iOS 7エンジニア勉強会
Similar to 魅せるUIの作り方 | iOS 7エンジニア勉強会 (20)
More from Yahoo!デベロッパーネットワーク
More from Yahoo!デベロッパーネットワーク (20)
魅せるUIの作り方 | iOS 7エンジニア勉強会
- 2. iOS 7 らしい UI
•フラットデザイン、それだけ?
•物理法則にもとづいたリアルなアニ
メーション
•視差を利用した奥行きの表現
•磨りガラスのような透過表現
- 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];
- 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. 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上の点と指定した点を繋ぐ
• バネのように伸び縮みさせることもできる
- 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 のモードがある
• 力の方向と強さを設定可能
- 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];
- 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カテゴリ)