Javascript 如何制作jQuery步骤动画？

我已经搜索了关于如何使用jquery设置色轮动画的任何内容，以按顺序逐步遍历定义的颜色，但似乎找不到任何内容

我想做的是螺旋效果，通过45度角“打开”色条，像螺旋一样顺序打开，然后依次关闭。从空白开始，以空白结束。我所说的“开放”指的是某种幻灯片效果（很难找到正确的术语），但想想看，加载gif螺旋，它看起来像是螺旋。（就像mac彩虹轮一样，只会在循环通过后使以前的颜色消失。）

我正在使用jquery，希望使用jquery解决方案，这样我就不必担心浏览器兼容性问题，但我可以接受css转换作为最后手段

我附上了一些图片，以提供更好的视觉效果。我现在没有代码，但我的计划只是在主体内部有一个div，jquery可以在其中绘制或制作动画。我真的不知道从哪里开始，所以我没有任何东西可以构建，也不知道我要找的确切术语。希望我的图片能给你更好的理解。谢谢

---

更新您的示例>>

通过使用所谓的图像精灵，您可以实现上述相同的效果，您可以在一个图像中包含所有图像，垂直或水平排列它们，并更改背景位置，如本例所示（您可以查看页面源以了解如何操作）

上面的示例使用名为

jquery.bgpos.js

的jquery插件作为.png图像

---

另一种方法是，您可以将上面的每个图像设置为背景图像，每个图像具有一个数值，用于不同的类，并通过使用

toggleClass

jquery属性更改div类，如本例所示-检查页面源代码-：

我更喜欢这一点，因为如果您愿意，可以更轻松地修改它并添加更多帧

---

附言：你不知道；如果开始时不需要另一个空白帧，只需将最后一帧移到开始处，因为如果使用两个空白帧会影响运动的平滑度

更新您的示例>>

通过使用所谓的图像精灵，您可以实现上述相同的效果，您可以在一个图像中包含所有图像，垂直或水平排列它们，并更改背景位置，如本例所示（您可以查看页面源以了解如何操作）

上面的示例使用名为

jquery.bgpos.js

的jquery插件作为.png图像

---

另一种方法是，您可以将上面的每个图像设置为背景图像，每个图像具有一个数值，用于不同的类，并通过使用

toggleClass

jquery属性更改div类，如本例所示-检查页面源代码-：

我更喜欢这一点，因为如果您愿意，可以更轻松地修改它并添加更多帧

---

附言：你不知道；不要在开始时再使用一个空白帧，只需将最后一帧移到开始处，因为如果使用两个空白帧会影响运动的平滑度

我知道我的解决方案很奇怪，但我认为没有其他解决方案。我使用

border

s创建45°角，并在伪元素上使用

step

对jQuery

进行动画制作

所以，看看这把小提琴：
我知道我的解决方案很奇怪，但我认为没有其他解决方案。我使用
border
s创建45°角，并在伪元素上使用
step
对jQuery
进行动画制作

那么，看看这把小提琴：
你只是在寻找一个动画gif。
为什么要在不需要javascript的情况下过度复杂化呢。
gif将在任何浏览器中完美显示

在这里，我花了3分钟来做这件事。时间比任何代码都少

您只是在寻找动画gif。
为什么要在不需要javascript的情况下过度复杂化呢。
gif将在任何浏览器中完美显示

在这里，我花了3分钟来做这件事。时间比任何代码都少

我以答案为基础。它做同样的事情，但是它正确地分离了CSS，因此您不必编辑JS来编辑颜色。JS也更简单，不依赖所有16个状态的
if/elses

与gif相比，编程解决方案的主要优点是，您可以更轻松地自定义颜色、大小和动画速率






初始HTML隐藏所有三角形

<div id ="ct" >
    <div class="triangle triangle-nw triangle-hide-tr triangle-hide-bl"></div>
    <div class="triangle triangle-ne triangle-hide-tl triangle-hide-br"></div>
    <br/>
    <div class="triangle triangle-sw triangle-hide-tl triangle-hide-br"></div>
    <div class="triangle triangle-se triangle-hide-tr triangle-hide-bl" ></div>
</div>

JS

.triangle {
    font-size:0;
    border: 50px solid transparent;
    display: inline-block;    
    width: 0;
    height: 0;
    margin:0;
    padding: 0;
}

.triangle-se {
    border-color: red red blue blue;
}

.triangle-sw {
    border-color: red blue blue red;
}

