WaBis

walter.bislins.ch

ANIM: Vorlagen

Mit den folgenden Code-Ausschnitten können schnell Scripts mit Animator Elementen erstellt werden:

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 ) )
  ]
} );

Weitere Infos zur Seite
Erzeugt Dienstag, 1. September 2015
von wabis
Zum Seitenanfang
Geändert Dienstag, 1. August 2017
von wabis