Александр Кожевин front-end developer

2

Таблица Менделеева на famo.us: http://alexander-kozhevin.com/famous/

2

3

4

5

Главные проблемы:

Рендеринг + Анимация

6

1998 Сегодня

Рендеринг: Что мы хотим 7

Анимация: Чего мы хотим 8

Анимация: Что у нас есть? 9

10

3D DOM

Canvas WebGL

iOS/Android/Kindle

FAMO.US = PORTABLE RENDERING ENGINE

NO install NO download

NO plugin PURE JavaScript SMALL footprint

11

12 Почему он так быстр?

context var context = Engine.createContext();

> Render Tree <

modifier var chain = context.add(modifier);

surface chain.add(surface);

Famo.us крутой потому, что:

1.  Интеграция с MV* фреймворками 2.  Физика 3.  Набор View’ек 4.  Touch события

13

Touch event

var sync = new GenericSync( ['mouse', 'touch'], {direction : GenericSync.DIRECTION_X} );

sync.on('update', function(data) { var currentPosition = this.pageViewPos.get();

if(currentPosition === 0 && data.velocity > 0) { //do smth }

14

FAMO.US работает: 15

“Чистый” famo.us

var backgroundSurface = new Surface({ size: [this.options.width, this.options.height], properties: { backgroundColor: 'black', boxShadow: '0 0 1px black' } });

16

var rotateModifier = new StateModifier({ transform: Transform.rotateZ(this.options.angle) }); var skewModifier = new StateModifier({ transform: Transform.skew(0, 0, this.options.angle) }); this.add(rotateModifier). add(skewModifier).add(backgroundSurface);

17

Famo.us + AngularJS

<fa-modifier ng-repeat="cat in cats" fa-animate-enter="catEnter(cat.t, $done)" fa-animate-leave="catLeave(cat.t, $done)" > <fa-surface> ... </fa-surface> </fa-modifier> <fa-surface> <input type="range" ng-model="data.t"> </fa-surface>

18

Let’s do cool stuff: 1.  http://famo.us/

2.  https://github.com/Famous/famous

3.  https://github.com/thomasstreet/famous-angular-examples

19

Спасибо за внимание!

Alexander Kozhevin

https://www.facebook.com/alexander.polymath

20

Вопросы?

21