HMorphAnimation

Description

HMorphAnimation defines morphing animation.

HMorphAnimation is implemented by HView as an interface. Its methods define the functionality to zoom from the current geometry to a target geometry with animated intervals.

Inherits from:

Implemented by:

Constructor Method

The constructor is invoked, when a new instance of HMorphAnimation is created.

To create a new instance use HMorphAnimation.nu( ) or new HMorphAnimation( ).

constructor( )

Inherited from: HClass

Protected instance method, gets called when a new instance is created.

Class Methods

implement( interface )

Inherited from: HClass

Description

Copies the members of interface to a HClass or a class inherited from HClass.

Usage:

Defines an interface: 
// Create an interface class that calculates the area
var AreaInterface = HClass.extend({
  constructor: null,
  area: function() {
    return this.getWidth() * this.getHeight();
  }
});



// Create a class that contains the coordinates of a rectangle.
var Rectangle = HClass.extend({
  constructor: function( x, y, width, height ) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
  },
  getWidth: function() {
    return this.width;
  },
  getHeight: function() {
    return this.height;
  }
});


// Makes the Rectangle class implement the AreaInterface
Rectangle.implement( AreaInterface );

nu( )

Inherited from: HClass

Class members:

Description

nu is a protected class method.

It does the same thing as the new keyword, but it is a class method.

Parameters:

Any parameters are passed on to the constructor method.

Usage:

Creates a class MyClass, then creates two instances of it: myClassInstance1 and myClassInstance2. The end result is the same. 
var MyClass = HClass.extend({
  name: 'Foo',
  constructor: function( param1, param2 ){
    var logMsg = [ 'param1:', param1,
                   'param2:', param2,
                   'name:', this.name ];
    console.log( logMsg.join(' ') );
  }
});

// Construction using the new keyword:
var myClassInstance1 = new MyClass( 'one', 'two' );

// Construction using the nu method:
var myClassInstance2 = MyClass.nu( 'one', 'two' );
However, when extending in place, the benefits of the nu method become obvious.

// Extending in place with the new keyword:
var myExtendedClassInstance1 = new (
  MyClass.extend({
    name: 'Bar'
  })
)( 'one', 'two' );

// The same as above, but using the nu method:
var myExtendedClassInstance2 = MyClass.extend({
  name: 'Bar'
}).nu( 'one', 'two' );

extend( instance, static )

Inherited from: HClass

Description

The class method used to extend a class.

If the member name constructor is defined as null instead of a function block in the instance object block, the class is defined as a singleton (single instance class).

Parameters:

instance The object that defines the class instance members.
static The object that defines the static class members.

Returns:

Returns the extended class object.

Usage:

var Point = HClass.extend({
  constructor: function( x, y ) {
    this.x = x;
    this.y = y;
  }
});
var Rectangle = Point.extend({
  // Instance members:
  constructor: function( x, y, width, height ) {
    this.base( x, y );
    this.width = width;
    this.height = height;
  },
  getWidth: function() {
    return this.width;
  },
  getHeight: function() {
    return this.height;
  }
},


// Class Members
{ description: "this is a Rectangle",
  getClass: function() {
    return this;
  }
});

Instance Methods

onAnimationEnd( )

Extend the onAnimationEnd method, if you want to do something special when an animation on this view is finished.

onAnimationCancel( )

Extend this method if functionality is desired upon cancellation of animation.

stopAnimation( target )

Description

Stops the current animation for this view. If the view is not being animated, this method has no effect. The onAnimationEnd event on the view gets called when the animation finishes (reaches the end position/size), but onAnimationCancel gets called when this method is called while the animation is still in action.

animateTo( obj, duration, fps )

Description

Moves the view smoothly into another location and/or size. The onAnimationStart event on the view gets called when the animation starts.

Parameters:

obj An instance of <HPoint> or <HRect>, depending on the desired animation result. When a point is passed, the view is moved in that position. When a rect is passed, the view can also be resized with or without moving to different coordinates.

duration optional_ The duration of the animation in milliseconds. The default duration is 500 ms.

fps optional_ The frame rate for the animation. The default fps is 50.

Returns:

self (HMorphAnimation#) 
HView.extend({
  onAnimationEnd: function(){
    this.die();
  }
}).nu(
  [ 0, 0, 300, 300 ],
  HApplication.nu()
).setStyle(
  'background-color', 'red'
).animateTo(
  HRect.nu( 300, 300, 500, 500 )
);

onAnimationStart( )

Description

Extend the onAnimationStart method, if you want to do something special when this view starts animating.

Usage:

HView.extend({
   onAnimationStart: function() {
     this.setStyle('background-color','green')
   }, 
   onAnimationEnd: function() {
     this.setStyle('background-color','grey')}
   }).nu(
     [0,0,300,300],
     HApplication.nu()
   ).setStyle(
     'background-color','blue'
   ).animateTo(
     HRect.nu(
       300,300,700,700
     )
   );

toString( )

Inherited from: HClass

Protected instance method, returns the instance represented as a String.

valueOf( )

Inherited from: HClass

Protected instance method, returns the value of an instance.

base( )

Inherited from: HClass

This method can be called from any other method to invoke that method's parent

Other Instance Members

prototype = { }

Inherited from: Object

Description

The prototype member of Object defines the instance members. These are copied to the instance object when the new keyword is called.