Opcje przesuwania i zmiany rozmiaru elementu

W HTML5 położenie i rozmiar elementów można zmieniać na dwa główne sposoby. Pierwszy polega na zastosowaniu współrzędnych określających jego położenie względem górnej i lewej krawędzi strony oraz jego szerokości i wysokości w celu określenia rozmiaru. Drugi sposób pozwala przesuwać i skalować elementy za pomocą właściwości transform CSS.

Google Web Designer korzysta z obu tych sposobów. W przypadku układu elementów do określania ich położenia używa wartości górnej i lewej, a do ustawiania ich rozmiaru – szerokości i wysokości. Jako że właściwość transform CSS obsługuje większą liczbę klatek i zapewnia płynniejszą animację, Google Web Designer domyślnie stosuje tę metodę do tworzenia animacji opartych na CSS.

Gdy zastosujesz ustawienia domyślne narzędzi przekształcania, będą one działały prawidłowo zarówno w przypadku układu elementów, jak i animacji. Możesz jednak w razie potrzeby zmienić metodę używaną do określania rozmiaru i położenia elementu.

Ograniczenia

• Ścieżki animacji nie działają w przypadku określania pozycji względem górnej i lewej krawędzi strony.
• Animacje w reklamach AMPHTML nie mogą być oparte na określaniu pozycji względem górnej i lewej krawędzi ani na szerokości lub wysokości.

Zmienianie stylu określania pozycji

Aby zmienić styl określania pozycji:

1. Na pasku narzędzi kliknij narzędzie do zaznaczania .
2. Kliknij przycisk opcji stylu określania pozycji .
3. Wybierz styl określania pozycji z menu:

   Styl określania pozycji	Opis
   Użyj domyślnych pozycji	Preferuje określanie pozycji względem górnej i lewej krawędzi w przypadku układów i użycie właściwości transform:translate3d() do animowania położenia.
   Użyj pozycji do góry i w lewo	Używa wartości lewy/górny do określania pozycji elementu w klatce kluczowej.
   Użyj przesunięcia 3D	Używa wartości transform:translate3d() do określania pozycji elementu w klatce kluczowej.

Zmienianie stylu określania rozmiaru

Aby zmienić styl określania rozmiaru:

1. Na pasku narzędzi kliknij narzędzie do zaznaczania .
2. Kliknij przycisk opcji stylu określania rozmiaru .
3. Wybierz styl określania rozmiaru z menu:

   Styl określania rozmiaru	Opis
   Użyj domyślnych rozmiarów	Preferuje określanie rozmiaru elementu przez podawanie jego szerokości i wysokości w przypadku układów i użycie właściwości transform:scale3d() do animowania rozmiaru.
   Użyj szerokości i wysokości	Używa wartości szerokości i wysokości do określania rozmiaru elementu w klatce kluczowej.
   Użyj skalowania 3D	Używa wartości transform:scale3d() do określania rozmiaru elementu w klatce kluczowej.

Sterowanie przekształcaniem

Jeśli na pasku opcji narzędzia jest zaznaczone pole Sterowanie przekształcaniem , narzędzie do zaznaczania umożliwia zmianę rozmiaru i obrotu wybranych elementów.

Aby obrócić zaznaczone elementy:

1. Na pasku narzędzi kliknij narzędzie do zaznaczania.
2. Upewnij się, że na pasku opcji narzędzia jest zaznaczone pole Sterowanie przekształcaniem.
3. Wybierz jeden lub więcej obiektów. Na środku zaznaczenia pojawią się elementy sterujące obrotem (dwa zagnieżdżone pierścienie).
4. Opcjonalnie zmień środek obrotu, przeciągając wewnętrzny pierścień sterujący obrotem.
5. Obróć zaznaczone elementy, przeciągając zewnętrzny pierścień sterujący obrotem.
   • Przytrzymaj wciśnięty klawisz Shift podczas przeciągania, by obracać elementy co 45°.

Aby zmienić rozmiar zaznaczonych elementów:

1. Na pasku narzędzi kliknij narzędzie do zaznaczania.
2. Upewnij się, że na pasku opcji narzędzia jest zaznaczone pole Sterowanie przekształcaniem.
3. Wybierz jeden lub więcej obiektów. Zostaną one otoczone niebieską ramką.
4. Przeciągnij jeden z punktów sterujących znajdujących się po bokach lub w rogach ramki ograniczającej.
   • Przytrzymaj wciśnięty klawisz Shift podczas przeciągania, by zachować pierwotny współczynnik proporcji wybranych elementów.

 

Zmienianie rozmiaru obrazów SVG

Gdy powiększasz obraz lub kształt SVG, użyj właściwości szerokości i wysokości, a nie skalowania 3D. Jeśli używasz sterowania przekształcaniem w narzędziu do zaznaczania, być może trzeba zmienić styl określania rozmiaru.