0

我有一个按钮可以反转我网站上的颜色。它利用一个名为 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});

但这不起作用（没有抛出错误），所以我不确定我做错了什么。任何人都对如何使其工作有任何想法，或者对所有这些颜色属性进行补间的最快方法是什么？

4

2 回答 2

3

在这里解决： http ://forums.greensock.com/topic/7101-tweening-a-css-color-propertys-rgb-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});
            }
        } 
    }); 
}
于 2013-01-16T22:10:27.613 回答
0

还没有想出如何使用补间引擎甚至 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
于 2013-01-16T16:30:55.710 回答