Анимация цвета css, желательно с использованием tweenlite javascript

Question

У меня есть кнопка, которая инвертирует цвета на моем сайте. Он использует плагин под названием rgb color - http://www.phpied.com/rgb-color-parser-in-javascript/ чтобы получить значение цвета всех элементов dom и инвертировать их. Я делаю это с кодом ниже:

invertColors: function(){
      var colorProperties = ['color', 'background-color'];

      //iterate through every element
      $('*').each(function() {
        var color = null;

        for (var prop in colorProperties) {
            prop = colorProperties[prop];
            if (!$(this).css(prop)) continue; //if we can't find this property or it's null, continue
            color = new RGBColor($(this).css(prop)); //create RGBColor object
            if (color.ok) { //good to go, build RGB
              var element = $(this);
              $(this).css(prop, 'rgb(' + (255 - color.r) + ', ' + (255 - color.g) + ', ' + (255 - color.b) + ')'); //subtract each color component from 255
            }
            color = null; //some cleanup
        } //end each for prop in colorproperties
      }); //end each
    } //end invert colors

То, что я хотел бы сделать, это вместо того, чтобы просто перевернуть цвет. Мне любопытно попробовать механизм твиннинга greensock, так как он предположительно в 20 раз быстрее, чем jquery, но если мне нужно, я могу использовать другой метод. Их анимация двигателя описана здесь:

http://www.greensock.com/get-started-js/

Итак, я должен быть в состоянии сделать звонок примерно так:

TweenLite.to(element, 1, {css:{prop:'rgb(' + (255 - color.r) + ', ' + (255 - color.g) + ', ' + (255 - color.b) + ')' }, ease:Power2.easeOut});

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

Answer 1

Решено здесь: http://forums.greensock.com/topic/7101-tweening-a-css-color-propertys-r-g-b-values/

Вы можете определенно сделать это с GSAP. Проблема была связана с неправильным назначением свойства (вы буквально просили TweenLite вместо "color" или "backgroundColor" tween), а TweenLite нужны свойства camelCase ("backgroundColor", а не "background-color").

function invertColors() {
    var colorProperties = ['color', 'backgroundColor'];
 
    //iterate through every element
    $('*').each(function() {
        var color = null,
           obj, css, prop;
       for (prop in colorProperties) {
           prop = colorProperties[prop];
           obj = $(this);
           if (!obj.css(prop)) continue; //if we can't find this property or it's null, continue
           css = {};
           color = new RGBColor(obj.css(prop));
           if (color.ok) { 
               css[prop] = 'rgb(' + (255 - color.r) + ', ' + (255 - color.g) + ', ' + (255 - color.B) + ')';
               TweenLite.to(this, 2, {css:css});
            }
        } 
    }); 
}

Answer 2

Я не понял, как это сделать с помощью твининг-движка или даже requestAnimationFrame, но я сделал это с помощью CSS-переходов:

this.invertColors = function(){
      var colorProperties = ['color', 'background-color'];

      //iterate through every element
      $('*').each(function() {

        var $thisElement = $(this);

        for (var prop in colorProperties) {
            prop = colorProperties[prop];
            if (!$(this).css(prop)) continue; //if we can't find this property or it's null, continue
            color = new RGBColor($(this).css(prop)); //create RGBColor object
            if (color.ok) { //good to go, build RGB
              var newColor = new RGBColor('rgb(' + Math.abs(255-color.r) + ', ' + Math.abs(255-color.g) + ', ' + Math.abs(255-color.b) +')');
              if (prop == "background-color"){
                $thisElement.css({'transition':'background 1s'});
                $thisElement.css({'background-color': 'rgb('+newColor.r+','+newColor.g+','+newColor.b+')'});
              } else {
                $thisElement.css({'transition':'color 1s'});
                $thisElement.css({'color': 'rgb('+newColor.r+','+newColor.g+','+newColor.b+')'});
              }

              //$thisElement.css(prop, 'rgb(' + Math.abs(255 - color.r) + ', ' + Math.abs(255 - color.g) + ', ' + Math.abs(255 - color.b) + ')'); //subtract each color component from 255
            }
            color = null; //some cleanup
        } //end each for prop in colorproperties*/
      }); //end each
    } //end invert colors