Wprowadzenie do animacji CSS3
WYSIWYG Web Builder 9/10/11 posiada wbudowane wsparcie dla animacji CSS3. Animacje są obsługiwane przez wszystkie nowoczesne przeglądarki będą pracować w Firefox / Safari / Opera / Chrome / IE10 ale nie w Internet Explorer 9 lub starszej!
Animacja w CSS3 to efekt, który pozwala elementem stopniowo zmieniać się od jednego stylu do drugiego bez użycia JavaScript lub Flash.
Efekty mogą być stosowane do szerokiej gamy właściwości CSS, w tym background-color, width, height, opacity, transforms (obracanie, pochylanie, skala,translate) i wiele innych. Menadżer Animacji  może być używany do definiowania animacji. Animacje te mogą być przypisane do obiektu w CSS3 we  Właściwoścach Obiektu -> Sekcja Animacja .
Animacje Obecnie można zastosować do następujących obiektów:
• Obraz
• Narzędzia do rysowania: Shape, clip art, tekst art, krzywe, wielokąt, linia, Baner
• Elementy Formularzy: Przycisk, Combobox, Editbox, Etykiety
• Marquee
• Tekst
• Warstwa
Należy zauważyć, że w zasadzie można umieścić dowolny obiekt na warstwie, dzięki czemu możliwe jest animowanie innych dowolnych obiektów.
Możliwe jest również powiązanie animacji ze stylem (w Menedżerze Stylów). To sprawi, że możliwe jest dynamiczne przydzielenie animacji wejściowej dla obiektu (poprzez Zdarzenia -> Ustawienia stylu).
Menedżer Animacji
Menadżer Animacji może być wykorzystany do określenia animacji (na podstawie ramek kluczowych). Zawarliśmy kilka przykładowych animacji, które pomogą Ci zacząć zabawę z animowaniem obiektów.

UWAGA!:
Nie wszystkie animacje są użyteczne dla wszystkich obiektów. Na przykład zastosowanie animacji koloru tła dla obrazka nie będzie użyteczne gdyż nie posiada on takiego atrybutu, również nie zadziałają animacje przypadku obiektów które posiadają  wartości przypisane jako stałe. Jeśli chcesz ożywić rozmiar lub położenie obiektu, to lepiej użyć transformacji. Więcej szczegółów w przykładach.

Pierwszym krokiem w tworzeniu animacji jest zdefiniowanie "klatek kluczowych. Kluczowym punktem jest ramka, która określa początek i koniec przejścia. Najbardziej prosta animacja będzie mieć dwie klatki kluczowe - jedną na początku (0%) i jedną na końcu (100%) natomiast bardziej złożone animacje będą miały więcej klatek kluczowych pomiędzy 0%.- 100%
W kluczowym ramkach ustawiana jest wartość (w procentach) w czasie trwania animacji. Musisz podać co najmniej dwie klatki kluczowe (0%, i 100%), ale możesz ich ustawić  ile chcesz. Każda klatka kluczowa definiuje właściwość (i wartość), która jest stosowana do elementu na określonym etapie animacji.
Przykład:
Pierwsza klatka kluczowa: 0% -> kolor tła # 000000
Ostatnia klatka kluczowa: 100% -> kolor tła #FFFFFF
Te ustawienia spowodują  animowanie koloru tła obiektu od czarnego do białego.
Należy zauważyć, że czas animacji jest określany we właściwościach obiektu, a nie w samej animacji. W ten sposób można ponownie wykorzystać animację dla różnych obiektów o różnych ustawieniach taktowania.
Przypisanie animacji do obiektu

Objekty które obsługują animacje CSS3 posiadają kartę animacji w ich właściwościach. Tutaj można wybrać animację i ustawić czas.

Animacja
Określa animację (każdą utworzoną w Menedżerze Animacji) która będzie zastosowana do obiektu. Standardowo animacja rozpoczyna się automatycznie po załadowaniu strony.

Duration (Trwanie)
Określa czas trwania animacji w milisekundach.

Opóźnienie (Delay)
Opóźnienie powoduje, że animacja rozpocznie się po określonym czasie oczekiwania (w milisekundach).
Zauważ, że opóźnienie nie wystąpi podczas kolejnych powtórzeń animacji. Będzie ono wykorzystywane tylko dla pierwszej iteracji animacji.

Licznik iteracji (Iteration count)
Można skonfigurować ile razy chcesz wykonać daną animację, ustawienie wartości -1  powoduje powtarzanie w nieskończoność.

Kierunek (Direction)
Ustawienie normal  odtworzy animację od początku do końca, reverse odtworzy animację od końca do początku (od tyłu), alternate =  normal +reverse , a alternate-reverse =  everse + normal  .
Timing
Funkcja timing określa krzywą animacji.
Krzywa prędkości określa jak się będzie zmieniać animacja od jednego zestawu  do drugiego. Krzywa prędkości ma wpływ na płynność animacji (zobacz przykład). Funkcja timing wykorzystuje funkcję matematyczną, zwaną krzywą Beziera.

Tryb realizacji (Fill Mode)
Definiuje jak style są stosowane do celu swoich animacji CSS poza samą animacją.
Domyślnie animacje CSS nie wpłynie na właściwości obiektu jesteś animowanie dopóki pierwsza klatka kluczowa jest odtwarzany, a następnie zatrzyma wpływając raz
ostatnia klatka kluczowa została zakończona.
W niektórych przypadkach może chcesz właściwości zostać dotknięte przed rozpoczęciem animacji lub po jej zakończeniu. Na przykład, jeśli zacznie się animacja
ukryty lub z innym nieprzejrzystości. Następnie można wybrać "do przodu", "wstecz" lub "równocześnie".

Stan Otwarcia (Play State)
Ta opcja określa jej stan początkowy czy animacja jest uruchomiona lub zatrzymana.
Przykład: Dodanie animacji obracania  dla obiektu Kształt.
Krok 1
Dodaj obiekt kształt  na stronę.
Krok 2
Dwukrotnie kliknij obiekt kształt, aby otworzyć jego właściwości i wybierz zakładkę animacji CSS3.
Krok 3
Ustaw animację "'transform-rotate" i czas na 2500 (2,5 sekundy).
Krok 4
Użyj Podglądu lub opublikuj stronę. Poniższy kształt jest animowany z róznymi kierunkami kolejno od lewej: normal , reverse ,alternate , alternate-reverse , przy czym ostatni obrazek ma ustawione w opcji timing :ease-int-out, pozostałe mają tę opcje ustawioną jako liniową.


na podstawie : http://www.wysiwygwebbuilder.com/animation.html
Wyjście
---Home------Download------Zakup------Poradniki Online------Szablony------Wsparcie------Forum------Rozszerzenia------Manual------Rózne---
Copyright © 2017