1
CreateJSでフェードインとフェードアウトを設定する方法を探しています。私はCreateJSでまったく新しく、2つの異なるレイアウトの小さな広告を作成したいと思いますスライドやフェードインアニメーションで表示される小さなレイアウトです。 これは私の試みですが、私がしたことは正しいのですが、いくつかのステップがうまくいくかどうかは分かりません。どんな助けも本当に歓迎です。CreateJSのギャングでフェードアウトを追加する
** Finally this is the sequence I wish to develop it in 10 seconds:
** Frame 1
-The background, product image should appear immediately on the first frame.
-Fade in the titleFrameOne.
-Then fade in the blueText.
-frame 1 should wait for two seconds.
-Fade out all content on frame one except the background.
**Frame 2
-Fade in the titleFrameOne.
-Then fade in the greyCopy.
-At the same time as the grey copy animate the stamp should animate from the top (off screen) to its final position, and bounce when it lands. I need to create an effect that makes it appear to fall from the sky and bounce a bit on the ground when it lands with its shadow ate the end.
-Fade out all content on frame 2 except the background image.
Also I was wondering if I can do this animation in CSS so if it's possible I wish to know how I reach the id's created in JS and manipulate them on my CSS style sheet.
私が使用していることを私精密：
- PreloadJS
- EaselsJS
- TweenJS
みんなありがとう
HTML：
<body>
<canvas id="stage" width="300" height="250"></canvas>
</body>
JS：
// JavaScript Document
window.onload = function() {
console.log("ad");
// variables here.
//Frame 1
var background;
var products;
var titleFrameOne;
var blueText;
//Frame 2
var titleFrameTwo;
var greyCopy;
var stamp;
var shadow;
// store a reference to the canvas which we will draw on.
var stage = new createjs.Stage("stage");
// register the stage to handle mouse events.
stage.enableMouseOver(10);
// register the Ticker to listen for the tick event.
createjs.Ticker.addEventListener("tick", handleTick, false);
// redraw the canvas - like Event.ENTER_FRAME in Adobe Flash.
function handleTick(event) {
stage.update();
}
// create a preloader to load the images.
var loader = new createjs.LoadQueue(false);
// when all images are loaded call the handleAllImageLoaded function.
loader.on('complete', handleAllImagesLoaded, this);
// provide a manifest of files and ids to be loaded.
loader.loadManifest([
{ id: "background", src: "images/background.png" },
{ id: "products", src: "images/frameOne/products.png" },
{ id: "titleFrameOne", src: "images/frameOne/titleFrameOne.png" },
{ id: "blueText", src: "images/frameOne/blueText.png" },
{ id: "titleFrameTwo", src: "images/frameTwo/titleFrameTwo.png" },
{ id: "greyCopy", src: "images/frameTwo/greyCopy.png" },
{ id: "stamp", src: "images/frameTwo/stamp.png" },
{ id: "shadow", src: "images/frameTwo/shadow.png" },
]);
function handleAllImagesLoaded() {
console.log("All the images have loaded.");
drawTheBannerBackground();
drawFrameOne();
drawFrameTwo();
}
/**********Background**************/
function drawTheBannerBackground() {
console.log("Done - background draw & animation.");
// provide the loader result for the item with id == 'background'
// as a bitmap which will be stored in our background variable.
background = new createjs.Bitmap(loader.getResult("background"));
// set the background bitmap alpha to zero.
background.alpha = 0;
// add background to the display list.
stage.addChild(background);
// animate the background bitmap alpha value to 1 over the duration of 0 milliseconds.
createjs.Tween.get(background).to({ alpha: 1 }, 0);
// after the background is drawn on the canvas draw and animate the content for frame 1.
}
/*****************************Frame 1*****************************/
function drawFrameOne() {
products = new createjs.Bitmap(loader.getResult("products"));
titleFrameOne = new createjs.Bitmap(loader.getResult("titleFrameOne"));
blueText = new createjs.Bitmap(loader.getResult("blueText"));
products.alpha = 0;
titleFrameOne.alpha = 0;
blueText.alpha = 0;
stage.addChild(products);
stage.addChild(titleFrameOne);
stage.addChild(blueText);
createjs.Tween.get(products).to({ alpha: 1 }, 0);
createjs.Tween.get(titleFrameOne).to({ alpha: 1 }, 1000);
createjs.Tween.get(blueText).to({ alpha: 1 }, 2000);
console.log("Done - products draw & animation.");
console.log("Done - titleFrameOne draw & animation.");
console.log("Done - blueText draw & animation.");
setTimeout(drawFrameTwo, 2000);
}
/*****************************Frame 2*****************************/
function drawFrameTwo() {
titleFrameTwo = new createjs.Bitmap(loader.getResult("titleFrameTwo"));
greyCopy = new createjs.Bitmap(loader.getResult("greyCopy"));
stamp = new createjs.Bitmap(loader.getResult("stamp"));
shadow = new createjs.Bitmap(loader.getResult("shadow"));
tit`enter code here`leFrameTwo.alpha = 0;
greyCopy.alpha = 0;
stamp.alpha = 0;
shadow.alpha = 0;
stage.addChild(titleFrameTwo);
stage.addChild(greyCopy);
stage.addChild(stamp);
stage.addChild(shadow);
createjs.Tween.get(titleFrameTwo).to({ alpha: 1 }, 1000);
createjs.Tween.get(greyCopy).to({ alpha: 1 }, 2000);
createjs.Tween.get(stamp).to({ alpha: 1 }, 3000);
createjs.Tween.get(shadow).to({ alpha: 1 }, 4000);
console.log("Done - titleFrameTwo draw & animation.");
console.log("Done - greyCopy draw & animation.");
console.log("Done - stamp draw & animation.");
console.log("Done - shadow draw & animation.");
}
};