javascript - 如何制作 jQuery 步进动画？

Question

我搜索了有关如何使用 jquery 按顺序遍历定义的颜色来为色轮制作动画的任何内容，但我似乎找不到任何内容。

我想要做的是通过以 45 度 Angular “打开”颜色的 strip 来螺旋效果，然后像螺旋一样按顺序打开它们，然后按顺序关闭它们。从空白开始，以空白结束。我所说的打开是指某种幻灯片效果(很难想出正确的术语)，但想想一个看起来像螺旋形的加载 gif 螺旋。 (和mac的彩虹轮一样，循环遍历后只是让之前的颜色消失。)

我正在使用 jquery 并且更喜欢 jquery 解决方案，因此我不必担心浏览器兼容性问题，但我可以接受 css 转换作为最后的手段。

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

Answer 1

我用了moredemons's回答作为依据，using CSS triangles .它做同样的事情，但它正确地分隔了 CSS，因此您不必编辑 JS 来编辑颜色。 JS 也更简单，所有 16 个状态都不依赖于 if/elses。

与 gif 相比，程序化解决方案的主要优势在于您可以更轻松地自定义颜色、大小和动画速率。

• > Small, green, blue, fast
• > Big, red, blue, slow
• > Big with a different arrangement

初始 HTML 隐藏所有三 Angular 形

<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>

CSS

.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;        
}

JS

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);