Pierwsza animacja w KML

Rozszerzenie Google'a do standardu KML pozwala na definiowanie własnej animacji po Ziemi. Dzięki temu możemy przygotować prezentację najciekawszych miejsc i udostępnić je na swojej stronie lub jako osobny plik. Dodatkowo w trakcie trwania animacji możemy zmieniać niektóre właściwości obiektów umieszczonych na globie - takie jak kolor, wielkość czy widoczność.

Widok/Kamera

Jednym z podstawowych elementów animacji jest poruszanie się z miejsca na miejsce - czyli edycja pozycji widoku. Dlatego też na początku zajmiemy się w jaki sposób ustawiać kamerę w odpowiednim kierunku, a następnie przejdziemy do animacji.

Definicja widoku może być definiowana na dwa sposoby:

• obiekt <LookAt> pozwala na prostą definicję widoku; w ramach konfiguracji dostępne są 5 właściwości punktu na który patrzymy:
  
• szerokość geograficzna - <longitude>
• wysokość geograficzna - <latitude>
• odległość kamery od obiektu - <range>
• wysokość punktu na powierzchnią - <altitude>
• nachylenie kamery - <tilt>
• obrót kamery wokół punktu - <heading>

<LookAt>
  <longitude>16.380712</longitude>
  <latitude>50.335302</latitude>
  <altitude>3</altitude>
  <heading>225</heading>
  <tilt>125</tilt>
  <range>20</range>
  <altitudeMode>relativeToGround</altitudeMode>
</LookAt>

• obiekt <Camera> daje pełny dostęp do widoku poprzez 6 parametrów - jednak wówczas decydujemy o pozycji kamery a nie obiektu na który patrzymy; parametry są takie same jak dla obiektu LookAt jednak dotyczą pozycji kamery - wówczas uzyskujemy jeszcze dostęp do obrotu kamery (roll)
  
  
  • szerokość geograficzna - <longitude>
  • wysokość geograficzna - <latitude>
  • wysokość punktu na powierzchnią - <altitude>
  • nachylenie kamery- <tilt>
  • kierunek kamery - <heading> - domyślnie 0 - północ
  • skos kamery - <roll>

<Camera>
  <longitude>16.380712</longitude>
  <latitude>50.335302</latitude>
  <altitude>3</altitude>
  <heading>225</heading>
  <tilt>125</tilt>
  <roll>10</roll>
  <altitudeMode>relativeToGround</altitudeMode>
</Camera>

W przypadku, kiedy nie używamy obrotu kamery (tilt i roll) nie ma znaczenia, który obiekt zdefiniujemy. Łatwiej natomiast poruszać się jest z obiektem LookAt - ponieważ dokładnie wiemy, w które miejsce kamera będzie skierowana (a dokładniej na który punkt). Obiekt Camera natomiast umożliwia wszystkie osie obrotu kamery - co może być wymagane przy bardziej zaawansowanych animacjach.

Animacja/Tour

Animację rozpoczynamy znacznikiem <gx:Tour>. Następnie umieszczamy znacznik <gx:Playlist>, w którym umieszczamy już konkretne akcje. A oto spis co możemy konkretnie definiować w playliście:

• poruszanie się do punktu <gx:FlyTo>
• przerwy w trakcie lotu <gx:Wait>
• zmiana właściwości obiektów <gx:AnimatedUpdate>

<gx:Tour>    
  <gx:Playlist>
    <gx:FlyTo>
      ..
    </gx:FlyTo>
    <gx:Wait>
      ..
    </gx:Wait>
    <gx:AnimatedUpdate>
      ..
    </gx:AnimatedUpdate>
  </gx:Playlist>
</gx:Tour>

gx:FlyTo - przemieszczanie się

Definiując akcję przemieszczania się w głównym węźle możemy umieścić:

• czas trwania akcji <gx:duration> - w sekundach (mogą być podane ułamki)
• typ przejścia do nowego punktu <gx:flyToMode> - dopuszczalne są dwie wartości:
• smooth - pozwala na przechodzenie od punktu do punktu bez całkowitego hamowania kamery przy poszczególnych punktów
• bounce - zarówno na starcie jak i na końcu punktu prędkość kamery jest zerowa
• obiekt widoku <LookAt> lub <Camera>

