Question

当用户将鼠标悬停在

上时，我正在使用以下代码为虚线设置动画：如何修改代码，以便当用户执行不同的事件（例如在html中加载）时，它会启动绘制线的函数。谢谢！

$(function() {

    animateLine = function(canvas, hoverDivName, colorNumber, pathString) {
        $('#' + hoverDivName).hover(

        function() {
            var line = canvas.path(pathString).attr({
                stroke: colorNumber
            });

            var length = line.getTotalLength();

            $('path[fill*="none"]').animate({
                'to': 1
            }, {
                duration: 5000,
                step: function(pos, fx) {
                    var offset = length * fx.pos;
                    var subpath = line.getSubpath(0, offset);
                    canvas.clear();
                    canvas.path(subpath).attr({
                        stroke: colorNumber,
                        "stroke-dasharray":"--",
                        "stroke":"#a36d66"
                    });

                },
            });
        }, function() {
            $('path[fill*="none"]').stop(true, false);
        });
    };

    var canvas = Raphael('canvas', 900, 648);
    var pathString = "m441.5,223.5c67,-85 47,246 180,110c12,-43 24,-81 8,  T1600 ";

    animateLine(canvas, "canvas", "#000", pathString);

});



<div id="canvas"> 
        <p>Hover over me</p>        
    </div>

Answer 1

Raphael只是常规的旧Javascript，因此您可以将代码放在函数中并在您喜欢的任何页面事件上执行它们。例如：

<input id="start" type="button" value="Begin!" />
<div id="canvas"></div>
<script>
    var canvas = Raphael('canvas', 900, 648);
    var pathString = "m441.5,223.5c67,-85 47,246 180,110c12,-43 24,-81 8,  T1600 ";

    $('#start').click(function(e) {
        animateLine(canvas, "canvas", "#000", pathString);
    });

    var animateLine = [etc. etc.]
<script>

jsFiddle

在不同的事件上使用raphael动画虚线

1 个答案: