Как анимировать альфа из серии путей холста HTML?

Question

Я хочу создать простой цикл анимации, используя HTML-холст.Каждый путь (или треугольник) предназначен для постепенного появления, а затем постепенного исчезновения в той же последовательности.Я нашел много ресурсов вокруг анимации с помощью движения, но не с помощью альфы и особенно не анимации путей в последовательности в пределах холста.Любые идеи?

Отказ от ответственности: Это мой первый опыт использования canvas, и мои знания javascript скудны.Поскольку я использую ту же форму, я собираюсь выяснить, как копировать, поворачивать и переводить оригинал как отдельное обучение.

Обновление 1: Чтобы отслеживать мой прогресс, вот ссылка на мою песочницу .

Обновление 2: Я изменил структуру скрипта, чтобы дать мне больше контроля над каждым путем.

var elem = document.getElementById('loader');

if (elem && elem.getContext) {

var ctxYellow = elem.getContext('2d');
var ctxOrange = elem.getContext('2d');
var ctxRed = elem.getContext('2d');
var ctxViolet = elem.getContext('2d');
var ctxBlue = elem.getContext('2d');

// Yellow triangle
if (ctxYellow) {
    ctxYellow.fillStyle = '#f5ab1c';
    ctxYellow.beginPath();
    ctxYellow.moveTo(150, 150);
    ctxYellow.lineTo(20, 75);
    ctxYellow.lineTo(150, 0);
    ctxYellow.lineTo(150, 150);
    ctxYellow.fill();
    ctxYellow.closePath();
}

// Orange triangle
if (ctxOrange) {
    ctxOrange.fillStyle = '#f26d23';
    ctxOrange.beginPath();
    ctxOrange.moveTo(150, 150);
    ctxOrange.lineTo(150, 0);
    ctxOrange.lineTo(280, 75);
    ctxOrange.lineTo(150, 150);
    ctxOrange.fill();
    ctxOrange.closePath();
}

// Red triangle
if (ctxRed) {
    ctxRed.fillStyle = '#cd1f44';
    ctxRed.beginPath();
    ctxRed.moveTo(150, 150);
    ctxRed.lineTo(280, 75);
    ctxRed.lineTo(280, 225);
    ctxRed.lineTo(150, 150);
    ctxRed.fill();
    ctxRed.closePath();
}

// Violet triangle
if (ctxViolet) {
    ctxViolet.fillStyle = '#851a54';
    ctxViolet.beginPath();
    ctxViolet.moveTo(150, 150);
    ctxViolet.lineTo(280, 225);
    ctxViolet.lineTo(150, 300);
    ctxViolet.lineTo(150, 150);
    ctxViolet.fill();
    ctxViolet.closePath();
}

// Blue triangle
if (ctxBlue) {
    ctxBlue.fillStyle = '#295a9c';
    ctxBlue.beginPath();
    ctxBlue.moveTo(150, 150);
    ctxBlue.lineTo(150, 300);
    ctxBlue.lineTo(20, 225);
    ctxBlue.lineTo(150, 150);
    ctxBlue.fill();
    ctxBlue.closePath();
}
}

Answer 1

ОК, я вроде обманул.Я в конечном итоге с помощью JQuery.Вот что у меня получилось:

var elem = document.getElementById('yellow');

if (elem && elem.getContext) {
var ctx = elem.getContext('2d');
    ctx.fillStyle = 'rgba(245,171,28,1)';
    ctx.beginPath();
    ctx.moveTo(150,150);
    ctx.lineTo(20,75);
    ctx.lineTo(150,0);
    ctx.lineTo(150,150);
    ctx.fill();
    ctx.closePath();
}

var elem = document.getElementById('orange');

if (elem && elem.getContext) {
var ctx = elem.getContext('2d');
    ctx.fillStyle = 'rgba(242,109,35,1)';
    ctx.beginPath();
    ctx.moveTo(150,150);
    ctx.lineTo(150,0);
    ctx.lineTo(280,75);
    ctx.lineTo(150,150);
    ctx.fill();
    ctx.closePath();
}

var elem = document.getElementById('red');

if (elem && elem.getContext) {
var ctx = elem.getContext('2d');
    ctx.fillStyle = 'rgba(205,31,68,1)';
    ctx.beginPath();
    ctx.moveTo(150,150);
    ctx.lineTo(280,75);
    ctx.lineTo(280,225);
    ctx.lineTo(150,150);
    ctx.fill();
    ctx.closePath();
 }

var elem = document.getElementById('violet');

if (elem && elem.getContext) {
var ctx = elem.getContext('2d');
    ctx.fillStyle = 'rgba(133,26,84,1)';
    ctx.beginPath();
    ctx.moveTo(150,150);
    ctx.lineTo(280,225);
    ctx.lineTo(150,300);
    ctx.lineTo(150,150);
    ctx.fill();
    ctx.closePath();
}

var elem = document.getElementById('blue');

if (elem && elem.getContext) {
var ctx = elem.getContext('2d');
    ctx.fillStyle = 'rgba(41,90,156,1)';
    ctx.beginPath();
    ctx.moveTo(150, 150);
    ctx.lineTo(150, 300);
    ctx.lineTo(20, 225);
    ctx.lineTo(150, 150);
    ctx.fill();
    ctx.closePath();
}

$(function() {
var timer = null;

var anim = function() {
    $.each([yellow, orange, red, violet, blue], function(i, el) {
        $('.color' + (i + 1)).delay(100 * i).fadeIn();
    });

    setTimeout(function() {
        $.each([yellow, orange, red, violet, blue], function(i, el) {
            $('.color' + (i + 1)).delay(100 * i).fadeOut();
        });
    }, 1500);

    if (!timer) {
        return timer = setInterval(anim, 3000);
    } else {
        return;
    }
}

anim();

})

Я сделал отдельные холсты для каждого пути, абсолютно позиционировал их и анимировал с помощью jQuery.Спасибо за совет!Это помогло.

Обновление: Мой сосед по комнате провёл меня через некоторые улучшения, чтобы очистить код и сделать его более плавным.Я до сих пор не могу заставить это работать в Firefox.

Answer 2

ты почти там. первое: вы можете НЕ иметь несколько контекстов одновременно для одного и того же узла холста! либо используйте несколько узлов canvas, расположенных друг над другом, либо измените цвет после closePath() и до beginPath. Это на самом деле то, что вы делаете в любом случае, только то, что вы использовали для этого 5 переменных, где одной достаточно.

Альфа может быть анимирована с помощью:

var ctx = elem.getContext('2d');
ctx.globalAlpha = 0.4;

опять же, как и цвет, это можно сделать во время анимации, хотя это изменит общее альфа-значение (не уверен, что это правильный подход). Я бы посоветовал использовать rgba() значения для fillStyle. в основном вам нужно перевести определение цвета из значений hey в значения rgb, а затем добавить значение от 0 до 1 для значения альфа. Google hex для RGBA для генераторов.

PS: ознакомьтесь со спецификацией W3C для получения дополнительной информации: http://dev.w3.org/html5/2dcontext/