인터랙티브 애니메이션

코드와 ZIP 파일이 포함된 전체 정보 페이지는 다음과 같습니다.
Interactive Animation

그리고 Medium에 대한 전체 기사:
What is an Interactive Animation and how to make one

스프라이트

이미지 애니메이션은 스프라이트로 만들 수 있습니다. Sprite는 모든 프레임의 그림을 포함하는 이미지인 SpriteSheet를 사용하여 생성됩니다. 애니메이터는 애니메이션을 만들고 이미지를 내보낼 수 있습니다. 그런 다음 TexturePacker 과 같은 도구를 사용하여 SpriteSheet에 압축할 수 있습니다. 다음은 FREE VERSION 입니다.



ZIM JavaScript Canvas Framework을 사용하여 Sprite를 표시합니다. 다음은 HTML 페이지에 Sprite를 추가하는 샘플 코드입니다.

<html>
<head>
<title>Sprite on Canvas</title>

<script type=module>

import zim from "https://zimjs.org/cdn/01/zim";

// files from TexturePacker have been put in an assets/ folder
const assets = ["drabstract.png", "drabstract.json"];
const path = "assets/";

// See Docs under Frame for FIT, FILL, FULL, and TAG
new Frame(FIT, 1024, 768, dark, light, ready, assets, path);
function ready() {

    new Sprite({json:"drabstract.json"}) 
        .center()
        .run({
            time:3.5,
            rewind:true,
            rewindWait:5,
            loop:true,
            loopWait:5
        });        
}

</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body></body>
</html>

상호작용

ZIM을 사용하면 mousedown, mousemove, pressmove, keydown, 게임 스틱 또는 슬라이더 및 다이얼과 같은 다양한 구성 요소의 변경 이벤트와 같은 다양한 이벤트로 스프라이트를 제어할 수 있습니다.

ZIM은 대화형 애니메이션에 도움이 되는 다음과 같은 기능을 제공합니다.

스프라이트 — 애니메이션, 일반적으로 지정된 속도로 실행됨

Dynamo — 스프라이트를 다양한 속도로 실행합니다

.

스크롤러 - 스크롤 배경을 처리합니다

.

가속기 — 모든 애니메이션을 백분율 속도로 실행합니다

.

MotionController — 마우스, 키 또는 게임 패드로 컨트롤

다음은 포트폴리오 작품에 사용할 수 있는 interactive animation scene입니다. 게임 홍보 또는 웹사이트 배너의 작은 기능일 수 있습니다.

주석이 달린 코드를 보려면 CTRL 또는 ⌘ U를 사용하십시오. 예에서:

마우스를 움직이면 장면이 이동합니다

.

누르면 우주 사나이가 쏜다

스크롤러가 장면을 시차로 움직이게 함

Dynamo를 사용하면 Sprite의 속도를 변경할 수 있습니다

.

가속기가 퍼센트 속도를 제공합니다

.

MotionController가 가속기를 작동함

버튼이 배경 소리를 토글합니다

.

댓글이 있는 페이지의 코드는 다음과 같습니다.

<script type=module>

import zim from "https://zimjs.org/cdn/01/zim";

// This is an array to list all the sprite, sprite data, pictures and sounds
const assets = [
    "spritesheet.png", "spritesheet.json",
    "ground.png", "foreground.png", "midground.png", "background.png",
    "shoot.mp3", "sneak.mp3"
];
const path = "assets/"; // this is the directory with all the assets

// If there are a few assets then use a Waiter() - moving dots
const progress = new Waiter({backgroundColor:blue, corner:0});

// If there are a lot of assets we might want a Progress bar - use this instead 
// const progress = new ProgressBar({foregroundColor:blue});

