Question

我正在寻找一种方法来设置淡入淡出和淡出CreateJS。我在CreateJS上是全新的，我希望创建一个2个不同布局的小广告，每个布局都有一些布局，他们将在其中通过幻灯片或淡入淡出动画显示。这是我的尝试，我不确定我做的是否正确，但有些步骤有效，有些则没有。任何帮助都非常受欢迎。

** 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.");

    }

};

Answer 1

而不是使用tweenjs的回调来使用setTimeout。

在handleAllImagesLoaded中，你不应该同时调用drawFrameOne和drawFrameTwo（）;它应该是回调drawFrameOne

createjs.Tween.get(blueText).to({ alpha: 1 }, 2000).call(drawFrameTwo);

请参阅文档了解更多信息 http://www.createjs.com/docs/tweenjs/modules/TweenJS.html

使用CreateJS帮派添加淡出效果

1 个答案: