1

我正在寻找一种使用 CreateJS 设置淡入和淡出的方法。我对 CreateJS 完全陌生，我希望创建一个包含 2 个不同布局的小广告，每个布局都有一些小布局，它们将通过幻灯片显示或淡入淡出动画。这是我的尝试，我不确定我所做的是否正确，但有些步骤有效，有些则无效。任何帮助都非常受欢迎。

** 最后这是我希望在 10 秒内开发的序列：
   ** 第一帧
    -背景，产品图像应立即出现在第一帧上。
 - 淡入titleFrameOne。
  - 然后淡入蓝色文本。
 -frame 1 应该等待两秒钟。
 - 淡出除背景之外的第一帧上的所有内容。
 **第 2 帧
  - 淡入titleFrameOne。
    - 然后淡入greyCopy。
    - 与灰色副本动画同时，图章应从顶部（屏幕外）动画到其最终位置，并在着陆时反弹。我需要创建一个效果，让它看起来像是从天上掉下来，并在它降落时在地面上弹了一下，它的影子吃掉了末端。
- 淡出除背景图像之外的第 2 帧上的所有内容。
 另外我想知道我是否可以在 CSS 中制作这个动画，所以如果可能的话，我想知道我如何到达在 JS 中创建的 id 并在我的 CSS 样式表上操作它们。

我确切地说我正在使用：

  • 预加载JS
  • 画架JS
  • 吐温JS

感谢大家

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

    }

};
4

1 回答 1

0

而不是使用 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

于 2017-05-05T13:00:50.247 回答