Projektuj Animacje UI z Lottie Files i After Effects: Wprowadzenie do praktycznego projektu

0:00Cześć, Witam Cię w drugim rozdziale kursu.

0:02Przejdziemy teraz do bardziej złożonego i bardziej praktycznego projektu animacji,

0:07która wyląduje w sekcji Hero na stronie produktu.

0:11Hej, Alias hej alias kropka up.

0:15Tutaj widzimy taki kontenerem z interfejsem tej aplikacji i

0:20tutaj chciałem sam okupować jak działa ta aplikacja z animować po prostu

0:25za pomocą motion designu?

0:28Jak wygląda korzystanie z aplikacji?

0:29Alias Alias jest narzędziem AI opartym o model AI i pozwala na w dużym uproszczeniu

0:37wsparcie naszej pracy z pomocą sztucznej inteligencji.

0:41Automatyzuje naszą pracę, wykonuje za nas różne zadania, taski, oszczędza masę czasu

0:47i jest oczywiście w formie takiego chatbota, gdzie rozmawiamy za pomocą czatu

0:52ze sztuczną inteligencją.

0:54Dajemy jej zadanie, ona je wykonuje.

0:57I to jest oczywiście samo kupowane za pomocą takiej prostej animacji.

1:01Tutaj w tym miejscu w sekcji Hero na stronie Health Lab.

1:06Ja teraz odtworzy tą animację.

1:07Wystarczy, że odświeżę stronę.

1:09No i widzimy jak działa ta animacja.

1:11Widzimy tutaj kursor, który wybiera jednego z botów.

1:17Następnie wpisujemy tutaj komendę slash C.

1:21Kursor wybiera tutaj jakiś konkretny task, konkretną akcję.

1:25Następnie wpisujemy tekst, wysyłamy tekst do sztucznej inteligencji, a ona

1:31oczywiście nam tutaj odpowiada.

1:34I tak to się prezentuje właśnie w formie takiego czatu i

1:39będę chciał pokazać jak zrobić coś takiego w After Effects, jak zadbać o to, żeby

1:43to wszystko wyświetlało się poprawnie. Jak to?

1:46Oczywiście wyeksportować do LOD i.

1:49tak, żeby działało tak jak należy.

1:51Może nie będziemy animować całej tej konwersacji raz jeszcze skupimy się na

1:55takich bardziej newralgicznych elementach.

2:01I podobną animację możemy zobaczyć na landing Sigmy, czyli tutaj.

2:07W momencie kiedy jesteśmy na stronie Sigma Kropka com to widzimy właśnie taki

2:13miniaturowy interfejs Sigmy.

2:14Widzimy kursory, które coś wykonują, jakieś operacje, jakieś zadania.

2:19Dzięki temu możemy zobaczyć jakie możliwości ma firma.

2:23Widzimy, że tych kursorów jest kilka, więc jest to bardziej złożona animacja, gdzie

2:27widzimy jakby kilka kilka osób naraz pracowało nad jednym projektem, więc.

2:35Też bardzo.

2:36I też jest to bardzo fajny przykład wykorzystania lotni i oczywiście coś

2:41takiego teraz sobie zaprojektujemy.

2:45Myślę, że to wszystko w tej lekcji wprowadzającej.

2:48Ja będę chciał teraz przejść do przygotowania plików na potrzeby naszej

2:53pracy z After Effects i myślę, że możemy teraz przejść do

2:59krótkiej przerwy, a potem słyszymy ją w lekcji następnej.