如何使用 Raphaël.js 为路径填充设置动画？

Question

我正在尝试使用 hoverIntent.js with Raphaël.js at This Demo 来处理 handlerIn 函数，而不是立即等待，直到用户的鼠标速度足够慢，然后再调用任何函数（如悬停），但我收到此错误：

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

你能告诉我为什么会这样吗？ Raphaël.js 是否有任何内置函数来完成同样的工作？

Answer 1

问题是您正试图在路径上调用 .animate。您可以通过在 Google Chrome 调试器中打开 'catch uncaught exceptions' 来轻松调试此类问题，然后您可以与 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。

但是，我怀疑这可能行不通。相反，我会考虑在路径中添加 class 并使用 CSS 通过 class 制作动画。参见 examples of that here。

Answer 2

Raphael 有一个动画功能，所以如果设置正确，它应该可以工作。问题是 'this' 不会引用 Raphael 元素，它会引用 JQuery 元素，所以我们需要更改它。

我们可以用 javascripts .bind() 方法做到这一点，所以这里有一个例子，如果我们想将它应用到每个元素（如果你只想添加它，你可以摆脱循环）到单个元素）。

这是关键位（只看中间一行，即函数绑定位）..这意味着拉斐尔元素"boxes[el]"将被传递到'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 ] ) );
    } );

jsfiddle

jsfiddle 鼠标悬停

如何使用 Raphaël.js 为路径填充设置动画？

How can I animate the fill of a path with Raphaël.js?

javascript

raphael

hoverintent