Добавьте затухание с помощью CreateJS gang
Я ищу способ настройки постепенного появления и исчезновения с помощью CreateJS. Я совершенно новичок в CreateJS, и я хочу создать небольшую рекламу с двумя разными макетами, каждая из которых имеет несколько маленьких макетов, внутри которых они будут отображаться при скольжении. или анимация постепенного исчезновения. Это моя попытка, я не уверен, что то, что я сделал, правильно, но некоторые шаги работают, а другие нет. Любая помощь действительно приветствуется.
** Наконец, это последовательность, которую я хочу развить за 10 секунд:
** кадр 1
-Фон, изображение товара должно появиться сразу на первом кадре.
- исчезновение в названии FrameOne.
Затем исчезают в синем тексте.
-кадр 1 должен подождать две секунды.
-Затемните весь контент на первом кадре, кроме фона.
** Рамка 2
- исчезновение в названии FrameOne.
- Затем исчезают в серой копии.
- В то же время, когда серая копия анимируется, штамп должен анимироваться сверху (за пределами экрана) до конечного положения и отскакивать при приземлении. Мне нужно создать эффект, который заставит его казаться падающим с неба и слегка подпрыгивать на земле, когда он приземлится, когда тень съела конец.
-Затемните весь контент в кадре 2, кроме фонового изображения.
Кроме того, мне было интересно, могу ли я сделать эту анимацию в CSS, поэтому, если это возможно, я хочу знать, как добраться до идентификаторов, созданных в JS, и манипулировать ими в моей таблице стилей CSS.Я точно использую:
- 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.");
}
};
1 ответ
Вместо использования setTimeout используется обратный вызов tweenjs.
В handleAllImagesLoaded вы не должны вызывать drawFrameOne и drawFrameTwo(); это должен быть обратный вызов drawFrameOne
createjs.Tween.get(blueText).to({ alpha: 1 }, 2000).call(drawFrameTwo);
Пожалуйста, обратитесь к документу для получения дополнительной информации http://www.createjs.com/docs/tweenjs/modules/TweenJS.html