<gx:FlyTo>
  <gx:duration>2.0</gx:duration>
  <gx:flyToMode>bounce</gx:flyToMode>
  <Camera>
    <longitude>16.380529</longitude>
    <latitude>50.335254</latitude>
    <altitude>2</altitude>
    <heading>90</heading>
    <tilt>71.600075</tilt>
    <range>2</range>
    <altitudeMode>relativeToGround</altitudeMode>
  </Camera>
</gx:FlyTo>

gx:Wait - przerwa

Jeżeli w trakcie animacji chcemy dokonać chwilowej przerwy wówczas wykorzystujemy obiekt <gx:Wait>, a jako właściwość <gx:duration> podajemy ilość sekund przerwy.

<gx:Wait>
  <gx:duration>1.0</gx:duration>
</gx:Wait> 

gx:AnimatedUpdate - zarządzanie obiektami

Podczas animacji możemy chcieć mieć dostęp do modyfikacji różnych ustawień obiektów - w tym także do ich dodawania lub usuwania. W tym celu wykorzystujemy element <gx:AnimatedUpdate>. Umożliwia on modyfikację różnych elementów także w zmiennym czasie - np. skalowanie ikonki placemark'u. Wewnątrz tagu możemy umieścić dwie właściwości <gx:duration> jako czas trwania oraz <Update>, w którym definiujemy wprowadzane zmiany.

Dopuszczalne parametry dla tagu <Update> to:

• <Change> - zmiana właściwości
• <Create> - tworzenie obiektu
• <Delete> - usuwanie obiektu

Dla tagu <Update> konieczne jest także zdefiniowanie właściwości <targetHref>, która wskazuje na plik KML lub KMZ, w którym jest dokonywana zmiana - może on także pozostać pusty, jednak koniecznie musi być znaleźć się w znaczniku.

Zmiana właściwości polega na podaniu nowej wartości właściwości do obiektu o zadanym id. Przykładem może być zmiana właściwości skali lub kolorów w arkuszu stylów - wówczas w nowej definicji stylów wystarczy podać id jako atrybut targetId.

<gx:AnimatedUpdate>
  <gx:duration>2.0</gx:duration>
  <Update>
    <targetHref></targetHref>
    <Change>
      <PolyStyle targetId="polystyle8">
        <color>00ff0000</color>
      </PolyStyle >
    </Change>
    <Change>
      <LineStyle targetId="linestyle8">
        <color>00ff0000</color>
      </LineStyle>
    </Change>
  </Update>
</gx:AnimatedUpdate>  

W przypadku tworzenia obiektu jako targetId podajemy docelowy element - w którym zostanie utworzony obiekt. Usuwanie traktuje atrybut targetId jako id obiektu, który chcemy usunąć.

<gx:AnimatedUpdate>
  <gx:duration>0.0</gx:duration>
  <Update>
    <targetHref></targetHref>
    <Create>
      <Document targetId="main">
        <Placemark id="placemark1">
          <styleUrl>#styl1</styleUrl>
          <visibility>1</visibility>
          <Polygon>  
            <extrude>0</extrude>  
            <altitudeMode>relativeToGround</altitudeMode>  
            <outerBoundaryIs>  
              <LinearRing>  
                <coordinates>  
                  2.3438905,48.853428,1
                  2.343953,48.853428,1
                  2.343953,48.8534066,1
                  2.3438905,48.8534066,1
                  2.3438905,48.853428,1
                </coordinates>  
              </LinearRing>  
            </outerBoundaryIs>  
          </Polygon>  
        </Placemark>
      </Document>
    </Create>
  </Update>
</gx:AnimatedUpdate>

Należy zwrócić szczególną uwagę na sposób wykonania animacji zmiany właściwości - są one wykonywane jednocześnie - początek tego typu animacji zaczyna się od momentu zakończenia się ostatniej animacji flyTo lub Wait. Dokładny sposób kolejności wykonywania jest bardzo dobrze opisany w dokumentacji Google.

Jako przykłady do artykułu przygotowałem trzy animacje związane z obrotem kamery oraz wykorzystaniem zmiennych właściwości - umieszczona na Google Code.