Kurs Rive: Menu Główne

Czego się nauczysz

Płynna obsługa interfejsu Rive w trybie Design oraz Animate.

Tworzenie i edycja grafik wektorowych, gradientów oraz masek.

Budowanie poprawnej hierarchii warstw i responsywnych układów (padding/margins).

Animowanie dowolnych właściwości obiektów na osi czasu.

Praca z klatkami kluczowymi i interpolacją ruchu dla płynnych efektów.

Projektowanie nowoczesnych elementów UI (efekty rozmycia i frosted glass).

Tworzenie mikro-interakcji, takich jak stany hover czy reakcje na kliknięcie.

Obsługa State Machine – budowanie logiki bez pisania kodu.

Konfiguracja wyzwalaczy (triggers) i warunków sterujących animacją.

Poprawne wdrożenie gotowych plików Rive do Framera oraz Webflow.

Kurs Rive - Podstawy Pracy

Czy statyczne projekty przestają Ci wystarczać? Ten kurs to Twoja przepustka do świata Rive – rewolucyjnego narzędzia, które zaciera granicę między designem a programowaniem. W trakcie szkolenia przeprowadzę Cię krok po kroku przez interfejs aplikacji, ucząc płynnego poruszania się między trybami Design i Animate. Nie będziemy tworzyć "pustych" obrazków – nauczysz się projektować funkcjonalne elementy interfejsu, takie jak przyciski z efektem hover czy przełączalne panele. Dowiesz się, jak tworzyć precyzyjne wektorowe layouty, importować bitmapy i nadawać im życie, tworząc animacje, które są nie tylko efektowne, ale i w pełni gotowe do wdrożenia na strony www i do aplikacji.

Fundamenty projektowania i wektorowa precyzja

Rozpoczniemy od solidnych podstaw, poznając środowisko pracy w trybie Design. Nauczysz się rysować i edytować obiekty wektorowe, wykorzystując pełen potencjał węzłów, gradientów oraz właściwości takich jak obrys czy rozmycie. Zrozumiesz, jak zarządzać hierarchią na warstwach, grupować elementy i dbać o porządek w projekcie poprzez odpowiednie nazewnictwo. Pokażę Ci również zaawansowane techniki maskowania i kadrowania, które pozwalają na uzyskanie nietypowych kształtów, a także nauczę Cię budować responsywne układy z wykorzystaniem marginesów i paddingu.

Wprawianie projektu w ruch – tryb Animate

Gdy opanujesz design, przejdziemy do trybu Animate, gdzie poznasz zupełnie nowy zestaw narzędzi dedykowanych ruchowi. Zrozumiesz logikę osi czasu (Timeline) i nauczysz się animować niemal każdą właściwość obiektu stworzonego wcześniej – od zmiany skali i koloru wypełnienia, po dynamiczną edycję obrysu. Skupimy się na technikach stawiania klatek kluczowych (keyframes) oraz interpolacji, aby ruch był płynny i naturalny. W tym module stworzysz też swoją pierwszą interakcję, która będzie reagować na kliknięcie myszką.

Projekt praktyczny: Interfejs z kodem QR

Teorię zamienimy w praktykę, wracając do trybu Design, aby zbudować kompletny element interfejsu: panel z kodem QR oraz przyciskiem aktywującym jego wysuwanie. Wykorzystasz zdobytą wiedzę, aby stworzyć estetyczny projekt wzbogacony o nowoczesne efekty wizualne, takie jak "frosted glass" (efekt mrożonego szkła) i rozmycia. Przygotujemy kilka niezależnych osi czasu dla różnych stanów animacji – w tym osobne sekwencje dla efektu hover oraz momentu aktywacji panelu.

State Machine – logika bez linijki kodu

To tutaj dzieje się prawdziwa magia Rive. W tym rozdziale poznasz State Machine – potężny moduł, który wyróżnia tę aplikację na tle konkurencji. Nauczysz się budować logikę interakcji bez konieczności programowania. Pokażę Ci, jak "pospinać" przygotowane wcześniej osie czasu za pomocą systemu warunków (conditions), wyzwalaczy (triggers) i inputów. Dzięki temu użytkownik będzie mógł realnie sterować Twoją animacją – np. chować lub wyświetlać kod QR za pomocą kliknięć, a wszystko to będzie działać płynnie i zgodnie z zaprojektowaną przez Ciebie logiką.

Wdrożenie: Od Rive do Framer i Webflow

Tworzenie animacji to nie wszystko – liczy się efekt końcowy na stronie. Choć Rive jest wykorzystywane nawet w grach na iOS czy Android, my skupimy się na wdrożeniu webowym. Pokażę Ci, jak eksportować gotowy komponent i zaimplementować go na stronie stworzonej we Framerze, który świetnie "rozumie" pliki Rive. Następnie zmierzymy się z Webflow. Dowiesz się, jak obejść ograniczenia tego narzędzia dotyczące wektorowych efektów blur, wykorzystując techniki pracy z obiektami bitmapowymi (PNG z przezroczystością), aby Twoja animacja wyglądała perfekcyjnie na każdej platformie.

Dla kogo jest ten kurs?

Ten kurs jest kompletnym przewodnikiem dla UI/UX Designerów dążących do samodzielnego tworzenia zaawansowanych mikro-interakcji oraz w pełni funkcjonalnych prototypów high-fidelity. Materiał stanowi potężne wsparcie dla twórców No-Code, którzy chcą wzbogacić strony we Framerze czy Webflow o lekkie i interaktywne elementy, wykraczające poza standardowe możliwości plików Lottie. To także doskonała ścieżka rozwoju dla grafików pragnących zrozumieć logikę animacji interfejsowych i dodać nową kompetencję do portfolio, jak i dla początkujących entuzjastów ruchu, dla których After Effects jest zbyt złożonym narzędziem do projektów webowych. Program ten jest wreszcie odpowiedzią na potrzeby doświadczonych Motion Designerów, którzy szukają sposobu na wejście w świat animacji webowych i tworzenie złożonych interakcji bez konieczności nauki programowania.

Kurs Rive: Menu Główne

Czego się nauczysz

Kurs Rive - Podstawy Pracy

Fundamenty projektowania i wektorowa precyzja

Wprawianie projektu w ruch – tryb Animate

Projekt praktyczny: Interfejs z kodem QR

State Machine – logika bez linijki kodu

Wdrożenie: Od Rive do Framer i Webflow

Dla kogo jest ten kurs?

Kurs Rive

Wprowadzenie

Interfejs

Maskowanie i layout

Wprowadzenie do animacji

Praktyczna animacja

Akcja interakcja

Wdrożenie

Zakonczenie

Ten kurs jest w bazie eduweb

Autor kursu

Bio

Inne kursy tego autora