前言

Question

前言

我正在实现一个jQuery插件，它提供文本淡化效果[demo]。通过基于字符索引序列的字符替换来获得效果。

例如，有这个文本（11个字符x 9行= 99个字符）：

var text = 
  "0123456789\n"+
  "0123456789\n"+
  "0123456789\n"+
  "0123456789\n"+
  "0123456789\n"+
  "0123456789\n"+
  "0123456789\n"+
  "0123456789\n"+
  "0123456789\n"

此序列导致从左到右从上到下褪色效果[fiddle]：

var sequence =      
  [ 0,  1,  2,  3,  4,  5,  6,  7,  8,  9, 10 ,
   11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 ,
   22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32 ,
   33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43 ,
   44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54 ,
   55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65 ,
   66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76 ,
   77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87 ,
   88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98 ]

生成此序列很容易：

var textToSequence = function(text) {
  for (var s = [], i = 0; i < text.length; i++) s.push(i)
  return s
}
var sequence = textToSequence(text)

问题

我想在45°扭曲螺旋效果中顺时针方向添加一个顺时针（不，它不是极端潜水型的名称：P）。这是上面text的正确序列：

var sequence = [ 0, 10, 98, 88, 11, 1, 9, 21, 87, 97, 89, 77, 22, 12, 2, 8, 20, 32, 76, 86, 96, 90, 78, 66, 33, 23, 13, 3, 7, 19, 31, 43, 65, 75, 85, 95, 91, 79, 67, 55, 44, 34, 24, 14, 4, 6, 18, 30, 42, 54, 64, 74, 84, 94, 92, 80, 68, 56, 45, 35, 25, 15, 5, 17, 29, 41, 53, 63, 73, 83, 93, 81, 69, 57, 46, 36, 26, 16, 28, 40, 52, 62, 72, 82, 70, 58, 47, 37, 27, 39, 51, 61, 71, 59, 48, 38, 50, 60, 49 ]

您可以在此处查看生成的动画[fiddle]。

现在：我无法找出用于生成上述序列的任何算法。有什么建议吗？

奖励积分（以及很多尊重！）如果您可以为其变体建议算法：

从顺时针方向顺时针

逆时针从 - 向外进入

逆时针方向从< - 向外

Answer 1

Here就是你想要的。

我填充了四个角落的钻石。

每个for loop绘制一条45°的n项，n是我们的转弯次数。

为简单起见，我创建了一个convert函数，它将当前项的（x，y）位置转换为索引。

如果之前没有添加索引，我只会添加索引（以处理角落重叠时的最后一种情况）。

我猜你现在可以轻松获得奖励积分。

// add item if not present in the array
function pushIfNotPresent(array, item)
{
    if (array.indexOf(item)==-1)
        array.push(item);
}

// convert x y position to index
function convert(x, y, width)
{
    return y*width+x;
}


$(document).ready(function() {
    var text = 
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"+
      "0123456789\n"

    var sequence2 = [];

    var width = 10;
    var height = 9;

    var n=0;

    while(sequence2.length<text.length)
    {
        // top left corner
        for(var i=0 ; i<=n && sequence2.length<text.length ; i++)
        {
            console.log(i);
            pushIfNotPresent(sequence2, convert(i, n-i, width+1)); 
        }
        // top right corner
        for(var i=0 ; i<=n && sequence2.length<text.length ; i++)
        {
            pushIfNotPresent(sequence2, convert(width-1-n+i, i, width+1)); 
        }
        // bottom right corner
        for(var i=0 ; i<=n && sequence2.length<text.length ; i++)
        {
            pushIfNotPresent(sequence2, convert(width-1-i, height-1-n+i, width+1)); 
        }
        // bottom left corner
        for(var i=0 ; i<=n && sequence2.length<text.length ; i++)
        {
            pushIfNotPresent(sequence2, convert(n-i, height-1-i, width+1)); 
        }

        n++;
    }

    // real spiral
    width = 10;
    var sequence3 = [];
    var angle = 0.0;
    var center = (width-1)/2.0;
    var radius = (width+3)/2.0;
    var i=0;
    while(sequence3.length<text.length && i<10000)
    {
        angle += 2.0*3.1416*1.0/360;
        radius -= 0.001;
        pushIfNotPresent(sequence3, convert(center+radius*Math.cos(angle), center+radius*Math.sin(angle), width+1)); 
        i++;
    }

    $('#test01i').textFadeIn( { 'text': text, 'milliseconds': 50, 'sequence': sequence2 })
    $('#test01o').textFadeOut({ 'text': text, 'milliseconds': 50, 'sequence': sequence2 })
})

请注意，我只使用cos和sin函数在一个for循环中添加了一个真正的螺旋效果（尝试序列3）......

Answer 2

这是一个有点疯狂的方法，但效果很好：

function makeSequence(width, height, linebreak, startinside, clockwise) {
    function square(n) {
        if (n==0) return [];
        if (n==1) return [[0,0]];
        var x, y, seq = [];
        // one round along the edges
        for (x=0, y=0; y<n ; y++) seq.push([x, y]);
        for (x++, y--; x<n ; x++) seq.push([x, y]);
        for (x--, y--; y>=0; y--) seq.push([x, y]);
        for (x--, y++; x>=1; x--) seq.push([x, y]);
        var inside = square(n-2).map(function(p) { p[0]++; p[1]++; return p; })
        return startinside
          ? clockwise
            ? inside.concat(seq.reverse())
            : inside.concat(seq)
          : clockwise
            ? seq.reverse().concat(inside)
            : seq.concat(inside);
    }
    var tl = (height-1)/2;
    return square(width+height).map(function(p) { // rotate it
        var x=p[0], y=p[1];
        return [x/2+y/2-tl, y/2-x/2+tl];
    }).filter(function(p) { // whole numbers
        return p[0] % 1 == 0 && p[1] % 1 == 0;
    }).filter(function(p) { // inside the rectangle
        return p[0]>=0 && p[0]<width && p[1]>=0 && p[1]<height;
    }).map(function(p) { // as sequence numbers instead of coordinates
        return (width+linebreak)*p[1]+p[0];
    });
}

（updated demo - 如果你比较一下序列，你甚至可以看到你的一些小错误关于换行符）

用于生成动画效果的序列的算法

前言

问题

2 个答案: