Анимация свечения в Raphael.js - PullRequest
Новая
       2

Анимация свечения в Raphael.js

1 голос
/ 23 марта 2012

Я пытаюсь добиться эффекта пульсирующего свечения в Raphael.js. Вот мой код http://jsfiddle.net/eaPSC/ Я очень сожалею о массивном мозге. ;)

Я пытался анимировать как ширину эффекта свечения, так и непрозрачность, и, похоже, анимация ни на что не влияла. (Свечение является статическим. Я исследовал его, скрывая элемент мозга, увеличивая масштаб и проверяя только элемент свечения, и ничего не происходит.)

Я попытался анимировать отдельный (не светящийся) элемент, используя одну и ту же процедуру, и несколько атрибутов действительно анимированы.

спасибо!

Ответы [ 2 ]

5 голосов
/ 26 марта 2012

Вы не можете анимировать свойства ширины или цвета свечения. Свечение создается путем добавления обводки к набору путей с нулевой заливкой. Если вы хотите изменить цвет или ширину свечения, вам нужно анимировать свойства обводки или ширины обводки.

http://jsfiddle.net/eaPSC/2/

Неправильно: (цитата из вашего источника): 

  anim = Raphael.animation({
    width: 15,
    opeacity: 1
  }, 500);

Немного правильнее: 

  anim = Raphael.animation({
    "stroke-width": 15,
    opacity: 1
  }, 500);

Но вы заметите, что это убивает эффект градиентного свечения. Если вы посмотрите на исходный код glow (), вы увидите, что последний цикл for создает многоуровневый набор путей для создания эффекта градиента. 

 elproto.glow = function (glow) {
    if (this.type == "text") {
        return null;
    }
    glow = glow || {};
    var s = {
        width: (glow.width || 10) + (+this.attr("stroke-width") || 1),
        fill: glow.fill || false,
        opacity: glow.opacity || .5,
        offsetx: glow.offsetx || 0,
        offsety: glow.offsety || 0,
        color: glow.color || "#000"
    },
        c = s.width / 2,
        r = this.paper,
        out = r.set(),
        path = this.realPath || getPath[this.type](this);
    path = this.matrix ? mapPath(path, this.matrix) : path;
    for (var i = 1; i < c + 1; i++) {
        out.push(r.path(path).attr({
            stroke: s.color,
            fill: s.fill ? s.color : "none",
            "stroke-linejoin": "round",
            "stroke-linecap": "round",
            "stroke-width": +(s.width / c * i).toFixed(3),
            opacity: +(s.opacity / c).toFixed(3)
        }));
    }
    return out.insertBefore(this).translate(s.offsetx, s.offsety);
};

Так что, если вы просто установите ширину обводки для всех этих путей, это убьет эффект свечения, как вы увидите в примере. На самом деле нет простого ответа на этот вопрос. Вы можете анимировать его самостоятельно, используя setInterval, чтобы удалить старое свечение и добавить новое с новой шириной, но это не очень эффективный метод.

1 голос
/ 24 июля 2012

Я смог исправить эту проблему без проблем с синхронизацией, как показано в вашей демоверсии jsfiddle, добавив следующее для возобновления. 

elproto.resume = function (anim) {
    for (var i = 0; i < animationElements.length; i++) if (animationElements[i].el.id == this.id && (!anim || animationElements[i].anim == anim)) {
        var e = animationElements[i];
        if (eve("raphael.anim.resume." + this.id, this, e.anim) !== false) {

            delete e.paused;
            this.status(e.anim, e.status,**e.totalOrigin**);
        }
    }
    return this;
};
...