WaBis

walter.bislins.ch

ANIM: Animator steuert DOM-Objekt

Beispiele : Animator
Das folgende Beispiel benutzt ein Animator Objekt, um die Position, Grösse und Sichtbarkeit des roten Rechtecks zu animieren.

Animation

Code

#INCLUDE ModelAnimation.inc

<style>
.Wiki .anim { 
 position:absolute; 
 top:4px; left:0; 
 width:200px; height:50px; 
 border:2px solid black; 
 background-color: red; 
}
</style>

{{div|position:relative; height:210px; border:1px solid #ddd; background-color: yellow}}
{{div|$anim|id=animid}}{{end div}}
{{end div}}

<script>
var myAnimation = NewAnimation({
 ModelRef: 'DOM.animid.style',
 AutoStart: true,
 Repeat: -1, 
 TaskList: [
  { ValueRef: 'display', ValueType: 'string', EndValue: '', Delay: 500 },
  { Mode:'parallel',
    Delay: 500,
    TaskList: [
     { ValueRef: 'left', Unit: '%', TimeSpan: 2000, StartValue: 0, EndValue: 50, Sweep: 'cosine' },
     { ValueRef: 'height', Unit: 'px', TimeSpan: 1000, StartValue: 50, EndValue: 200 }
    ]
  },
  { Mode:'parallel',
    TaskList: [
     { ValueRef: 'left', Unit: '%', TimeSpan: 2000, StartValue: 50, EndValue: 0, Sweep: 'cosine' },
     { ValueRef: 'height', Unit: 'px', TimeSpan: 1000, StartValue: 200, EndValue: 50 }
    ]
  },
  { ValueRef: 'display', ValueType: 'string', EndValue: 'none', Delay: 500 }
 ]
});
</script>

Beschreibung

DOM-Objekte und CSS

Bei den beiden Rechtecken handelt es sich um zwei verschachtelte DIV-Elemente. Das äussere gelbe Rechteck muss den Style position: relative; erhalten, damit das innere rote Rechteck absolut positioniert werden kann. Das gelbe Rechteck dient als Bühne (Stage) des roten Rechtecks.

{{div|position:relative; ...}}
  {{div|$anim|id=animid}}{{end div}}
{{end div}}

Das rote Rechteck wird mit der Klasse anim versehen und erhält die ID animid, damit es vom Animator angesprochen werden kann. Die Klasse anim kann jedem Objekt zugewiesen werden, welches auf der Bühne bewegt werden soll. Sie ist wiefolgt definiert:

<style>
.Wiki .anim { 
 position:absolute; 
 top:4px; left:0; 
 width:200px; height:50px; 
 border:2px solid black; 
 background-color: red; 
}
</style>

Wichtig ist der Style position: absolute;, damit das Objekt auf der Bühne absolut positioniert werden kann. Die restlichen Styles definieren eine Default-Position und -Grösse, sowie das Aussehen des Rechtecks.

Animator mit DOM-Objekt verknüpfen

Wenn ein Animator ein DOM-Objekt steuern soll, wird ihm das Style-Objekt des DOM-Objektes zugewiesen. Dann kann er direkt die Properties left, right, width, height usw. in AnimatorTasks ansprechen. Der Style eines DOM-Objektes wird wiefolgt referenziert:

var myAnimation = NewAnimation({
 ModelRef: 'DOM.animid.style',
  :
});

animid ist de ID des DOM-Objektes.

AutoStart, Repeat

Damit die Animation automatisch startet, kann bei NewAnimation() das Property AutoStart gesetzt werden.

var myAnimation = NewAnimation({
 ModelRef: 'DOM.animid.style',
 AutoStart: true,
 Repeat: -1, 
  :

Wenn die Animation eine bestimmte Anzahl repetiert werden soll, kann dies mit dem Property Animator.Repeat angegeben werden. Ein negativer Wert kann für unbeschränkte Wiederholung verwendet werden.

Wenn die Anzahl Wiederholungen von externen Bedingungen abhängig sein soll, kann dies mit den Callback-Funktionen OnLoopInit, OnLoopBegin und OnLoopEnd bewerkstelligt werden. Eine unbeschränkte Wiederholung würde man damit wiefolgt implementieren:

var myAnimation = NewAnimation({
 ModelRef: 'DOM.animid.style',
 AutoStart: true,
 OnLoopEnd: function(){ return false; },
  :

Tasks definieren

Im Beispiel werden eine Reihe von AnimatorTasks definiert. Einige laufen sequentiell ab, andere parallel. Der Haupt-Task läuft sequentiell:

  :
 Mode: 'serial', // default, kann weggelassen werden
 TaskList: [
  { // Recteck anzeigen 
    ValueRef: 'display', ValueType: 'string', EndValue: '', Delay: 500
  },
  { // X-Position und Höhe parallel unabhängig voneinander vergrössern 
    Mode:'parallel',
    Delay: 500,
    TaskList: [ ... ]
  },
  { // X-Position und Höhe parallel unabhängig voneinander verkleinern 
    Mode:'parallel',
    TaskList: [ ... ]
  },
  { // Rechteck unsichtbar machen 
    ValueRef: 'display', ValueType: 'string', EndValue: 'none', Delay: 500 
  }
 ]

Mit Ausnahme des 3. Tasks werden alle Tasks mit einer Verzögerung von 500 ms nach beenden des vorherigen Tasks ausgeführt.

Wenn mehr als ein Style gleichzeitig verändert werden soll, können mehrere Tasks parallel ausgeführt werden. Dazu wird der Mode: 'parallel' vor der entsprechenden TaskList angegeben. Erst wenn alle diese Tasks beendet sind, wird der nächste übergeordnete Task gestartet.

 TaskList: [
  { // Recteck anzeigen 
    ValueRef: 'display', ValueType: 'string', EndValue: '', Delay: 500
  },
  { // X-Position und Höhe parallel unabhängig voneinander vergrössern 
    Mode:'parallel',
    Delay: 500,
    TaskList: [ 
      { // X-Position vergrössern
        ValueRef: 'left', Unit: '%', 
        TimeSpan: 2000, 
        StartValue: 0, EndValue: 50, Sweep: 'cosine' 
      },
      { // und gleichzeitg Höhe vergrössern 
        ValueRef: 'height', Unit: 'px', 
        TimeSpan: 1000, 
        StartValue: 50, EndValue: 200 
      }
    ]
  },
   :

Beachte, dass die Animation von left 2 s andauert, während die Animation von height bereits nach 1 s beendet ist.

Mit Sweep kann anstelle eines linearen Ablaufes ein anderer Verlauf gewählt werden.

Weitere Infos zur Seite
Erzeugt Mittwoch, 3. August 2016
von wabis
Zum Seitenanfang
Geändert Donnerstag, 4. August 2016
von wabis