Canvas: Create-animate

learn Canvas Layer - Element creation and animation of its attributes.

Create an HTML container with ID to render the graphical context element

<div id="myCanvas"> </div>

Layer Creation:

To create the Canvas layer, invoke canvasLayer method with ContainerID "#myCanvas", context config and Layer config objects as arguments. It returns the renderer instance. For more details on canvasLayer please refer: API Reference -> Layers -> Canvas Layer Page.

let renderer = i2d.canvasLayer('#myCanvas', {}, {});

Element Creation:

renderer.createEl() API creates Element of type 'el' with 'attr' attributes and 'style' properties. In the below example we are creating Circle with attributes specified in the attr object and styles in the style object.

let circle = renderer.createEl({
    el: 'circle',
    attr: {
        r: 50,
        cx: renderer.width / 2,
        cy: renderer.height / 2
    },
    style: {
        fillStyle: '#ff0000'
    }
})

To create multiple circles based on Data array - call createEls(DataArray, ElementConfig)

let circle = renderer.createEls([1,2,3,4], {
    el: 'circle',
    attr: {
        r: 50,
        cx: function (d) { return d * 100 },
        cy: function (d) { return d * 100 }
    },
    style: {
        fillStyle: '#ff0000'
    }
})

Animation:

AnimateTo API is used for animating properties of the graphical elements. In the below code we are animating radius from 50 to 200 and fillStyle from '#ff0000' to '#00ff00' in duration - 500 ms. By specifying loop = 10, the animation will be repeated 10 times, with alternate direction and easeInOutSin easing.

circle.animateTo({
    duration: 500,
    loop: 10,
    ease: 'easeInOutSin',
    direction: 'alternate',
    attr: {
        r: 200
    },
    style: {
        fillStyle: '#00ff00'
    }
});