Komponent Efekt graficzny

Tego komponentu nie można używać w reklamach AMP HTML, reklamach wideo ani reklamach graficznych.

Komponent Efekt graficzny umożliwia stosowanie do obrazu (a w niektórych przypadkach do pary obrazów) różnych efektów wizualnych opartych na języku JavaScript, takich jak Przed i po, Oddech, Skaner i Fala.

Image Effect component - Google Web Designer

Aby użyć komponentu Efekt graficzny:

1. Otwórz panel Komponenty, a potem folder Grafika i efekty.

2. Kliknij dwukrotnie komponent Efekt graficzny  lub przeciągnij go na scenę.

3. Kliknij dwukrotnie komponent na scenie lub kliknij przycisk Ustawienia… w panelu Właściwości. Otworzy się okno Efekty graficzne.

4. Przeciągnij obraz na scenę lub kliknij Wybierz obrazy, by wybrać obraz.

5. Wybierz typ efektu graficznego z menu w panelu Właściwości.

6. Niektóre typy efektów wykorzystują dwa obrazy. Możesz wybrać dodatkowy obraz z Biblioteki lub przejrzeć system plików, by zaimportować plik graficzny.

7. Dostosuj efekt, edytując jego właściwości (opisane poniżej).

Właściwości

Wraz z właściwościami całego komponentu możesz skonfigurować właściwości każdego zawartego w nim efektu.

Właściwości komponentu Efekt graficzny

Właściwość	Opis
Nazwa	Ustawia nazwę komponentu Efekt graficzny.
Skalowanie	Określa, jak obrazy o różnych rozmiarach są wyświetlane w komponencie. Więcej informacji Zmień rozmiar obrazu, by dopasować Przytnij obraz, by wypełnić Brak Rozciągnij obraz, by wypełnić
Ustaw limit animacji	Po zaznaczeniu tej opcji automatyczne odtwarzanie animacji zatrzymuje się po określonym czasie trwania w sekundach.

Właściwości poszczególnych typów efektu

Właściwości różnych typów efektu są dostępne w oknie Efekty graficzne. Otwórz okno, klikając dwukrotnie komponent Efekty graficzne na scenie lub klikając Ustawienia… w panelu Właściwości, a następnie wybierz typ efektu, by zobaczyć jego właściwości.

Brak

Do obrazu nie zostanie zastosowany żaden efekt.

Przed i po

Efekt Przed i po powoduje stopniowe odkrywanie obrazu znajdującego się pod innym obrazem, od jednej krawędzi do drugiej i z powrotem.

  

Właściwość	Opis
Obrazy
Podstawowy	Obraz widoczny nad separatorem lub na lewo od niego. Użyj przycisku Zamień obrazy , by zamienić miejscami obraz podstawowy i odkryty.
Odkryty	Obraz widoczny pod separatorem lub na prawo od niego. Użyj przycisku Zamień obrazy , by zamienić miejscami obraz odkryty i podstawowy.
Separator
Kąt	Kąt linii podziału między dwoma obrazami, wynoszący od 0 do 180 stopni. Domyślna wartość to 90 (linia pionowa).
Wtapianie	Stopień rozmycia krawędzi obrazów wzdłuż separatora. 1 oznacza wyraźne przejście, a większe wartości powodują rozmycie krawędzi.
Interakcja	Zaznaczenie pola Podążaj za myszą powoduje, że separator podąża za kursorem myszy.
Animacje
Autoodtwarzanie	Zaznaczenie opcji Autoodtwarzanie powoduje automatyczne odtworzenie animacji po wczytaniu komponentu.
Stan początkowy
Pozycja	Pozycja separatora w chwili rozpoczęcia animacji.
Opóźnienie	Czas do rozpoczęcia autoodtwarzania w sekundach.

Oddech

Efekt Oddech powoduje elastyczne rozszerzanie i kurczenie się obrazu.

   

Właściwość	Opis
Obrazy
Podstawowy	Obraz, do którego chcesz zastosować efekt.
Oddech
Szybkość	Szybkość animacji. 0 oznacza brak animacji, a wyższe wartości powodują jej szybsze odtwarzanie.
Efekt poziomy
Rozciągnięcie	Zakres poziomego rozwinięcia obrazu.
Zmniejszenie	Zakres poziomego zmniejszenia obrazu.
Efekt pionowy
Rozciągnięcie	Zakres pionowego rozciągnięcia obrazu.
Zmniejszenie	Zakres pionowego zmniejszenia obrazu.
Czas wstrzymania
Rozciągnięcie	Czas (w sekundach), przez jaki obraz pozostaje w pełni rozciągnięty.
Zmniejszenie	Czas (w sekundach), przez jaki obraz pozostaje w pełni zmniejszony.
Krzywe
Poziome	Liczba krzywych utworzonych przez zniekształcenia poziome.
Pionowe	Liczba krzywych utworzonych przez zniekształcenia pionowe.

