Design organiczny Słów kilka o przyjemnych aplikacjach
Organiczny? WTF? Marcin Korniluk – Animacja organiczna2 blender axis-interactive.com
Co mamy teraz? Produkt ma być żywy Jabłkofony i Interfejs naturalny Marcin Korniluk – Animacja organiczna3
Co chcemy osiągnąć? Naturalne zachowanie Rozpoznawalność elementów Niski koszt $ Marcin Korniluk – Animacja organiczna4
Percepcja użytkownika Chwyt, przesunięcie i rzut Wszystko w świecie powodują siły Ruch z przyspieszeniem Tarcie Ruchy Browna i wiatr Marcin Korniluk – Animacja organiczna5
Założenia Marcin Korniluk – Animacja organiczna6 Nie pchamy się wszędzie Obsługa użytkownika Prosta fizyka Efekty graficzne Wartości z sufitu
Prosta fizyka Tarcie statyczne i dynamiczne Grawitacja Ruchy Browna i wiatr Punkt materialny Marcin Korniluk – Animacja organiczna7
Efekty graficzne Skalowanie + kolejność 3D Gradient wypukłość Cień rzucany nakładanie Powiększanie podnoszenie Marcin Korniluk – Animacja organiczna8
Wartości z sufitu Krok czasowy jest stały Metr/sekundę -> piksel/klatkę Percepcja vs poprawność Wydajność vs poprawność Marcin Korniluk – Animacja organiczna9 Jestem stałą Reynoldsa
Śnieżyca velx = 0; velr = 0; alpha = Math.random() * 100; xscale = yscale = Math.random() * ; y = 0; x = Math.random() * parent.width; onEnterFrame = function() { velr += Math.random() * 2 - 1; velr *= 0.9; rotation += velr; velx += (Math.random() * 2 - 1) / 10; velx *= 0.99; x += velx; y += xscale / 100; }; Marcin Korniluk – Animacja organiczna10
Twitter layout Tablet Pływające menu Prawo Hooka Tarcie Stos kart Marcin Korniluk – Animacja organiczna11
Antyprzykład kontrolki Animacja w jednym kierunku 3 style animacji 3 style elementów niedopasowanie Marcin Korniluk – Animacja organiczna12
Przykład WWW Marcin Korniluk – Animacja organiczna13 2advanced.com
Antyprzykład WWW Marcin Korniluk – Animacja organiczna14 start-the-change.org
Zastosowania UI mobile Menu, reklamy, WWW Elementy gier niezależne od gracza Marcin Korniluk – Animacja organiczna15