Javascript彩色动画

Question

Javascript彩色动画

use*_*328 5 javascript animation transition colors

我想在原始javascript中将1种颜色的动画(过渡)转换为另一种颜色.

我不想使用任何框架(jquery,mootools)或css3.纯粹的原始javascript.

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

Answer 1

Pat*_*ity 15

也许是这样的:

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);
};

Run Code Online (Sandbox Code Playgroud)

你可以尝试一下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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

sha*_*ome 0

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

归档时间：	13 年，3 月前
查看次数：	16596 次
最近记录：	10 年，8 月前