Skaner

Efekt Skaner powoduje wyświetlenie odpowiadającej części drugiego zdjęcia w eliptycznym obszarze ostrości.

  

Właściwość	Opis
Obrazy
Podstawowy	Obraz wyświetlany poza obszarem ostrości. Użyj przycisku Zamień obrazy , by zamienić miejscami obraz podstawowy i odkryty.
Odkryty	Obraz widoczny w obszarze ostrości. Użyj przycisku Zamień obrazy , by zamienić miejscami obraz odkryty i podstawowy.
Ostrość
Promień	Promień obszaru ostrości wzdłuż osi X i Y. Użyj przycisku Zablokuj współczynnik promienia , by zachować współczynnik proporcji podczas zmiany promienia.
Wtapianie	Poziom rozmycia krawędzi obszaru ostrości. 1 oznacza wyraźną krawędź obszaru ostrości, a większe wartości powodują rozmycie jego krawędzi.
Efekt	Zaznaczenie pola Pozostaw odkryte powoduje, że odkryty obraz pozostaje widoczny po przesunięciu obszaru ostrości.
Animacje
Autoodtwarzanie	Wzorzec ruchu obszaru ostrości. Wędrówka (domyślny) – obszar ostrości przesuwa się po obrazie w sposób losowy, zmieniając kierunek tak, by pozostać na obrazie. Wędrówka otaczająca – obszar ostrości przesuwa się po obrazie losowo, a gdy dotrze do krawędzi, pojawia się po przeciwnej stronie obrazu. Okrąg – obszar ostrości przesuwa się po okręgu. Brak
Szybkość	Szybkość przesuwania się obszaru ostrości. 0 oznacza brak animacji, a wyższe wartości powodują jej szybsze odtwarzanie.
Interakcja	Zaznaczenie pola Podążaj za myszą powoduje, że obszar ostrości podąża za wskaźnikiem myszy.

Fala

Powoduje falowanie wycinków obrazu.

   

Właściwość	Opis
Obrazy
Podstawowy	Obraz, do którego chcesz zastosować efekt.
Fala
Typ	Fala używana w efekcie. Standardowa – animacja powoduje marszczenie obrazu. Soczewkowanie – animacja powoduje zmniejszanie i rozszerzanie się obrazu według wzorca symetrycznej fali.
Orientacja	Kierunek animacji fali. Poziomo Pionowo
Szybkość	Szybkość animacji fali. 0 oznacza brak animacji, a wyższe wartości powodują jej szybsze odtwarzanie.
Magnituda	Wielkość fal. 0 oznacza brak efektu, a większe wartości powodują powstawanie wyraźniejszych fal.
Długość	Odległość między szczytami fal. Im mniejsza odległość, tym więcej fal w efekcie.
Odwrócenie	Zaznaczenie pola Odwróć powoduje, że fale przesuwają się od lewej do prawej (w orientacji poziomej) lub od dołu do góry (w orientacji pionowej).
Przycinanie	Zaznaczenie pola Przycinanie powoduje, że w każdej klatce animacji obraz jest rysowany od nowa, co zapobiega efektowi śladu.
Zaawansowane
Obszar fali	Fragment obrazu, na który wpływa efekt fali.
Pełna siła	Fragment obrazu, na którym efekt fali ma pełną moc. Moc efektu zmniejsza się w innych częściach obszaru fali.

Zdarzenia i działania

Zdarzenia wysłane przez komponent Efekt graficzny

Możesz powodować inne działania na podstawie tego zdarzenia komponentu Efekt graficzny:

Zdarzenie	Opis
Zakończenie autoodtwarzania	Wysyłane, gdy automatycznie odtworzona animacja osiągnie limit czasu.

Działania wykonywane przez komponent Efekt graficzny i poszczególne efekty

W odpowiedzi na inne zdarzenia komponent Efekt graficzny może uaktywniać te działania:

• Odtwórz
• Wstrzymaj

Gdy w oknie Zdarzenie wybierzesz jedno z tych działań, ustaw komponent Efekt graficzny lub konkretny efekt jako odbiornik.

Dowiedz się, jak konfigurować zdarzenia.

Podgląd

Podczas pracy w oknie Efekt graficzny na scenie widać podgląd animacji komponentu. Jeśli zmienisz jakieś właściwości, animacja zostanie zresetowana do początku.

Możesz też wyświetlić podgląd dokumentu w wybranej przeglądarce, klikając Zapisz u dołu okna, a potem klikając przycisk Podgląd.