// The first parameter is how to scale the stage into the browser window
// There is also FILL, FULL, and TAG - which would embed the animation in the HTML
// See https://zimjs.com/frame.html for more examples
// Then we have the color, outer color, the function to start the app,
// and the assets, path, and optional waiter (or progress bar)
new Frame(FIT, 1024, 618, lighter, darker, ready, assets, path, progress);
function ready() {

    // given F (Frame), S (Stage), W (width), H (height)    

    // ~~~~~~~~  SPRITES  ~~~~~~~~
    // A Sprite is an animation made up of multiple pictures found in a SpriteSheet(s)
    // The Sprite images can be made in an image editor or animation software 

    // SPRITE SHEETS
    // A SpriteSheet is a collection of images that make up the animation
    // We tend to use TexturePacker to pack the animation images into a SpriteSheet 
    // https://www.codeandweb.com/texturepacker
    // Use the Basic Algorithm rather than MaxRects
    // TexturePacker has an "export data to CreateJS (EaselJS)" which is what ZIM is built with
    // The spritesheet.json file is an example of the output from TexturePacker
    // which tells ZIM the dimension and position of the frames on the SpriteSheet
    // We adjusted the data to include the local path: "assets/spritesheet.png"
    // We added optional custom animations to the bottom of the data
    // which have a label followed by the frame [number range] to run
    // In the code below we run() a label to animate those frames to "walk" or "shoot"
    // There are more options for animations than just frame ranges
    // see https://zimjs.com/docs.html?item=Sprite under Parameters > animations

    // DYNAMIC SPRITE CREATION
    // In this example, we control the speed of scene with the mouse position
    // We use a ZIM Dynamo to dynamically control the speed of a Sprite
    // We have backgrounds in a ZIM Scroller() 
    // Each is set with a speed for parallax - distant ones slower, closer ones faster    
    // We use a ZIM Accelerator to combine control of the Dynamo and the Scrollers
    // and the speed of the Accelerator is controlled by a ZIM MotionController 
    // This can be set to keydown, gamestick, pressmove, mousemove, etc. 

    const sprite = new Sprite({json:"spritesheet.json"})
        .centerReg() // centers on stage and also prepares it to flip about its center
        .mov(0, 110) // down is positive in Interactive Media

    // A Dynamo will allow a Sprite to run at varying speed
    // Give the dynamo a default speed and add the dynamo to the accelerator object
    // reversible would make the Sprite walk backwards with negative speed 
    // we do not want that - we want to walk forwards but flip the Sprite
    // flip will automatically be true if reversible is false 
    const dynamo = new Dynamo({sprite:sprite, speed:30, label:"walk", reversible:false});

    // An Accelerator will group all animations so we can control them with one percent speed
    const accelerator = new Accelerator().add(dynamo);

    // ~~~~~~~~  SCROLLERS  ~~~~~~~~
    // Scrollers animate the backgrounds
    // They add a second copy of the object being scrolled and swap them as needed
    // The second copy gets added to the scrolled object's Container as they are created
    // If the Sprite is on the stage, the copy may go overtop of the sprite
    // So we put any scrollers for objects behind the Sprite in a container behind the sprite
    // this prevents the copy from coming up above the Sprite
    // NOTE: we are adding the Scrollers to the Accelerator as well
    // so their percentSpeed will be controlled along with the Sprite's percentSpeed

    const backings = new Container(W, H).addTo(S,0); // add backings to stage at level 0
    accelerator.add([
        // a Scroller gets an image and a speed
        new Scroller(new Pic("background.png").addTo(backings), 1),
        new Scroller(new Pic("ground.png").addTo(backings).mov(0,-150), 3),
        new Scroller(new Pic("midground.png").addTo(backings), 2),
        // the foreground is in front of the Sprite, so it can just get added to the stage
        new zim.Scroller(new Pic("foreground.png").addTo().mov(0,-150), 5)
    ]);


    // ~~~~~~~~  MOTION CONTROLLER  ~~~~~~~~
    // The MotionController can alternatively use keydown, gamestick, pressmove, etc.
    // see https://zimjs.com/docs.html?item=MotionController 

    const mc = new MotionController({
        target:accelerator, 
        type:"mousemove",
        axis:"horizontal",
        speed:100,
        minPercentSpeed:-200,
        maxPercentSpeed:200
    })
    // MotionController would start a 0 speed if no mouse movement 
    // so trick the MotionController to thing there is a value to start
    mc.x = 700;

    // ~~~~~~~~  SPRITE INTERACTION ANIMATION  ~~~~~~~~
    // We want to make the sprite shoot when we click on the stage or press the space bar
    // We will pause the Accelerator and not let them shoot again while they are currently shooting
    // We use the shooting check variable to handle this
    // See https://zimjs.com/zide for a more complex example 
    // with code to make sure we go to the end of the walk cycle before we start shooting

    const shootSound = new Aud("shoot.mp3", .3); // .3 is optional volume

    // capture mousedown events on either the backings or the sprite
    backings.on("mousedown", shoot);
    sprite.on("mousedown", shoot);
    // or capture a key press on the Frame 
    F.on("keydown", e => {if (e.keyCode==32) shoot();});

    let shooting = false;
    function shoot() {
        // only shoot if not shooting - the symbol for not is !
        if (!shooting) {
            shooting = true;
            accelerator.pause();
            shootSound.play();
            sprite.run({
                label:"shoot",
                time:.65,
                loop:true,
                loopCount:rand(1,3), // make sure this is non-zero - which would loop forever
                loopCall:() => { // play the sound as we loop
                    shootSound.play();
                }, 
                call:() => { // calls when animation done
                    shooting = false;
                    accelerator.pause(false);
                } 
            });
        }
    }


    // ~~~~~~~~  CREDIT LABEL  ~~~~~~~~
    const credit = new Container()
        .loc(-500, 30)
        .animate({
            props:{x:150}, 
            time:.7, 
            wait:1.3, 
            ease:"backOut", 
            rewind:true, 
            rewindWait:5
        })
        .tap(() => {
            zgo("http://animation.sheridanc.on.ca/portfolio/2018/caggiano", "antonio");
        });

    STYLE = {align:CENTER, valign:CENTER, color:white};
    new Label({
        text:"ANIMATOR",
        backing:new Rectangle(130,30,"black"),
        size:18
    }).ske(20).addTo(credit).loc(40,0);
    new zim.Label({
        text:"ANTONIO CAGGIANO",
        backing:new Rectangle(250,60,pink,green,3),
        size:20
    }).ske(20).addTo(credit).loc(0,43);
    STYLE = {};


    // ~~~~~~~~  BACKGROUND SOUND  ~~~~~~~~
    // We can't play sounds until the app is interacted with (browser rule) 
    // For a game we often make an intro pane they need to close to start 
    // but for an animation demo we may want to start the animation 
    // and provide a little sound toggle at bottom to turn the sound on 

    const sound = new Aud("sneak.mp3"); // backing sound

    let backingSound;
    const toggle = new Toggle({
        label:"music",
        color:tin,
        backgroundColor:blue,
        toggleBackgroundColor:green,
        startToggled:false
    })
        .sca(.5)
        .pos(30,30,LEFT,BOTTOM)
        .change(() => {
            if (!backingSound) {
                backingSound = sound.play(.3, true); // volume and loop
            }
            backingSound.paused = !toggle.toggled;
        });     
}

당신이 보는 것은 많은 코드처럼 보일 수 있지만 ZIM은 수백 줄의 코드를 저장하고 실제로 사용하기에 매우 간결하고 재미있습니다! 다음은 일부comparisons with other Frameworks입니다.

INFO SITE 및 ARTICLE을 살펴보고 인터랙티브 애니메이션을 성공적으로 만드시기 바랍니다! 문의 사항이 있으시면 SLACK 또는 DISCORD로 연락주세요.

닥터 초록