如何使用 jquery 对 CSS 渐变变化进行动画处理

Question

我想用 jquery 为 css 渐变设置动画，但找不到任何解决方案。有人有想法吗？问题是，我无法从一个类动画到另一个类，因为我的 rgba 是随机的（我使用 mousemouve 事件做了一些事情）。

这是我的实际代码

$(this).css(
     {background: '-webkit-gradient(linear, left top, right top, from(rgba('+ a +','+ b +','+ c +','+ alpha +')), to(rgba('+ a2 +','+ b2 +','+ c2 +','+ alpha +')))'
});

但我想做的是这样的：

$(this).stop().animate(
            {background: '-webkit-gradient(linear, left top, right top, from(rgba('+ a +','+ b +','+ c +','+ alpha +')), to(rgba('+ a2 +','+ b2 +','+ c2 +','+ alpha +')))'},
            {
                duration:   1500, 
                easing:     'easeOutBounce'
            }
        );

我得到的最好的结果是它不会改变渐变，而只会改变第一个 rgba 的背景颜色。

基本上，css() 过于激进，我希望它是平滑的。我尝试仅使用带有背景色的动画，它可以正常工作，但不能使用渐变。

有什么想法吗？ 提前致谢。

编辑：这是完整的 js background.js

EDIT #2：在这里找到我所有的答案。 script on jqueryscript.net

Answer 1

CSS 是这里最好的方法。向元素添加必要的过渡/动画。有几个具有不同背景渐变的类，然后根据需要使用 jQuery 添加/删除这些类。据我所知，CSS 渐变背景不会通过transition 进行动画处理。您可能需要使用keyframe 动画。如果动画基于鼠标事件（悬停、单击等），您可能还需要动画回调以确保动画不会跳转。使用鼠标事件实现平滑的解决方案可能相当困难。

有关关键帧渐变动画的示例，请参阅 http://thecodeplayer.com/walkthrough/animating-css3-gradients。许多人使用的一个技巧是改变背景位置，而不是渐变本身。在这种情况下，过渡可以工作。

或者，jQuery Transit (http://ricostacruz.com/jquery.transit/) 也可以这样做，但未经测试且未记录。

Answer 2

注意，不确定语法、顺序

-webkit-gradient(linear, left top, right top, from(rgba()), to(rgba()))

准确吗？见linear-gradient，Using Gradients。在下面的一块，改为

-webkit-linear-gradient(left top, rgba(), rgba())

此外，easing 选项 easeOutBounce 似乎不是 jquery 中的标准；需要 jquery ui 或 jQuery Easing Plugin 。将 jquery ui 添加到加载的脚本中。

jquery 的 .animate() 可能需要一个“颜色”插件来为颜色 properties 设置动画。不过，可以利用 step 函数，在 .animate() 的 options 中，为动画的每个“步骤”执行任务，请参阅

.animate()，step

为每个动画的每个动画属性调用的函数 元素。此功能提供了修改 Tween 的机会 对象在设置之前更改属性的值。

这里的 properties 是用 border:"0" 定义的 - 不过，使用 jquery ui 彩色动画可能会出现 Color Animation - step 函数在下面使用。

试试

$(document).ready(function () {

    $("body").mousemove(function (event) {

        var sw = $(window).width(),
            sh = $(window).height(),
            valueX = event.pageX,
            valueY = event.pageY;

        var fX = (valueX / sw),
            fY = (valueY / sh);

        var alpha = ((fX / 2) + (fY / 2));

        var r = Math.round(((Math.floor((Math.random() * 200) + 100)))),
            g = Math.round(((Math.floor((Math.random() * 200) + 100)))),
            b = Math.round(((Math.floor((Math.random() * 200) + 100)))),
            r2 = Math.round(((Math.floor((Math.random() * 100) + 1)))),
            g2 = Math.round(((Math.floor((Math.random() * 100) + 1)))),
            b2 = Math.round(((Math.floor((Math.random() * 100) + 1))));

        console.log('x:' + fX + ' - y:' + fY + '');
        console.log('rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')');
        console.log('rgba2(' + r2 + ',' + g2 + ',' + b2 + ',' + alpha + ')');

        // animate the background color on mousemove
        $(event.target).stop().animate({
            border:"0"
        }, {
            duration: 1500
            , easing: 'easeOutBounce'
            , step: function() {
              $(this).css('background'
                          ,'-webkit-linear-gradient(left top, rgba('
                          + r +','+ g +','+ b +','
                          + alpha +'), rgba('
                          + r2 +','+ g2 +','+ b2 +','+ alpha +')')
        }
        });

    });
});

body {
    width : 646px;
    height : 615px;
    background-color : transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

jsfiddle http://jsfiddle.net/guest271314/vystqodj/