Raphaël：尝试将半动画文本添加到Spinner图形中

Question

我正在尝试在我的Spinner图形中添加一串文字。例如，我希望能够将文本放在 下面，放在旁边，或放在 Spinner轮中。问题是，我不知道该怎么做。另外，我只想对文本本身进行半动画处理（如果我动画太多，用户可能无法阅读它）。

• 使用Raphael创建的旋转器：
  • http://jsfiddle.net/mnbishop017/vM9uk/
  • http://jsfiddle.net/mnbishop017/5BHhE/
• 目标结果的HTML 示例模型 ：http://jsfiddle.net/mnbishop017/4Enrk/

Spinner代码（JavaScript＆gt;Raphaël）：

window.onload = function () {
    function spinner(holderid, R1, R2, count, stroke_width, color) {
        var sectorsCount = count || 12,
            color = color || "#fff",
            width = stroke_width || 15,
            r1 = Math.min(R1, R2) || 35,
            r2 = Math.max(R1, R2) || 60,
            cx = r2 + width,
            cy = r2 + width,
            r = Raphael(holderid, r2 * 2 + width * 2, r2 * 2 + width * 2),

            sectors = [],
            opacity = [],
            beta = 2 * Math.PI / sectorsCount,

            pathParams = {
                stroke: color,
                "stroke-width": width,
                "stroke-linecap": "round"
            };
        Raphael.getColor.reset();
        for (var i = 0; i < sectorsCount; i++) {
            var alpha = beta * i - Math.PI / 2,
                cos = Math.cos(alpha),
                sin = Math.sin(alpha);
            opacity[i] = 1 / sectorsCount * i;
            sectors[i] = r.path([
                ["M", cx + r1 * cos, cy + r1 * sin],
                ["L", cx + r2 * cos, cy + r2 * sin]
            ]).attr(pathParams);
            if (color == "rainbow") {
                sectors[i].attr("stroke", Raphael.getColor());
            }
        }
        var tick;
        (function ticker() {
            opacity.unshift(opacity.pop());
            for (var i = 0; i < sectorsCount; i++) {
                sectors[i].attr("opacity", opacity[i]);
            }
            r.safari();
            tick = setTimeout(ticker, 1000 / sectorsCount);
        })();
        return function () {
            clearTimeout(tick);
            r.remove();
        };
    }
    spinner("holder", 0, 120, 17, 2, "#000");
    // spinner("holder", -120, 120, 17, 2, "#005075"); Second spinner inserted above first spinner
};

所需结果的样本（以HTML格式）

<div>
    <!-- .placeholder is where the main Loading graphic (or animation) appears -->
    <div class="placeholder"></div>

    <!-- .text is where the Loading text appears: -->
    <!-- next to the graphic, vertically aligned to the middle -->
    <div class="text">loading</div>
</div>

Answer 1

你在你提供的演示中混合了2个库，微调器是Raphael，加载文本是jQuery。我在这里结合了两个 - http://jsfiddle.net/robschmuecker/vM9uk/13/ - 这是HTML的组合：

<div class="box">
    <!-- .placeholder is where the main Loading graphic (or animation) appears -->
    <div class="placeholder"></div>
    <!-- .text is where the Loading text appears: next to the graphic -->
    <div class="text">loading <span class="dot">.</span>
 <span class="dot">.</span>
 <span class="dot">.</span>

    </div>
</div>

此JavaScript包含RaphaelJS和jQuery：

$(document).ready(function () {
    var firstDot = $(".dot:first-of-type");
    var midDot = $(".dot:nth-of-type(2)");
    var lastDot = $(".dot:last-of-type");
    firstDot.hide();
    midDot.hide();
    lastDot.hide();
    $(".placeholder,.text").hide().fadeIn(1000, function () {
        var interv = 0;
        interv = setInterval(function () {
            firstDot.fadeIn(250, function () {
                midDot.fadeIn(250, function () {
                    lastDot.fadeIn(250);
                });
            }).delay(1000).fadeOut(250, function () {
                midDot.fadeOut(250, function () {
                    lastDot.fadeOut(250);
                });
            });
        }, 3000)
    });
});

然后用一些简单的CSS来操作加载文本和微调器的位置。 然而，这可能并不理想，因为您必须同时加载RaphaelJS和jQuery。纯粹的RaphaelJS也很有可能做到这一点;看看这里的参考文献：http://raphaeljs.com/reference.html和演示，以了解你想做什么。作为一个例子，我们在这里添加了一个简单的文本元素到旋转器的中间，并在连续循环中淡入淡出。 （演示：http://jsfiddle.net/robschmuecker/vM9uk/14/）

tempText = r.text(R2, R2, "Loading ...");
        function fadeTextOut(){
            tempText.animate({opacity: 0}, 2500, fadeTextIn);
        }
        function fadeTextIn(){
            tempText.animate({opacity: 1}, 2500, fadeTextOut);
        }
        fadeTextOut();