Amazing UI with CSS and Anima.js

Transcript

1. Amazing UI with CSS and anima.js Yehor Lvivski @lvivski www.lvivski.com
2. Programmers love their code.
3. Languages •  Haskell, Scala, Erlang, Clojure •  Java, C#, Objective-C •  Ruby, Python, PHP •  Javascript
4. Patterns MVC 1970s MVVM 2010s ... MV* 2050s
5. VIEW
6. VIEW
10. Xerox PARC 1979
12. 35 years since 1979
17. Javascript + CSS
18. CSS has everything •  3Dtransforms •  Transitions •  Animations •  Events
19. CSS has limitations
20. CSS, Bad parts •  Not easy to stop animation once started •  You have to deal with percent •  Limited user control
21. anima.js github.com / lvivski / anima
22. Stats •  25kB (4kB minified and gziped) •  4 weeks of development •  2 week after public release •  ≈600 stargazers
23. Animation loop
24. API
25. API var  world  =  anima.js();   var  world  =  anima.css();   var  item  =  world.add(   document    .querySelector("div")   );   item.animate(...).css();  
26. .animate() item.animate({      translate:  [x,  y,  z],      duration:  500,      ease:  'ease-­‐in-­‐out-­‐quad',      delay:  100   })  
27. Method chaining item.animate(...)   .animate(...)   .animate(...)     .infinite()  
28. Parallel animations item.animate(  [   {      translate:  [x,  y,  z],      duration:  500   },  ...   ]  )  
29. How it works
31. Matrix matrix3d(    1,  0,  0,  0,      0,  1,  0,  0,        0,  0,  1,  0,        0,  0,  0,  1   )  
32. Scale & Translate matrix3d(      sX,    0,    0,  0,        0,  sY,    0,  0,        0,    0,  sZ,  0,      tX,  tY,  tZ,  1   )  
33. Rotate matrix3d(      cos(Y)cos(Z),      cos(X)cos(Z)      +sin(X)sin(Y)cos(Z),      sin(X)sin(Z)      -­‐cos(X)sin(Y)cos(Z),  0,      ...   )  
34. Multiply  
36. Decomposition
38. Matrix decomposition •  A×B≠B×A   •  scale×rotate×translate  
39. Pull Requests
40. Thanks @lvivski