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

补间css颜色属性，最好使用tweenlite javascript

2 个答案: