podczas gdy wielu może spierać się o znaczenie bogatych mediów w e-bookach, bez wątpienia wszelkiego rodzaju animacje są bardziej atrakcyjne dla czytelników niż statyczne obrazy. Pomysł tworzenia animacji może być onieśmielający dla autorów. Nie chodzi o wyniki – chodzi o to, co jest wymagane, aby to się stało. Może być brzydko. Albo gorzej: drogie.

w naszej podróży do tworzenia interaktywnych e-booków dla innych zdaliśmy sobie sprawę z potęgi animacji i wykorzystaliśmy ją w wielu ebookach. Taki bardzo drobny dodatek do obrazu może naprawdę wywrzeć ogromny wpływ na twój ebook i bez wątpienia wyróżnić się na tle innych.

prawdziwym wyzwaniem jest znalezienie wydajnego i łatwego sposobu tworzenia animacji. W tym artykule omówimy technologie animacji w e-bookach, a następnie przyjrzymy się kilku stosunkowo łatwym do wytworzenia technikom animacji z jasnymi przykładami.

rodzaje animacji

aby uzyskać szybkie wprowadzenie, animacje można tworzyć na różne sposoby. Mogą być tak złożone (i czasochłonne) jak animacje klatka po klatce. Oznacza to, że rysowanie oddzielnego obrazu dla każdego ułamka sekundy. Bardziej interesuje nas tweening (skrót od In-betweening). Poprzez animację określasz stan początkowy i końcowy animacji, a reszta jest automatycznie generowana przez komputer. Możesz również określić funkcję luzowania, aby zastosować niektóre efekty prędkości, takie jak przyspieszenie, elastyczność, odbijanie itp. Oto pełna lista funkcji ułatwiających.

w jaki sposób animacje osadzone są w ebooku? Ponieważ podstawową technologią EPUB jest HTML, oto opcje:

1. animowany obraz GIF
2. animacje SVG
3. film Flash
4. animacja CSS
5. widget strony

ta lista nie ma cię przestraszyć, ale zbadać możliwości techniczne dostępne dla ciebie. Ale uprośćmy tę listę. Animowane obrazy GIF wymagają specjalnego oprogramowania (np. Photoshopa), a rozmiary plików animacji są zazwyczaj bardzo duże. Animacje SVG obsługują tylko grafikę wektorową i wymagają tło programistyczne do tworzenia. Flash jest przestarzały i nie będzie obsługiwany na czytnikach takich jak Apple iBooks, nie mówiąc już o urządzeniach mobilnych. Pozostawia nam to animacje CSS i widżety stron. Oboje są w zasadzie bratem i siostrą. Zamiast stosować animacje CSS bezpośrednio na stronie, widżety strony stosują CSS przez iframe (okno). Wolimy używać widżetów strony, ponieważ lepiej jest zorganizować całą animację w jednym pliku.

oprogramowanie do animacji

jeśli chodzi o oprogramowanie, Google Web Designer to proste i bezpłatne oprogramowanie do tworzenia animacji. Google Web Designer koncentruje się na tworzeniu animowanych banerów i reklam HTML5 dla stron internetowych i urządzeń mobilnych. Odkryliśmy, że nie potrzebujesz niczego bardziej zaawansowanego do tworzenia szybkich animacji.

podstawowy przepływ pracy w Google Web Designer jest następujący:

1. Importuj każdy ze swoich obrazów, które mieszczą się w oddzielnych warstwach
2. dla każdej warstwy określ ramki kluczowe i wybierz funkcje ułatwiające
3. Eksportuj jako pakiet zip

wyeksportowany plik to widżet strony gotowy do dodania do twojej strony aby uzyskać więcej informacji na temat dodawania widżetów stron do e-booka, zapoznaj się z naszym artykułem na temat widżetów książek.

techniki animacji

know-how to za mało, aby tworzyć efektowne animacje. Liczy się to, jak go użyjesz. Podobnie jak nauka korzystania z pieca, nie musi oznaczać, że wkrótce będziesz gotować Blanquette de Veau. Najpierw musisz nauczyć się kilku przepisów. Spójrzmy więc na różne (i łatwe) przepisy, aby zastosować animacje.

Pływający obraz

jest to najprostsza forma animacji. Obraz, który porusza się w różnych kierunkach (może się również obracać). I chociaż myślisz, że to nie przyniesie nic nowego do stołu, mylisz się. W zależności od tego, jak naturalne są ruchy, zdziwiłbyś się, ile życia może przynieść twojemu ebookowi i zachęcić czytelników. Najlepszą rzeczą w tego typu animacji jest to, że można ją zastosować do dowolnego aktualnego obrazu, bez dodatkowych zasobów. Zalecamy, aby obraz miał białe tło, aby animacja połączyła się z tłem (zakładając, że tło jest białe). Oto przykład z interaktywnego ebooka, który stworzyliśmy o ptakach.

oto inne przykłady z tylko podstawową rotacją. Zastosowanie odpowiedniego czasu może dać bardzo wiarygodny efekt.

tego typu animacje znajdziesz w całej sieci. Na przykład pod tym linkiem znajdziesz inny przykład pływającego obrazu, który nam się spodobał (przejdź do sekcji wywoływanie wspomnień, aby zobaczyć pływające ropuchy astronautów). Aby dodać trochę złożoności, możesz mieć inny obraz, który znajduje się z tyłu, naprawiony w pozycji. Podobnie:

przekształcanie obrazu

podobne do tego drugiego, ale zamiast przesuwać obraz, przekształcasz go. Obsługiwane przekształcenia w CSS3 to skalowanie, pochylenie i Obrót 3D. Będziesz musiał być bardzo selektywny w odniesieniu do obrazów, do których zastosujesz transformacje. Zła transformacja może sprawić, że sprawy będą wyglądać dziwnie. W naszym interaktywnym ebooku przedstawiamy kombinację skośnych i trójwymiarowych przekształceń obrotowych zastosowanych do ptaka.

komponenty przejściowe

zróbmy krok dalej. W przypadku tego typu animacji obraz jest podzielony na podobrazy. Z pustego ekranu każdy obraz podrzędny tworzy własne wejście z różnych kierunków, ostatecznie kończąc na ukończeniu oryginalnego obrazu. Cokolwiek zrobisz, to nigdy nie będzie wyglądało źle. Na pewno będzie dobrze wyglądać, ale może wyglądać lepiej. Wybór podobrazów i ich przejścia decydują o atrakcyjności animacji dla czytelników. Możesz zapętlić tę animację, przechodząc pod-obrazy z powrotem poza ekran.

wykresy i wykresy

jeśli tworzysz e-booki z raportami lub statystykami, być może się to przyda. Pewnie myślisz, że zobaczysz coś niezwykle złożonego. To zupełne przeciwieństwo. Przy minimalnym wysiłku i prostym know-how możesz animować wykresy za pomocą odrobiny magii i sprawić, że czytelnicy pomyślą, że to była masa pracy. Wiele animacji rzeczywiście istnieje w ten sposób-twoje oczy oszukują twój umysł, aby zrozumieć coś, gdzie w rzeczywistości jest to znacznie prostsze.

więc pomysł animowania wykresów i Wykresów jest następujący. Zaimportujesz wykres / wykres jako obraz do Google Web Designer. Na powyższej warstwie utworzysz białe pudełko. Zostanie to wykorzystane do uzyskania efektu maskowania. Początkowo białe pole pojawi się na górze wykresu/wykresu, z wyjątkiem poziomej & osi pionowej. Będziesz przesuwał białe pudełko pionowo w górę, aby odkryć, co jest ukryte pod spodem. Oczy czytelnika zmuszą go do przekonania, że kraty są tym, co rośnie w górę od dołu, gdzie w rzeczywistości są po prostu ujawniane. Jeśli chcesz zapętlić animację, możesz przenieść białe pole z powrotem w dół, aby ponownie ukryć Wykres. Przy odpowiednim czasie to po prostu uwiedzie Twoich czytelników. Przejdźmy do kilku przykładów, dobrze? Oto bardziej złożony przykład, w którym dodatkowe obrazy zostały animowane wraz z białym pudełkiem, jak czapka dla pasków.

podsumowanie

w tym artykule przyjęliśmy ogólne pojęcie o tym, jak animacje działają w ebookach i jakie są ich technologie. Widzieliśmy cztery proste techniki / sztuczki, które można szybko zastosować do obrazów e-booków, bez poświęcania zbyt dużo czasu na przepływ pracy. Wszystko sprowadza się do trochę czasu konfiguracji, aby zainwestować w podstawy Google Web Designer. W innym poście przyjrzymy się bliżej Google Web Designer i dziecięcym krokom, aby stworzyć swoją pierwszą animację.

w międzyczasie zacznij animować!

Możesz również cieszyć się:

5 hacków do tworzenia bardziej angażującego ebooka

Cool Trick: tworzenie dynamicznych nazw postaci w ebookach

jak utworzyć interaktywny ebook: przewodnik krok po kroku

jak zoptymalizować Filmy i dodać je do ebooka

Ebook autorski przewodnik po obrazkach