Эффект Рафаэль зум


Я начал играть с Рафаэлем и я интересно, если кто-то может сделать обзор кода из того, что я так далеко и может дать мне несколько советов, как улучшить его. В основном то, что я пытаюсь сделать-это зум-Ин/зум-аут влияние на элемент, когда событие mouseover запускается на элемент. Эффект должен приостанавливаться, когда событие mouseout срабатывает. Вот что я так далеко:

var paper = new Raphael(document.getElementById('container'), 500, 500);
var dot = paper.circle(100, 100, 15);

dot.attr({fill: "#ff0000"});

// is there a better way to do this?
var animation = Raphael.animation({r: 25}, 1000, function () {
  this.animate({r: 15}, 1000, function () {
    this.animate(animation);
  });
});

dot.mouseover(function () {
  dot.animate(animation);
});

dot.mouseout(function () {
  this.pause();
  this.animate({r: 15}, 500);
});

Вы также можете посмотреть демо здесь: http://jsfiddle.net/KEg8y/



593
4
задан 16 ноября 2011 в 06:11 Источник Поделиться
Комментарии
1 ответ

Если я правильно понял ваши намерения, то код уже работает нормально. Однако, как вы изучаете Рафаэль, есть две незначительные вещи, которые вы могли бы рассмотреть.
Во-первых, вы можете привязать ваши методы при установке атрибутов с помощью .м():

var dot = paper.circle(100, 100, 15).attr({fill: "#ff0000"});

Во-вторых, следует отметить, что Рафаэль дает .при наведении() метод, когда вы собираетесь использовать оба .события mouseover() и .mouseout(). Кроме того, в вашем .события mouseover() вызов, это является точка:

dot.hover(function () {
this.animate(animation);
}, function () {
this.pause();
this.animate({r: 15}, 500);
});

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

var paper = new Raphael(document.getElementById('container'), 500, 500);
var dot = paper.circle(100, 100, 15).attr({fill: "#ff0000"});

var steps = [
{params: {r: 25}, ms: 1200},
{params: {r: 35}, ms: 300},
{params: {r: 15}, ms: 800}
];

var animator = function() {
var step = steps.shift();
steps.push(step);
this.animate(step.params, step.ms, animator);
}

dot.hover(function () {
animator.call(this);
}, function () {
this.pause();
this.animate({r: 15}, 500);
});

Таким образом, дополнительные шаги могут быть включены в массив без дальнейшего вложения каких-либо обратных вызовов. Кроме того, теперь есть только одна функция объекта аниматор будет использовано для обратных вызовов. В аниматор делает первый шаг из списка шагов и кладет его обратно в конец массива. Затем тот же шаг выполняется как анимация с аниматор качестве обратного вызова. Обратите внимание, что аниматор называется точка динамически в первый .при наведении() функция, так что первые это.анимировать() называется на правильный объект.

Я раздвоенный твою скрипку: http://jsfiddle.net/rHPDP/

2
ответ дан 22 июня 2012 в 05:06 Источник Поделиться