如何用Raphaël.js动画路径的填充？

Question

我正在尝试使用hoverIntent.js with Raphaël.js at 这个演示来处理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有一个动画功能，所以如果设置正确的话，这个功能应该可以工作。问题是' this‘不是指Raphael元素，而是指一个JQuery元素，因此我们需要更改这个元素。

我们可以使用javascripts .bind()方法来实现这一点，所以如果我们想将它应用到每个元素(如果只想将它添加到单个元素中，则可以去掉循环)，下面是一个示例。

这是关键位(只需查看中间行，即函数绑定位)，..this意味着Raphael元素"boxesel“将被传递到' This‘。

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 ] ) );
    } );    

小提琴

悬停的小提琴

Answer 2

问题是您试图在路径上调用.animate。您可以通过切换Google调试器中的“捕捉未捕获异常”来轻松调试此类问题，然后您可以与JavaScript进行交互，包括状态(这样您就可以在控制台上访问this并查看它设置的是什么，并尝试在其上设置属性)。

要获得.animate属性，需要将节点封装在jQuery调用中，这样就可以像$(this).animate(...)这样的东西了，但是jQuery似乎无法激活SVG。所以你需要想出另一种方法。

下面是一个不使用.animate：http://jsfiddle.net/h4nBx/13/的示例

在使用SVG时，是时候超越jQuery了，因为它不会很有帮助(根据我的经验)。阅读标准是一个很好的起点：

SVG1.1动画：http://www.w3.org/TR/SVG/animate.html

基于此，您可以尝试在path元素中添加一个动画标记：

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

在path标记内部，如所见的在这里，它在一个rect标签里面。

然而，我怀疑这可能行不通。相反，我会考虑向路径中添加一个类，并通过这个类使用CSS来完成动画。见这里的例子。