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

私がやりたいのは、単に色を反転するのではなく、トゥイーンすることです。jquery よりも最大 20 倍高速であると思われる greensock トゥイーン エンジンを試してみたいと思っていますが、必要に応じて別の方法を使用できます。彼らのトゥイーンエンジンはここに文書化されています：

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に「color」や「backgroundColor」ではなく「prop」をトゥイーンするように要求していました）、TweenLiteにはcamelCaseプロパティ（「background-color」ではなく「backgroundColor」）が必要です。

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 に答える