1

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

我想要做的是通过以 45 度“打开”颜色条并像螺旋一样按顺序打开它们然后按顺序关闭它们来形成螺旋效果。从空白开始，以空白结束。通过打开，我的意思是某种滑动效果（很难想到正确的术语），但想想一个看起来像螺旋的加载 gif 螺旋。（和mac彩虹轮一样，只是让之前的颜色在循环后消失。）

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

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

在此处输入图像描述

在此处输入图像描述

4

4 回答 4

3

我以moredemons 的回答为基础，使用 CSS triangles。它做同样的事情，但它正确地分离了 CSS，所以你不必编辑 JS 来编辑颜色。JS 也更简单，不依赖于if/elses所有 16 个状态。

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

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);
于 2013-05-10T20:01:46.630 回答
2

我知道我的解决方案很奇怪，但我没有看到其他解决方案。我使用borders 创建 45° 角，并animate使用step假元素创建 jQuery。

所以，看看这个小提琴：http: //jsfiddle.net/WYKmQ/1/

于 2013-05-10T18:03:07.940 回答
2

您只是在寻找动画 gif。为什么在不需要时使用 javascript 使事情变得过于复杂。gif 将在任何浏览器中完美显示。

在这里，我花了 3 分钟来完成这项工作。比任何代码都少的时间。

在此处输入图像描述

于 2013-05-10T18:07:25.563 回答
0

更新您的示例 >> mi-creativity.com/test/color-wheel

您可以通过使用所谓的图像精灵来实现与上述相同的效果，将它们全部包含在一张图像中，将它们垂直或水平排列并更改背景位置，就像在这个示例中一样（您可以查看页面源以了解怎么做）

mi-creativity.com/test/fading-sprite-background

上面的示例使用了一个名为jquery.bgpos.jsas will as .p​​ng 图像的 jquery 插件

另一种方法是，您可以将上述每个图像设置为背景图像，每个图像用于具有数值的不同类，并通过使用toggleClassjquery 属性来更改 div 类，如本例所示 -检查页面源- ：

mi-creativity.com/test/fading-sprite-background

我更喜欢它，因为它更容易修改并根据需要添加更多框架。

PS：开头不需要另一个空白帧，只需将最后一帧移到开头即可，因为如果使用两个空白帧会影响运动的流畅度

于 2013-05-10T17:31:37.213 回答