Javascript 颜色动画

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11292649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 12:40:08  来源:igfitidea点击:

Javascript Color Animation

javascriptanimationcolorstransition

提问by user1437328

I want to animate (transition) from 1 color to another in raw javascript.

我想在原始 javascript 中从一种颜色动画(过渡)到另一种颜色。

I dont want to use any framework (jquery, mootools) or css3. plain raw javascript.

我不想使用任何框架(jquery、mootools)或 css3。纯原始 javascript。

I have been really having trouble to do this, can someone help me out ? :)

我真的很难做到这一点,有人可以帮我吗?:)

回答by Patrick Oscity

maybe something like this:

也许是这样的:

lerp = function(a, b, u) {
    return (1 - u) * a + u * b;
};

fade = function(element, property, start, end, duration) {
    var interval = 10;
    var steps = duration / interval;
    var step_u = 1.0 / steps;
    var u = 0.0;
    var theInterval = setInterval(function() {
        if (u >= 1.0) {
            clearInterval(theInterval);
        }
        var r = Math.round(lerp(start.r, end.r, u));
        var g = Math.round(lerp(start.g, end.g, u));
        var b = Math.round(lerp(start.b, end.b, u));
        var colorname = 'rgb(' + r + ',' + g + ',' + b + ')';
        el.style.setProperty(property, colorname);
        u += step_u;
    }, interval);
};

You can play around an try it out as a jsfiddleor check out the full working example below. You might want to improve this by using HSL/HSV colors, which gives you a prettier transition, but i'll leave that up to you.

您可以尝试将其作为 jsfiddle进行尝试或查看下面的完整工作示例。您可能想通过使用 HSL/HSV 颜色来改进这一点,这可以为您提供更漂亮的过渡,但我会将其留给您。

<html>
<head>
  <title>Fade</title>
  <style type="text/css">
    #box {
      width: 100px;
      height: 100px;
      background-color: rgb(255,0,0);
    }
  </style>
</head>
<body>
  <div id="box"></div>

  <script type="text/javascript" charset="utf-8">
    // linear interpolation between two values a and b
    // u controls amount of a/b and is in range [0.0,1.0]
    lerp = function(a,b,u) {
        return (1-u) * a + u * b;
    };

    fade = function(element, property, start, end, duration) {
      var interval = 10;
      var steps = duration/interval;
      var step_u = 1.0/steps;
      var u = 0.0;
      var theInterval = setInterval(function(){
        if (u >= 1.0){ clearInterval(theInterval) }
        var r = parseInt(lerp(start.r, end.r, u));
        var g = parseInt(lerp(start.g, end.g, u));
        var b = parseInt(lerp(start.b, end.b, u));
        var colorname = 'rgb('+r+','+g+','+b+')';
        el.style.setProperty(property, colorname);
        u += step_u;
      }, interval);
    };

    // in action
    el = document.getElementById('box'); // your element
    property = 'background-color';       // fading property
    startColor = {r:255, g:  0, b:  0};  // red
    endColor   = {r:  0, g:128, b:128};  // dark turquoise
    fade(el,'background-color',startColor,endColor,1000);

    // fade back after 2 secs
    setTimeout(function(){
      fade(el,'background-color',endColor,startColor,1000);
    },2000);
  </script>
</body>
</html>

回答by Stano

Here is also my solution:

这也是我的解决方案:

<html><head>
<script type="text/javascript">
<!-- 
function animate(id,color0,color1,duration){
    //public attributes
    this.elem = document.getElementById(id);
    //private attributes
    var r0= parseInt(color0.substring(0,2),16);
    var g0= parseInt(color0.substring(2,4),16);
    var b0= parseInt(color0.substring(4,6),16);
    var r1= parseInt(color1.substring(0,2),16);
    var g1= parseInt(color1.substring(2,4),16);
    var b1= parseInt(color1.substring(4,6),16);
    var wait = 100; //100ms
    var steps = duration/wait;
    var rstep = (r1 - r0) / (steps);
    var gstep = (g1 - g0) / (steps);
    var bstep = (b1 - b0) / (steps);
    var self = this;
    //public functions
    this.step  = function() {
        steps--;
        if ( steps>0 ) {
            r0 = Math.floor(r0 + rstep);
            g0 = Math.floor(g0 + gstep);
            b0 = Math.floor(b0 + bstep);
            elem.style.backgroundColor = 'rgb('+r0+','+g0+','+b0+')';
            //alert(steps + ' ; ' + elem.style.backgroundColor);
            window.setTimeout(function(){self.step();}, wait);
        } else {
            elem.style.backgroundColor = '#'+color1;
        }
    }
    step();
    //alert(this.r0);
}
//-->
</script>
</head><body>
<div id="anim" style="width:100px; height:100px; background-color:#ff0000"></div>
<input type="button" onclick="animate('anim','1122ff','ff2211',1000)" value="test" />
</body>
</html>

html at pastebin, how to call the timeout function - see for example 1, 2

html at pastebin,如何调用超时函数 - 参见示例12

回答by Bastian Fie?inger

if canvas would be ok you could try doing it like this ;)

如果画布没问题,你可以尝试这样做;)

var context = document.getElementsByTagName('canvas')[0].getContext('2d');

var hue = 0;

function bgcolor() {
    hue = hue + Math.random() * 3 ;
    context.fillStyle = 'hsl(' + hue + ', 100%, 50%)';
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
}

setInterval(bgcolor, 20 );

Yes ;) it`s not perfect and just an excample but give it a try. Here is the complete pen on codepen.

是的;) 它并不完美,只是一个例子,但可以尝试一下。这是codepen上的完整笔。

回答by shawesome

One way might be to use setTimeout to call some function which incrementally changes the colour (I'm assuming background-color) by some small amount each time it's called. At each iteration, just check to see if you've arrived at your target colour and if not, increase or decrease your RGB value as necessary.

一种方法可能是使用 setTimeout 调用某个函数,该函数每次调用时都会以少量增量更改颜色(我假设是背景颜色)。在每次迭代时,只需检查是否已达到目标颜色,如果没有,则根据需要增加或减少 RGB 值。