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

Question

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

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

Обновление 1: Чтобы отслеживать мои успехи, here is a link to my sandbox.

Обновление 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

Вы там алом. first: вы можете NOT иметь несколько контекстов одновременно для одного и того же холста! либо использовать несколько холстов-узлов, уложенных друг на друга или изменить цвет после 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/