javascript - 拉斐尔 : trying to add semi-animated text to Spinner graphic

Question

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

• 与 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();