Как сделать анимацию шага jQuery?

Question

Я искал что-нибудь о том, как оживить цветовое колесо с помощью jquery, чтобы выполнить определенные цвета в порядке, и я не могу ничего найти.

То, что я хочу сделать, - это эффект «открытия» щеток цветов под углом 45 градусов и открыть их в порядке, подобном спирали, и затем закрыть их по порядку. Начиная с пустого и заканчивая пробелом. Под открытым я имею в виду какой-то эффект слайда (трудно думать о правильном термине), но подумайте о загрузке gif-спирали, которая выглядит так, как будто она спиральна. (Как цветное радужное колесо, только после того, как предыдущие цвета исчезли после циклического перехода.)

Я использую jquery и предпочитаю jquery-решение, поэтому мне не нужно беспокоиться о проблемах с совместимостью браузера, но я мог бы принять css переходы в качестве последнего средства.

Я приложил несколько изображений, чтобы дать лучшую визуальную идею. У меня нет кода прямо сейчас, но мой план состоял в том, чтобы иметь div внутри тела, где jquery рисовал бы или делал бы эту анимацию. Я даже не знаю, с чего начать, поэтому мне нечего строить, и я не знаю точно, какую именно терминологию я ищу. Надеюсь, мои образы дадут лучшее понимание. Благодарю.

Answer 1

Я использовал moredemons's ответ в качестве основы, using CSS triangles. Он делает то же самое, но он правильно разделяет CSS, поэтому вам не нужно редактировать JS для редактирования цветов. JS также проще, не полагается на if/elses для всех 16 состояний.

Главное преимущество программного решения над gif заключается в том, что вы можете более легко настроить цвета, размеры, скорость анимации.

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

Исходные 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); 

Answer 2

Update ваш пример >>mi-creativity.com/test/color-wheel

Вы можете достичь того же эффекта выше, используя то, что так называемые изображения-спрайты, вы включаете их все в одном изображении , упорядочивая их по вертикали или по горизонтали и изменяя положение фона точно так же, как в этом примере (вы можете просмотреть источник страницы, чтобы знать, как это сделать)

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

Приведенный выше пример использует JQuery плагин называется jquery.bgpos.js как будет как .png изображение

---

Другой способ сделать это, вы можете установить каждый из указанных изображений в качестве резервной площадки изображения каждого для другой класс Wit га численное значение, и вы измените класс Div путем использования toggleClass Jquery собственности, как в этом примере - проверка исходная страница -:

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

Который я предпочитаю, потому что его легче модифицировать и добавить больше кадров, если хотите.

PS: Вы не; нужен еще один пустой кадр в начале, просто переместить последний кадр в начале, потому что если вы использовали две пустые кадры, которые будут влиять на плавность движения

Answer 3

Я знаю, что мое решение Странно много, но нет другого решения, как я вижу. Я использовал border s для создания углов 45 ° и jQuery animate с step на поддельном элементе.

Итак, посмотрите на этой скрипке: http://jsfiddle.net/WYKmQ/1/

Answer 4

Вы просто ищете анимированный GIF. Зачем компрометировать вещи с помощью javascript, когда это не нужно. GIF будет отлично отображаться в любом браузере.

Для этого потребовалось 3 минуты. Меньше времени, чем любой код.