Блог

Главная - Вопросы по программированию - сделайте простой переход в easelsjs

сделайте простой переход в easelsjs

#easeljs

#easeljs

Вопрос:

Я использую easelsjs, и мне нужно сделать простой переход. Просто постепенно меняйте непрозрачность сцены. Я использую свойство alpha и тикер, но я не вижу перехода, а только его последнюю стадию. Есть ли простой пример для этого — я пытался посмотреть, но не смог найти

Комментарии:

1. Можете ли вы показать нам свой код или даже создать скрипку на jsfiddle.net ? Трудно узнать причину проблемы без какого-либо кода.

2. Вот небольшая скрипка, которую я создал. jsfiddle.net/7HsAp Это просто меняет альфу на последнюю точку, которая мне нужна, но я не знаю, как сделать так, чтобы это происходило постепенно. Я должен упомянуть, что я не использую опцию Ticker в своем проекте, и каждый раз, когда мне нужно обновить этап, я явно вызываю stage.update.

Ответ №1:

Я не знаю, хотите ли вы изменить непрозрачность сцены или непрозрачность фигуры, но если вы хотите, чтобы весь ваш холст имел меньшую непрозрачность, вы можете просто использовать переходы JavaScript CSS для этого. В этом случае нет необходимости в EaselJS.

Но если вы хотите создавать альфа-переходы на объектах canvas, вам следует взглянуть на TweenJS, это значительно упрощает процесс анимации.

Кроме того, если вы хотите продолжать использовать только EaselJS (или с TweenJS), вам нужно будет правильно реализовать тикер, вот как я создаю свою функцию ticker:

 createjs.Ticker.on("tick", tick);
createjs.Ticker.setFPS(60); // This will call the tick() function at every 1000/60ms

function tick() {
    stage.update();
}

И затем вам нужно будет указать, когда была нажата ваша кнопка, для вашей функции бегущей строки, чтобы она могла уменьшать альфа вашего объекта в каждом кадре. Я настоятельно рекомендую использовать TweenJS вместо этого (я поместил демонстрацию TweenJS в конце этого ответа):

 $(document).ready(function () {

    var stage = new createjs.Stage(canvas);
    var s = new createjs.Shape();
    s.graphics.beginStroke("#F00").beginFill("#FF0000").drawRect(150.5, 100.5, 300, 300);
    stage.addChild(s);

    $("#d").click(function () {
        s.fadeOut = true;
    });

    // Tick:
    createjs.Ticker.on("tick", tick);
    createjs.Ticker.setFPS(60);

    function tick() {
        if(s.fadeOut){
            s.alpha -= 0.01;
            s.fadeOut = (s.alpha > 0.4);
        }
        stage.update();
    }
});

Демонстрация TweenJS fadeOut

Я также немного упростил ваш код. Вот как будет выглядеть код внутри обработчика события щелчка с помощью TweenJS:

 createjs.Tween.get(s).to({alpha: 0.4},1000);

Демонстрация TweenJS fadeOut

Обратите внимание, что и EaselJS, и TweenJS работают вместе.