Description

View an animation from an image

Usage

Constructor

  • options {Object}

    • images {String|Array} : identifying the image. If the value is an array. The different images are chained
    • addIn {CanvasEngine.Element} : allows you to add animation to an existing element
    • animations {Object} : Includes all animations. The key is the identifier of the animation. The value parameters (view example)

      • frames {Array} : Array with two elements: the first is to play the first frame, the second frame is the arrival
      • size {Object} : Set the width and height of the sequence (width and height keys )
      • patternSize {Object} (>= 1.2.5) : Number of patterns :

        Example :

        patternSize: {
            width: 4,
            height: 4
        }
        

        If the image measurement 100*100px, this amounts to:

        size: {
            width: 100 / 4,
            height: 100 / 4
        }
        
      • frequence {integer} : Frequency display. The higher the value the more high frequency is low

      • finish {Function} : Callback when the animation is finished
      • image {String} : identifying the image specific to this animation
      • position {Object} : offset of the animation display ("left" and "top" keys)

Example

In method ready of the scene :

var el = this.createElement();
var animation = canvas.Animation.new({
   images: "chara",
   animations: {
    run: {
        frames: [0, 5],
         size: {
            width: 42,
            height: 42
          },
         frequence: 3,
         finish: function() {

         }
      }
   }
});
stage.append(el);
animation.add(el);
animation.play("run", "loop");

You can also chaining multiple different images:

var el = this.createElement(),
    animation = canvas.Animation.new({
        images: ["foo", "bar"],
        animations: {
            _default: {
                frequence: 7
            }
        }
    });
animation.add(el);
animation.play("_default", "loop");

Example of an image with several sequences

Here is the picture:

You can retrieve sequences and create a particular animation :

canvas.Animation.New({
        images: "fire",
        addIn: stage,
        animations: {
            _default: {
                position: {
                    top: 75/2,
                    left: 74/2
                },
                frequence: 8,
                frames: [
                    [{"pattern":7}],
                    [{"pattern":8}],
                    [{"pattern":9}]
                ],
                size: {
                    width: 75,
                    height: 74
                }
            }
        }
    });
  • position : Position of the point of origin
  • frequence : Frequency
  • frames : Different sequences for each frame. A frame is composed of an array with several sequences
    • pattern : Identifying the pattern. The identifier starts at 1 and increments in the direction of West Reading
    • x : Position X
    • y : Position Y
    • zoom : Scaling between 0 and 100
    • opacity : Opacity between 0 and 255
    • rotation : Rotation between 0 and 360

It is possible to provide default values width framesDefault that will apply to all sequences that do not have the property :

canvas.Animation.New({
        images: "fire",
        addIn: stage,
        animations: {
            _default: {
                framesDefault: {
                    rotation: 20
                },
                frames: [
                    [{"pattern":7}],
                    [{"pattern":8}],
                    [{"pattern":9}]
                ],
                size: {
                    width: 75,
                    height: 74
                }
            }
        }
    });

Methods

remove

`(>=1.3.1)` Removes the animation on this element

add

Adds a loop listener in a element to perform an animation (with addLoopListener). From the method call, the loop is started on the animation stop. Use the play method to start the animation

isStopped

`(1.3.1)` Whether the animation is stopped

stop

Stop animation

play

Adds a loop listener in a element to perform an animation (with addLoopListener). From the method call, the loop is started on the animation stop. Use the play method to start the animation

Discussion