Includes

#INCLUDE ModelAnimation.inc
oder
#INCLUDE DomAnimation.inc

NewAnimation()

var myAnimation = NewAnimation( {
  ModelRef: myModel,
  OnModelChange: UpdateAll | function(modelRef,this){},
  Delay: 0,
  Repeat: 0, 
  RestartAction: 'stop|continue|restart|toEnd',
  AutoInit: true,
  AutoStart: false,
  Mode: 'serial|parallel',
  TaskList: [
    { AnimatorDefinition, TaskDefinition }
  ],

  Condition: function(task){return true;},
  OnLoopInit: function(task){},
  OnLoopBegin: function(task){return true;},
  OnLoopEnd: function(task){return false;},
  OnTaskStart: function(task){},
  OnTaskEnd: function(task){},
  OnStop: function(task){},
  SetValueFunc: function(value,modelRef,task){},
  GetValueFunc: function(modelRef,task){return any;},
} );

myAnimation.Start();

myAnimation.Stop();

AnimatorDefinition

  TaskList: [
    { 
      Delay: 0,
      Repeat: 0, 
      Mode: 'serial|parallel',
      TaskList: [
        { AnimatorDefinition, TaskDefinition },
      ],

      Condition: function(task){return true;},
      OnLoopInit: function(task){},
      OnLoopBegin: function(task){return true;},
      OnLoopEnd: function(task){return false;},
      OnTaskStart: function(task){},
      OnTaskEnd: function(task){},
      OnStop: function(task){},
      SetValueFunc: function(value,modelRef,task){},
      GetValueFunc: function(modelRef,task){return any;},
    },
  ],

TaskDefinition

  TaskList: [
    { 
      ModelRef: Animator.ModelRef,
      ValueRef: 'name',
      ValueType: TypeOf(EndValue),
      Unit: 'px',
      StartValue: 0,
      EndValue: StartValue,
      EndValueFunc: function(this){return any;},
      FormatValue: function(value,this){return value+'px';},
      StopValue: 0,
      SetValueFunc: function(value,modelRef,this){},
      GetValueFunc: function(modelRef,this){return any;},

      Condition: function(this){return true;},
      Delay: 0,
      TimeSpan: 0,
      Speed: 0,
      Sweep: 'linear|cosine|arccos|smooth',
      SweepFunc: function(x){return x;},

      OnTaskStart: function(this){},
      OnTaskEnd: function(this){},
      OnStop: function(this){}
    },
  ],

NewModelAnimation()

var myAnimation = NewModelAnimation( {
  NStates: 2,
  ModelRef: myModel,
  OnModelChange: DrawAll || function(this){},
  OnAfterStateChange: function(this,currState){},
  CurrState: 0,
  PauseTime: 1000,
  Repeat: 0,
  AutoInit: true,
  AutoPlay: false
} );

myAnimation.Init();

OnSetState()

myAnimation.OnSetState( id, function(anim) {
  var model = anim.ModelRef;
  model.Prop = ...;
} );

AnimationToState()

myAnimation.AnimationToState( id, {
  -> AnimatorDefinition
} );

AnimatorDefinition

ModelAnimation Funktionen

myModel.Reset();

myModel.SetState( 0 );

myModel.ToState( 0 );

myModel.Next( Wrap=false );

myModel.Prev( Wrap=false );

myModel.SetNextState( Wrap=false );

myModel.SetPrevState( Wrap=false );

myModel.Stop();

myModel.StopSkip();

myModel.StopUndo();

myModel.Play( repeat=0, PauseTime );

NewDomAnimation()

myAnimation = NewDomAnimation( {
  StateObjectName: 'StateObj',
  NStageObjects: 1,
  NStates: 2,
  OnModelChange: function(this){},
  OnAfterStateChange: function(this,currState){},
  CurrState: 0,
  PauseTime: 1000,
  Repeat: 0,
  AutoInit: true,
  AutoPlay: false
} );

myAnimation.Init( ShowAll=false );

DomAnimation Funktionen

myAnimation.OnSetState( id, function(anim) {
  anim.ShowAll();
  anim.HideAll();
  anim.HideAll().Show( 1, 2, 3 );
  anim.SetVisi( 1, 0|1 );

  anim.Show( 1, 2, 3 );
  anim.SetOpac( 1, 1 );
  anim.SetPos( 1, x, y );
  anim.SetSize( 1, w, h );
  anim.SetGeom( 1, x, y, w, h );
} );

myAnimation.AnimationToState( id, {
  -> AnimatorDefinition
  -> Hilfsfunktionen
} );

AnimatorDefinition, Hilfsfunktionen

Hilfsfunktionen

myAnimation.AnimationToState( id, {
  ModelRef: myModel,
  OnModelChange: UpdateAll | function(modelRef,this){},
  Delay: 0,
  Repeat: 0, 
  RestartAction: 'stop|continue|restart|toEnd',
  Mode: 'serial|parallel',

  TaskList: [
    TSet( id, 'x|y|w|h|o|v', end, time=0, delay=0 ] ),
    TSet( id, 'x|y|w|h|o|v', [start,end], time=0, delay=0 ] ),
    TSet( [id1,id2], ['x','y'], [end1,end2], [time1,time2], [delay1,delay2] ),
    TSet( [id1,id2], ['x','y'], [[start1,end1],[start2,end2]], [time1,time2], [delay1,delay2] ),

    TShow( id, delay=0 ),
    TShow( [id1,id2], [delay1,]delay2] ),
    THide( id1, delay=0 ),
    THide( [id1,id2], [delay1,]delay2] ),
    TSwap( hideId, ShowId, delay=0 ),
    TSwap( [id1,id2], [id3,id4], [delay1,delay2] ),

    TPos( id, x, y=y, time=0, delay=0 ),
    TPosX( id, x, time=0, delay=0 ),
    TPosY( id, y, time=0, delay=0 ),
    TSize( id, w, h, time, delay ),
    TGeom( id, x, y, w, h, time, delay ),
    TGeomW( id, w, h, time, delay ),
    TGeomH( id, w, h, time, delay ),

    TOpac( id, opac, time, delay ),
    TBlendIn( id, time, delay ),
    TBlendOut( id, time, delay ),

    TProp( TShow( id, delay ), 'prop', val ),
    TSweep( TPosX( id, x, time, delay ), 'cosine' ),
    TParallel|TSerial( Txxx(...), delay=0, repeat=0 ),
    // Txxx() must return [ TaskDefinition, AnimatorDefinition ]
  ],

  Condition: function(task){return true;},
  OnLoopInit: function(task){},
  OnLoopBegin: function(task){return true;},
  OnLoopEnd: function(task){return false;},
  OnTaskStart: function(task){},
  OnTaskEnd: function(task){},
  OnStop: function(task){},
  SetValueFunc: function(value,modelRef,task){},
  GetValueFunc: function(modelRef,task){return any;},
} );

Beispiel

myAnimation.AnimationToState( 1, {
  TaskList: [ 
    TParallel( TSweep( TPosX( [4,5,6], [34,49,64], tic ), 'cosine' ) ), 
    TSet( 2, ['color','backgroundColor'], ['red','yellow'] ), TBlendIn( 2, tic ), TSet( 2, ['color','backgroundColor'], '' ),
    TParallel( TSwap( [1,2], 3) ),
    TPosX( 2, 78, 0, tic ), TSet( 2, 'color', 'red' ), TBlendIn( 2, tic ), TSet( 2, 'color', '' ),
    TParallel( TSwap( [2,6], 7 ) )
  ]
} );