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

Question

前言

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

例如，具有以下文本(11个字符x 9行=99个字符(：

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

该序列导致从左到右从上到下衰落效果[fulled]：

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 ]

您可以在此处看到生成的动画。

现在：我想不出任何算法来生成上面的序列。有什么建议吗？

如果你能为其变体提出算法建议，则可以获得额外的积分(以及很多尊重！(：

• 顺时针从内向外
• 从外向内逆时针
• 从内向外逆时针

Answer 1

这是您想要的。

我填满了一个有四个角的钻石。

每个for loop画一条由n个项目组成的45°线，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 = 
      "0123456789n"+
      "0123456789n"+
      "0123456789n"+
      "0123456789n"+
      "0123456789n"+
      "0123456789n"+
      "0123456789n"+
      "0123456789n"+
      "0123456789n"
    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 })
})

注意，我只在一个for循环中添加了一个使用cos和sin函数的真实螺旋效果(尝试序列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];
    });
}

(更新的演示-如果你比较序列，你甚至可以在你的换行符中看到一些小错误(