2016年02月11日

WWDC15 - 216 Layout and Animation Techniques for WatchKit

Layout and Animation Techniques for WatchKit
WWDC 2015 | App Frameworks | Session 216
36:29
https://developer.apple.com/videos/play/wwdc2015-216/

※WWDCセッション関係の記事は、セッション内容を要約して内容を伝えるのが目的ではない。各セッションビデオで何が話されているかの項目をテキスト化することで後で何かを調べたいときにどのビデオを見れば良いか判断する材料にするために書いている。

Apple Watchアプリケーションの画面レイアウトシステムは、OS XやiOSでのそれとは違っている。前半ではこのフローベースのレイアウトどのようにするかをコードを使わず、Stroryboardで作成する方法を語っている。

サイズ(絶対値、相対値、フィット)やアライメントの設定。Groupをうまく組み合わせることで一見複雑に見えるレイアウトも作成可能。実例を使って示す。

後半はUI要素のプロパティアニメーションを使って、効果的なアニメーションを実現する方法を示す。
アニメーションは通知画面、Glance画面では実行できない。

watchOS 2ではアプリケーションはApple Watchに転送されて実行されるので画像リソースなどを使う場合にはサイズを小さくすることに気をつけること。


[Layout Fundamentals]
Same as watch OS 1
Different from UIKit and AppKit
Flow-based layout
縦方向のフロー
横方向にはGroupを使う

WatchKit Layout Programming Model
You don't write object creation code
Fine tuned ontrol of:
- Layout hierarchy
- Aligment and sizing
- Animation

Alignment and Sizing
Properties on WKInterfaceObject
Alignment in containg object - Horizontal and vertical
WKInterfaceObjectHorizontalAlignment
WKInterfaceObjectVerticalAlignment
Size
setWidth, setHeight
setRelativeSizeWidth, setRelativeSizeHeight,
sizeToFitWidth, sizeToFitHeight

[Using Groups] 7:00〜
WKInterfaceGroup
Container without default content
Tool for arranging elemnts
- vertical or horizontal flow
- inset, spacing

サンプル:WKRecipes 8:30〜
No API
IB created

Using Images in Layouts
Don't Ignore transfer costs
- watchOS 1 apps run extension on iPhone
- watchOS 2 apps need to install extension
Use appropriate sizes
スライスサイズイメージを使うなど転送するデータを減らす努力をしなさい

[Existing Animations in watchOS 1] 18:00〜
Tables
Insert rows
Remove rows
Update row content
Code
insertRowsAtIndexes:
To avoid animations
setRowTypes()
setNumberOFRows(_: withRowType:)

Animated Images
Optimizing images is important - reduce size
or USE WKInterfacePicker

[New Animation API in watchOS 2]
Animatable Properties
Opacity, Width/height, Alignment/Background color/Color/tint color, Group insets

WKInterfaceController - NEW API
animateWithDuration()
didAppear
willDisappear

Animating Sample
Sequential Animations 24:38〜

Stagger animations using times or GCD
- Interface controller must be active
- Keep total duration short
Set initial animation values in stroyboard

Groups as Spacing Elements 27:00〜
Invisible spacer groups
Adjust width, ehght, alig

Complex Interface Transitions 29:20〜

[Animation Notes]
Any update that affects sizing can canimate layout
Concurrent animations and complex layouts affect performance
- test on hardware
API functions within apps, not Glances or dynamic notifications
Use ith restraint
Should never be the focus
Keep duration short



posted by 永遠製作所 at 21:03| 東京 ☀| Comment(0) | TrackBack(0) | WWDC | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック