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.
Александр Кожевин 
front-end developer
Таблица Менделеева на famo.us: 
http://alexander-kozhevin.com/famous/ 
2 
2
3
4
5
Главные проблемы: 
Рендеринг + Анимация 
6
1998 
Рендеринг: Что мы хотим 7 
Сегодня
Анимация: Чего мы хотим 8
Анимация: Что у нас есть? 9
10
FAMO.US = PORTABLE 
RENDERING ENGINE 
3D 
DOM 
Canvas 
WebGL 
iOS/Android/Kindle 
NO install 
NO download 
NO plugin 
PURE...
Почему он так быстр? 12 
> Render Tree < 
context var context = Engine.createContext(); 
modifier var chain = context.add(...
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'...
FAMO.US работает: 15
“Чистый” famo.us 
var backgroundSurface = new Surface({ 
size: [this.options.width, this.options.height], 
properties: { 
...
var rotateModifier = new StateModifier({ 
transform: Transform.rotateZ(this.options.angle) 
}); 
var skewModifier = new St...
Famo.us + AngularJS 
<fa-modifier ng-repeat="cat in cats" 
fa-animate-enter="catEnter(cat.t, $done)" 
fa-animate-leave="ca...
Let’s do cool stuff: 
1. http://famo.us/ 
2. https://github.com/Famous/famous 
3. https://github.com/thomasstreet/famous-a...
Спасибо за внимание! 
Alexander Kozhevin 
20 
https://www.facebook.com/alexander.polymath
Вопросы? 
21
Upcoming SlideShare
Loading in …5
×

of

Famous Slide 1 Famous Slide 2 Famous Slide 3 Famous Slide 4 Famous Slide 5 Famous Slide 6 Famous Slide 7 Famous Slide 8 Famous Slide 9 Famous Slide 10 Famous Slide 11 Famous Slide 12 Famous Slide 13 Famous Slide 14 Famous Slide 15 Famous Slide 16 Famous Slide 17 Famous Slide 18 Famous Slide 19 Famous Slide 20 Famous Slide 21
Upcoming SlideShare
Жизнь в изоляции
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

Famous

Download to read offline

Слайды доклада Александра Кожевина с MoscowJS 16

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Famous

  1. 1. Александр Кожевин front-end developer
  2. 2. Таблица Менделеева на famo.us: http://alexander-kozhevin.com/famous/ 2 2
  3. 3. 3
  4. 4. 4
  5. 5. 5
  6. 6. Главные проблемы: Рендеринг + Анимация 6
  7. 7. 1998 Рендеринг: Что мы хотим 7 Сегодня
  8. 8. Анимация: Чего мы хотим 8
  9. 9. Анимация: Что у нас есть? 9
  10. 10. 10
  11. 11. FAMO.US = PORTABLE RENDERING ENGINE 3D DOM Canvas WebGL iOS/Android/Kindle NO install NO download NO plugin PURE JavaScript SMALL footprint 11
  12. 12. Почему он так быстр? 12 > Render Tree < context var context = Engine.createContext(); modifier var chain = context.add(modifier); surface chain.add(surface);
  13. 13. Famo.us крутой потому, что: 1. Интеграция с MV* фреймворками 2. Физика 3. Набор View’ек 4. Touch события 13
  14. 14. 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
  15. 15. FAMO.US работает: 15
  16. 16. “Чистый” famo.us var backgroundSurface = new Surface({ size: [this.options.width, this.options.height], properties: { backgroundColor: 'black', boxShadow: '0 0 1px black' } }); 16
  17. 17. 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
  18. 18. 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
  19. 19. Let’s do cool stuff: 1. http://famo.us/ 2. https://github.com/Famous/famous 3. https://github.com/thomasstreet/famous-angular- examples 19
  20. 20. Спасибо за внимание! Alexander Kozhevin 20 https://www.facebook.com/alexander.polymath
  21. 21. Вопросы? 21
  • allfayn

    Oct. 27, 2014

Слайды доклада Александра Кожевина с MoscowJS 16

Views

Total views

1,052

On Slideshare

0

From embeds

0

Number of embeds

56

Actions

Downloads

2

Shares

0

Comments

0

Likes

1

×