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

Question

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

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

微调器代码（JavaScript > 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();