core animation と view

32

Click here to load reader

Upload: tetsuya-kaneuchi

Post on 30-Jun-2015

1.593 views

Category:

Technology


6 download

DESCRIPTION

第49回Cocoa勉強会関西の発表資料です。

TRANSCRIPT

Page 1: Core Animation と View

Core Animation と ViewかねうちてつやCocoa勉強会関西

2013.03.30

Page 2: Core Animation と View

自己紹介かねうちてつや

@kaniza / id:kaniza など

フェンリルで働いてます

Web ブラウザ Sleipnir for Mac / iPhone / iPad など

Page 3: Core Animation と View

今日のネタUIView

NSView

Core Animation

CALayer

Page 4: Core Animation と View

NSView / UIViewOS X / iOS GUI の基本構成要素

ボタン、テキスト、スライダなど

OS X AppKit では NSView (2001年~)

iOS UIKit では UIView (2008年~)

Page 5: Core Animation と View

Core Animation

初登場は OS X Leopard のプレビュー (2006年)

市場投入は初代 iPhone (2007年)

iPhone の 数ヶ月後に Leopard リリース

iPhone の開発過程で生まれたらしい

Page 6: Core Animation と View

Core AnimationとUIViewUIView の描画は CALayer で実現

当初からアニメーションに適した設計

Page 7: Core Animation と View

Core AnimationとNSViewOS X Leopard で Core Animation に対応

オプションで CALayer ベースの描画モデルに

[view setWantsLayer:YES] で Layer-Backed View に変身

デモ

Page 8: Core Animation と View

Layer-Backed View - OS X

Page 9: Core Animation と View

Layer-Backed View - OS XNSView を CALayer で描画

Page 10: Core Animation と View

Layer-Backed View - OS XNSView を CALayer で描画

NSView でなめらかアニメーション

Page 11: Core Animation と View

Layer-Backed View - OS XNSView を CALayer で描画

NSView でなめらかアニメーション

Subview もすべて CALayer ベースに

Page 12: Core Animation と View

Layer-Backed View - OS XNSView を CALayer で描画

NSView でなめらかアニメーション

Subview もすべて CALayer ベースに

CALayer は AppKit が管理

Page 13: Core Animation と View

Layer-Backed View - OS XNSView を CALayer で描画

NSView でなめらかアニメーション

Subview もすべて CALayer ベースに

CALayer は AppKit が管理

!= Layer-Hosted View

Page 14: Core Animation と View

CoocaSlides

Page 15: Core Animation と View

CALayer と View

Page 16: Core Animation と View

CALayer と View

構造は類似

階層的に描画内容を持つ

描画だけなら CALayer だけでも可

View はイベント処理に対応

Page 17: Core Animation と View

描画モデルとアニメーション

なぜ Layer-Backed View だとなめらか?

drawRect と contents

Page 18: Core Animation と View

従来の描画モデルウィンドウをロジック(drawRect:)で塗り潰す

再描画領域に関連する View で drawRect:

移動したらその都度 drawRect:

そもそもアニメーション向きじゃない

Page 19: Core Animation と View

Traditional View

Page 20: Core Animation と View

Traditional View

Page 21: Core Animation と View

Traditional View

Page 22: Core Animation と View

Traditional View

drawRect:

drawRect:

Page 23: Core Animation と View

Layer-Backed View (CALayer)の描画モデル

絵を重ね合わせる

描画内容をキャッシュ

アニメーション時に drawRect しない

移動や合成はGPUの得意分野

Page 24: Core Animation と View

Layer-Backed View

Page 25: Core Animation と View

Layer-Backed View

Page 26: Core Animation と View

Layer-Backed View

Page 27: Core Animation と View

CoocaSlides

Page 28: Core Animation と View

いいことばかりじゃない

メモリ消費量の面では不利

発展途上で変化が激しい

Mountain Lion で大きく完成度が上がった

Lion 以前でテキストレンダリングが汚い

デモ

Page 29: Core Animation と View

とはいえ

Page 30: Core Animation と View

未来は Layer-Backed View だ

Page 31: Core Animation と View

参考Sleipnir for Mac の実装技術: Layer-Backed View

http://blog.fenrir-inc.com/jp/2013/02/sleipnir-mac-implementation.html

Core Animation Programming Guide

NSView Class Reference

Application Kit Release Notes

Page 32: Core Animation と View

まとめNSView も UIView のように CALayer ベースに移行しつつある

従来の NSView と CALayer の描画モデルの違い

NSView フル活用の Sleipnir for Mac よろしく!

http://www.fenrir-inc.com/jp/mac/sleipnir/