인터랙티브 애니메이션
33962 단어 animationcanvasjavascriptsprite
코드와 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은 대화형 애니메이션에 도움이 되는 다음과 같은 기능을 제공합니다.
다음은 포트폴리오 작품에 사용할 수 있는 interactive animation scene입니다. 게임 홍보 또는 웹사이트 배너의 작은 기능일 수 있습니다.
주석이 달린 코드를 보려면 CTRL 또는 ⌘ U를 사용하십시오. 예에서:
댓글이 있는 페이지의 코드는 다음과 같습니다.
<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로 연락주세요.
닥터 초록
Reference
이 문제에 관하여(인터랙티브 애니메이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/zimlearn/interactive-animation-4n48텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
