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

More Page Infos / Sitemap
Created Dienstag, 1. September 2015
Scroll to Top of Page
Changed Dienstag, 1. August 2017