.triangle-nw {
    border-color: blue blue red red;
}

.triangle-ne {
    border-color: blue red red blue;
}

.triangle-hide-tl {
    border-top-color: transparent;
    border-left-color: transparent;
}

.triangle-hide-tr {
    border-top-color: transparent;
    border-right-color: transparent;    
}

.triangle-hide-br {
    border-bottom-color: transparent;
    border-right-color: transparent;        
}

.triangle-hide-bl {
    border-bottom-color: transparent;
    border-left-color: transparent;        
}

setInterval((function(){
    var index = 0;
    // Which square is going to be modified in each stage (16 stages)
    var map = [3,3,2,2,0,0,1,1,3,3,2,2,0,0,1,1];
    // The clases to add and remove
    var classesToChange = ['tr', 'bl', 'br', 'tl', 'bl', 'tr', 'tl', 'br'];           
    return function() {
        var el = $('#ct div.triangle').eq(map[index]);
        if (index < 8) {
            // Showing pieces
            el.removeClass('triangle-hide-' + classesToChange[index] );
        } else {
            // Hiding pieces
            el.addClass('triangle-hide-' + classesToChange[index - 8] );
        }
        index++;
        if (index >= 16) {
            index = 0;
        }
    };
})(), 200);

setInterval（（函数（）{
var指数=0；
//每个阶段（16个阶段）将修改哪个方块
var图=[3,3,2,2,0,0,1,1,3,3,2,2,0,0,1,1]；
//要添加和删除的类别
var classesToChange=['tr'，'bl'，'br'，'tl'，'bl'，'tr'，'tl'，'br']；
返回函数（）{
var el=$（'#ct div.triangle'）.eq（映射[索引]）；
如果（指数<8）{
//展示作品
el.removeClass（'triangle-hide-'+classesToChange[index]）；
}否则{
//藏品
el.addClass（'triangle-hide-'+classesToChange[index-8]）；
}
索引++；
如果（索引>=16）{
指数=0；
}
};
})(), 200);
我以答案为基础。它做同样的事情，但是它正确地分离了CSS，因此您不必编辑JS来编辑颜色。JS也更简单，不依赖所有16个状态的
if/elses

与gif相比，编程解决方案的主要优点是，您可以更轻松地自定义颜色、大小和动画速率






初始HTML隐藏所有三角形

<div id ="ct" >
    <div class="triangle triangle-nw triangle-hide-tr triangle-hide-bl"></div>
    <div class="triangle triangle-ne triangle-hide-tl triangle-hide-br"></div>
    <br/>
    <div class="triangle triangle-sw triangle-hide-tl triangle-hide-br"></div>
    <div class="triangle triangle-se triangle-hide-tr triangle-hide-bl" ></div>
</div>

JS

.triangle {
    font-size:0;
    border: 50px solid transparent;
    display: inline-block;    
    width: 0;
    height: 0;
    margin:0;
    padding: 0;
}

.triangle-se {
    border-color: red red blue blue;
}

.triangle-sw {
    border-color: red blue blue red;
}

.triangle-nw {
    border-color: blue blue red red;
}

.triangle-ne {
    border-color: blue red red blue;
}

.triangle-hide-tl {
    border-top-color: transparent;
    border-left-color: transparent;
}

.triangle-hide-tr {
    border-top-color: transparent;
    border-right-color: transparent;    
}

.triangle-hide-br {
    border-bottom-color: transparent;
    border-right-color: transparent;        
}

.triangle-hide-bl {
    border-bottom-color: transparent;
    border-left-color: transparent;        
}

setInterval((function(){
    var index = 0;
    // Which square is going to be modified in each stage (16 stages)
    var map = [3,3,2,2,0,0,1,1,3,3,2,2,0,0,1,1];
    // The clases to add and remove
    var classesToChange = ['tr', 'bl', 'br', 'tl', 'bl', 'tr', 'tl', 'br'];           
    return function() {
        var el = $('#ct div.triangle').eq(map[index]);
        if (index < 8) {
            // Showing pieces
            el.removeClass('triangle-hide-' + classesToChange[index] );
        } else {
            // Hiding pieces
            el.addClass('triangle-hide-' + classesToChange[index - 8] );
        }
        index++;
        if (index >= 16) {
            index = 0;
        }
    };
})(), 200);

setInterval（（函数（）{
var指数=0；
//在每个阶段（第16节）哪个方块将被修改