Animista<\/a> wiele mo\u017cna zrobi\u0107, aby u\u0142atwi\u0107 projektowanie stron internetowych w oparciu o CSS; w\u0142a\u015bciwie do tego stopnia, \u017ce b\u0119dzie opiera\u0107 si\u0119 na klikaniu. Chcesz wiedzie\u0107 jak?<\/p>\nAnimista – cudowne narz\u0119dzie do tworzenia i testowania CSS na bie\u017c\u0105co!<\/h2>\n
Animista to miejsce, w kt\u00f3rym mo\u017cesz bawi\u0107 si\u0119 kolekcj\u0105 gotowych animacji CSS, dostosowywa\u0107 je i zapisa\u0107 tylko te, kt\u00f3rych faktycznie chcesz u\u017cy\u0107. To jest jak supermarket dla animacji CSS. Odwiedzasz, modyfikujesz i bawisz si\u0119, rozwa\u017casz opcje i wybierasz tre\u015b\u0107, kt\u00f3r\u0105 lubisz. Narz\u0119dzie online zawiera znaczn\u0105 liczb\u0119 animacji, kt\u00f3re zosta\u0142y zorganizowane w sensowny i przyst\u0119pny spos\u00f3b, aby mo\u017cna je by\u0142o \u0142atwo ponownie wykorzysta\u0107 w r\u00f3\u017cnych projektach. To, co zacz\u0119\u0142o si\u0119 jako ma\u0142y osobisty projekt dla projektanta stron internetowych, ukszta\u0142towa\u0142o si\u0119 na tym internetowym placu zabaw, kt\u00f3ry zawiera kolekcj\u0119 gotowych animacji, kt\u00f3re mo\u017cna testowa\u0107 za pomoc\u0105 r\u00f3\u017cnych opcji, takich jak u\u0142atwienie, op\u00f3\u017anienie, czas trwania i inne. Gdy u\u017cytkownik jest zadowolony z dokonanych wybor\u00f3w, wystarczy, \u017ce zapisze kod animacji i zrobione. Praca, kt\u00f3ra zaj\u0119\u0142aby wiele godzin, aby bada\u0107, tworzy\u0107 i testowa\u0107, \u015bci\u015bni\u0119ta w dzie\u0142o minut \u2013 Animista jest dla Ciebie!<\/p>\n
Najlepsze cechy tego narz\u0119dzia w skr\u00f3cie:<\/p>\n
\n- Generuje kod animacji CSS jednym klikni\u0119ciem<\/li>\n
- Zawiera wst\u0119pnie zaprojektowane mechanizmy, takie jak slajdy, transformacje, obroty, animacje zrzutu cienia i wiele innych<\/li>\n
- Obs\u0142uguje eksport generowanego kodu<\/li>\n
- Pliki do pobrania oparte na API FileSystem HTML5 obs\u0142ugiwane w przegl\u0105darce Chrome<\/li>\n<\/ul>\n
Teraz zacznijmy si\u0119 bawi\u0107!<\/p>\n
Tak to dzia\u0142a<\/h2>\n
Strona g\u0142\u00f3wna narz\u0119dzia jest troch\u0119 zagmatwana, ale mo\u017cna to r\u00f3wnie\u017c postrzega\u0107 jako oznak\u0119 wyj\u0105tkowo\u015bci. Kiedy odwiedzasz t\u0119 stron\u0119, wszystko, co zobaczysz w nazwie narz\u0119dzia i przycisk “Spr\u00f3buj mnie” (\u2018Try Me\u2019) obok. To jest to! Bez pask\u00f3w przewijania, bez menu, bez stopek, bez niczego. Przez chwil\u0119 zaczynasz zastanawia\u0107 si\u0119, czy strona zosta\u0142a za\u0142adowana poprawnie lub czy niekt\u00f3re elementy wci\u0105\u017c oczekuj\u0105. Gdy zorientujesz si\u0119, \u017ce musisz klikn\u0105\u0107 “Spr\u00f3buj mnie” (\u2018Try Me\u2019), aby kontynuowa\u0107, wyl\u0105dujesz w panelu sterowania narz\u0119dzia. I wszystko natychmiast stanie si\u0119 jasne.<\/p>\n
![\"Animista](\"\/\/super-monitoring.com\/blogpl\/wp-content\/uploads\/2017\/11\/animista1.png\")
<\/p>\n
Oto dzia\u0142anie narz\u0119dzia wyja\u015bnione krok po kroku:<\/p>\n
\n- Zamiast czarnego pola na \u015brodku ekranu wybierz obiekt, na kt\u00f3ry maj\u0105 wp\u0142yw animacje. W tym celu kliknij menu rozwijane o nazwie “wybierz obiekt” (\u201dselect object\u201d) w sekcji Opcje po lewej stronie (wypr\u00f3buj obiekt 3D karty (odwr\u00f3cenie poziome))<\/li>\n
- Przegl\u0105daj opcje animacji wy\u015bwietlane w k\u00f3\u0142kach na g\u00f3rze i korzystaj z r\u00f3\u017cnych opcji, takich jak u\u0142atwienie, op\u00f3\u017anienie, czas trwania itd. Powiniene\u015b by\u0107 w stanie zobaczy\u0107, jak wp\u0142ywaj\u0105 one na animacj\u0119 na poczekaniu<\/li>\n
- Mo\u017cesz zmieni\u0107 atrybuty animacji w sekcji Opcje po lewej stronie. Natychmiast wy\u015bwietl\u0105 si\u0119 wyniki<\/li>\n
- Gdy zobaczysz co\u015b, co Ci si\u0119 podoba, kliknij ikon\u0119 “serca” (\u2018heart\u2019) w prawym g\u00f3rnym rogu panelu animacji. Gdy to zrobisz, kilka opcji b\u0119dzie dost\u0119pnych w prawym g\u00f3rnym rogu ekranu.<\/li>\n
- Powtarzaj, a\u017c b\u0119dziesz zadowolony z wyboru. Mo\u017cesz zobaczy\u0107 swoje ulubione animacje w dowolnym momencie, naciskaj\u0105c przycisk “Lejek” (\u201dFunnel\u201d) lub klikaj\u0105c przycisk “Kosz” (\u201dTrash\u201d), aby rozpocz\u0105\u0107 od pocz\u0105tku.<\/li>\n
- Kiedy b\u0119dziesz gotowy, przejd\u017a do ekranu pobierania, klikaj\u0105c przycisk “Pobierz” (\u2018Download\u2019) lub link pobierania w g\u0142\u00f3wnej nawigacji. Je\u015bli u\u017cywasz przegl\u0105darki Chrome, kliknij przycisk pobierania i sprawd\u017a folder pobierania. Je\u015bli wszystko posz\u0142o dobrze, plik \u2018animista.css\u2019 powinien tam by\u0107.<\/li>\n
- Alternatywnie, mo\u017cesz wygenerowa\u0107 kod dla animacji, klikaj\u0105c ikon\u0119 “nawiasy klamrowe” (\u201dcurly braces\u201d) w g\u00f3rnym prawym rogu panelu animacji. Gdy zobaczysz kod, po prostu go skopiuj i wklej do ulubionego edytora kodu.<\/li>\n<\/ul>\n
Co lubimy i co nale\u017cy poprawi\u0107<\/h2>\n
Nie trzeba dodawa\u0107, \u017ce narz\u0119dzie, kt\u00f3re oferuje tak\u0105 elastyczno\u015b\u0107, r\u00f3\u017cnorodno\u015b\u0107 opcji i \u0142atwo\u015b\u0107 u\u017cycia, a tak\u017ce jest bezp\u0142atne, jest oczywistym zwyci\u0119zc\u0105. Jednak Animista ma wiele do poprawienia. Obejmuje to bezpo\u015brednie wsparcie pobierania dla przegl\u0105darek innych ni\u017c Chrome, wi\u0119cej opcji obiekt\u00f3w i kr\u00f3tkie wyja\u015bnienie tego, co dok\u0142adnie robi\u0105 r\u00f3\u017cne opcje po lewej stronie (w wi\u0119kszo\u015bci jest to teraz poszukiwanie dla pocz\u0105tkuj\u0105cych).<\/p>\n
![\"Animista\"](\"\/\/super-monitoring.com\/blogpl\/wp-content\/uploads\/2017\/11\/animista.png\")
<\/a><\/p>\n