补间 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 补间引擎，因为据说它比 jquery 快 20 倍，但如果必须，我可以使用不同的方法。他们的补间引擎记录在这里：

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

因此，我应该能够像这样拨打电话：

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/#entry26465

您绝对可以使用 GSAP 做到这一点。问题与未正确分配属性有关（您实际上是在要求 TweenLite 补间“prop”而不是“color”或“backgroundColor”）并且 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