Frame ANIMATION

Init Parameters

Init a frame animation. 

new FrameAnim({frames: framesConfig});

frames: ImageFrameSet

property type required info
src string | HTMLImageElement Y The image url or object
w number Y width
h number Y height
items ImageFrameOffset[] | ImageFrameOffsets Y The frames data

items: ImageFrameOffset [ ]

property type info example
ImageFrameOffset [number, number] The offsetX and offsetY of a frame in the image [100 , 200]

items: ImageFrameOffsets

property type required info
ox number Y The offsetX of the first frame
oy number Y The offsetY of the first frame
split number The split width between frames.
The default value is 0.
axis 'x'|'-x'|'y'|'-y' Y The frames be aligned by the axis
total number Y The frames number

CODE EXAMPLE

let anim1 = new FrameAnim({
    frames: {
        src: '../js2d/1945.gif',
        w: 65,
        h: 65,
        items: {
            ox: 4,
            oy: 400,
            split: 1,
            axis: 'x',
            total: 3
        }
    },
    duration: 200,
    loop: true
}).targets('.p38'),
    anim2 = new FrameAnim({
    frames: {
        src: '../js2d/1945.gif',
        w: 32,
        h: 32,
        items: {
            ox: 4,
            oy: 4,
            split: 1,
            axis: 'x',
            total: 8
        }
    },
    duration: 2000,
    loop: true,
    autoreset: true,
    direction: 'backward'
}).targets('.a5m');

$1('#demo').on('click', () => {
    anim1.play();
    anim2.play();
})