1
Je cherche un moyen de créer un fondu entrant et de fondu avec CreateJS.Je suis complètement nouveau sur CreateJS et je souhaite créer une petite publicité de 2 mises en page différentes, chacune avec quelques petites mises en page à l'intérieur desquelles elles apparaîtront par glissade ou fondu d'animation in-out. Ceci est mon essai, je ne suis pas sûr si ce que j'ai fait est juste, mais certaines étapes fonctionnent et d'autres pas. Toute aide est vraiment la bienvenue.Ajouter un fondu avec un gang 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.
Je précise que j'utilise:
- PreloadJS
- EaselsJS
- TweenJS
Merci à tous
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.");
}
};