Как я могу анимировать заполнение пути с помощью Raphaël.js?

Question

Я пытаюсь использовать hoverIntent.js с Raphaël.js по адресу This Demo, чтобы обрабатывать функцию handlerIn не сразу и ждать, пока мышь пользователя не замедлит работу до вызова любой функции (например, Hover), но я получаю эту ошибку:

Uncaught TypeError: Failed to execute 'animate' on 'Element': The provided value is not of type '(AnimationEffect or sequence<Dictionary>)' 

Можете ли вы, пожалуйста, дайте мне знать, почему это происходит? и у Raphaël.js есть встроенная функция для выполнения той же работы?

Answer 1

У Raphael есть функция анимации, поэтому это должно работать, если установлено правильно. Проблема в том, что «это» не будет ссылаться на элемент Рафаэля, он будет ссылаться на элемент JQuery, поэтому нам нужно изменить это.

Мы можем сделать это с помощью метода javascripts .bind(), вот пример того, как он будет выглядеть, если мы хотим применить его к каждому элементу (вы можете избавиться от цикла, если хотите только добавить его в один элемент).

Это ключевой бит (просто посмотрите на среднюю линию, то есть бит связывания функции) .. это означает, что элемент Рафаэля «Ящики [el]» будут переданы в «это».

Object.keys(boxes).forEach(function(el) { 
    $(boxes[ el ].node).hoverIntent(hoverFunc.bind(boxes[ el ])); 
}); 

Таким образом, вся эта партия может выглядеть так ...

    var Draw = Raphael("canvas", 200, 200); 
    var boxes = { 
     BC: Draw.path("M50 50, L50,60, L60,60 L60,50 L50,50").attr({ 
      fill: "#000" 
     }), 

     ON: Draw.path("M70 70, L70,80, L80,80 L80,70 L70,70").attr({ 
      fill: "#000" 
     }), 
     NB: Draw.path("M90 90, L90,100, L100,100 L100,90 L90,90").attr({ 
      fill: "#000" 
     }) 
    } 

    function hoverFunc() { 
     this.animate({ 
      "fill": "#F38A03" 
     }, 500); 
    } 

    Object.keys(boxes).forEach(function(el) { 
     $(boxes[ el ].node).hoverIntent(hoverFunc.bind(boxes[ el ])); 
    });  

jsfiddle

jsfiddle с висения из

Answer 2

Проблема в том, что вы пытаетесь позвонить по телефону .animate по пути. Вы можете легко отлаживать проблемы, подобные этому, переключаясь на «catch uncaught exceptions» в отладчике Google Chrome, а затем вы можете взаимодействовать с JavaScript, включая состояние (чтобы вы могли получить доступ к this на консоли и посмотреть, на что он установлен, и попытаться установить свойства на нем).

Чтобы получить объект .animate, вам необходимо обернуть узел вызовом jQuery, чтобы что-то вроде $(this).animate(...), однако jQuery, похоже, не в состоянии оживить SVG. Поэтому вам нужно выяснить другой способ сделать это.

Вот пример, который работает без .animate: http://jsfiddle.net/h4nBx/13/

При работе с SVG, настало время, чтобы выйти за пределы JQuery, потому что это не будет очень полезно (в моем опыте). Хорошее место, чтобы начаться чтение стандарт:

SVG 1.1 Анимация: http://www.w3.org/TR/SVG/animate.html

Исходя из этого, вы можете попробовать добавить одушевленным тег внутри элемента пути:

<animate attributeType="CSS" attributeName="fill" 
     from="???" to="#F38A03" dur="5s" /> 

Внутри из тег пути, как видно here with it inside of a rect tag.

Однако, я подозреваю, что это может не сработать. Вместо этого я хотел бы добавить класс к пути и использовать CSS для создания анимации через этот класс. См. examples of that here.