Цикл/твин цвета, в то время как элемент прослушивается

Я пытаюсь tween/цикл цвет фона страницы во время щелчка. Когда клик поднят, циклический останов останавливается, а цвет фона остается на последнем циклическом значении. При повторном нажатии этот процесс будет продолжен.Цикл/твин цвета, в то время как элемент прослушивается

Проверьте пример здесь, чтобы посмотреть, что я имею в виду, когда я говорю цикл цветового http://www.javascript-fx.com/development/colorcycle/spancycle.html

При просмотре решений я пришел через некоторые библиотеки, как JSTween или GSAP, но с моим очень хрупким яваскриптом опытом я не смог при выполнении примеров, соответствующих моим потребностям.

Любые предложения о том, как это сделать, будут полезны, желательно без каких-либо библиотек, поскольку это поможет мне в понимании javascript. Я не ищу точный код, объяснение процесса псевдокода также будет отличным.

Бест, Андрей

источник

2013-09-07 ursul

Последний пункт делает это звучит, как вы действительно хотите узнать, - вы могли бы говорить то, что вы пробовали и где вы застряли? Любые попытки кода (разместить их здесь) были бы хороши. Stack Overflow работает лучше всего, когда мы знаем, что вы пытались сделать, это делает наши попытки помочь вам гораздо лучше ориентироваться. Вы знаете, как обнаружить клик? Обнаружение второго щелчка? Обнаруживать, когда клик поднят? Изменить цвет фона? Цикл между разными вариантами? Сделайте плавный переход в цвета? Обертывание все это вместе? –

Так, Tweening цвета довольно легко с TweenJS или TweenMax (или TweenLite). Я покажу это с помощью TweenMax, главным образом потому, что псевдокод сложный, когда нет никакой логики для псевдокода. Предположим, у вас есть текстовый элемент:

<p id="text">This is some text to colorize</p>

Вы можете Tween цвет текста на красный (#f00) в течение двух секунд, как это:

var textEl = document.getElementById('text'); 
TweenMax.to(textEl, 2, {color: '#f00'});

Насколько велосипедного идет, вы можете отправить onComplete обработчик анимации, которая будет срабатывать при завершении анимации. Это заставит его цикл между красным и черным:

var textEl = document.getElementById('text'); 

function toRed() { 
    TweenMax.to(textEl, 2, {color: '#f00', onComplete: toBlack}); 
} 

function toBlack() { 
    TweenMax.to(textEl, 2, {color: '#000', onComplete: toRed}); 
} 

toRed();

Вот CodePen showing this in action.

Если вы хотите, чтобы сделать это немного более компактный, вы можете цикл листать colorFrom и colorTo:

function cycle(colorFrom, colorTo) { 
    TweenMax.to(textEl, 2, {color: colorTo, onComplete: function() { 
     cycle(colorTo, colorFrom); 
    }}); 
} 

cycle('#000', '#F00');

Делать то же самое в других библиотеках Tweening становится очень похожи.

псевдокод для выполнения этого цикла в то время как повернутыми может выглядеть так:

ON_CLICK: 
    ShowCycle = !ShowCycle; 
    IF ShowCycle 
    TweenHandle = cycle(RED, BLACK) 
    ELSE 
    IF EXISTS TweenHandle 
     cancelCycle(TweenHandle) 
     TweenHandle = null 
    END IF 
    END IF

источник

2013-09-07 17:15:35

Цикл/твин цвета, в то время как элемент прослушивается

ответ

Смежные вопросы