七彩流动变化背景

在用linear-gradient设置彩虹般的背景时，忽然想到如果能让它们流动起来一定更好看。在网上搜了一波后发现并没有别人提出这个想法并实现，于是便自己着手写了起来。

代码见Github - colorful-linear-animate

 

颜色变化原理

一开始想到的当然是Jquary-ui里的颜色animate，但似乎没什么方法可以把那种变化移植到linear的多彩背景变化中来。

于是首先要弄清楚颜色之间相互转换时它们的rgb是怎样变化的。

因为我要制造的是七彩的变化，可以看到跟常见的rgb选框中右边的颜色条是一样的：

于是拉动颜色条观察rgb数值，发现从底下的红色一直变化到最上面回到红色的过程中，rgb是以green-blue-red的方向在变化的，每次变化为左边的颜色并将之替换。

例如上图里一开始是#ff8181，在进度条往上拉动的过程中，中间的green色81一直增加至左边的ff，一直变化到#ffff81，接着左边的ff就一直减少至#81ff81，如此类推，之后是#8181ff，最后再回到#ff8181。

 

实现方法

根据颜色的变化方式，即可把linear-gradient分为6个节点，恰好每次增加20%，即一开始的linear-gradient值为

(#ff8181 0%, #ffff81 20%, #81ff81 40%, #81ffff 60%, #8181ff 80%, #ff81ff 100%)

如此从100%那下一个变化的颜色是#ff8181，即回到了0%的颜色，呈现出来是这样的：

接着最重要的来了，如何让它动起来呢？

我的实现方法是，让linear各个节点的颜色不断变化到下一个颜色（最后一个即变化到第一个），即在setInterval里让各个节点的rgb数值+1或-1变化，一直变化到下一个颜色，之后再继续变化到下一个颜色。

通俗说起来就是各个颜色层之间总在追赶着下一个颜色层，这样循环反复，即实现了流动变化的效果。

 

最终写出来的代码参见github，用户还可自由控制颜色的鲜艳度、方向、变化速度。

示例可参见这里的最后~