jquery - 将随机数分配给关键帧动画值

Question

我正在尝试创建动画背景。简而言之，有 6 个图标，它们都应该具有动画效果，以便在小边界内围绕页面移动。

当前的 JS Fiddle 在一定程度上可以工作，但需要进行如下修改:

https://jsfiddle.net/mLegg2vt/7/

我希望随机生成这些图标的移动，以便它们在以下范围内摆动/悬停:

x axis = 1px to 5px
y axis = 13px to 20px

我已经设法使用硬编码值获得解决方案，但现在我认为我以错误的方式进行处理，因为它需要为每个图标创建多个关键帧动画具有不同的值(value)观。我不一定反对这一点，但我不知道如何实现它。

我使用以下方法为上述范围内的每个图标生成了随机数:

var x = randomInt(5, 1); // use this value for x in translate3d
var y = randomInt(20, 13); // use this value for y in translate3d

function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

但是，我现在需要使用上面创建的值为此特定图标创建关键帧动画。目前，我的硬编码关键帧动画用于所有图标，如下所示:

@keyframes gentleHover {
    0% {
        transform: translate3d(0px, 0px, 0px);
    }
    50% {
        transform: translate3d(5px, 15px, 0px);
    }
    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}

在上面，我希望用我的值填充 50% 关键帧，例如:

50% {
    transform: translate3d(xpx, ypx, 0px);
}

现在我的问题是如何在 jQuery 中为每个图标执行此操作？如何为这 6 个图标中的每个图标创建一个 CSS 关键帧及其值？我了解如何使用 .css() 将 CSS 添加到特定元素但现在如何在样式表中创建一个全新的 CSS 片段。我知道我需要将生成的关键帧动画添加到此元素上，但这很简单:

$(this).css('animation', '[theCreatedKeyframeHere] 5s linear infinite');

我能想到的唯一方法是将关键帧包裹在 <style> 内标签到样式表中。但这是推荐的吗？

还需要注意的是，上面的所有 jQuery 都包含在 site.js 中。通过 header 调用的文件。它不在 <script> 中页面上的标签。

Answer 1

最后，我接受了使用 jQuery.Keyframes 的建议。这允许我在 jQuery 中设置关键帧动画。最终，它与我自己的解决方案非常相似，它将关键帧附加到 head，但它有一些额外的帮助器，这使得它更容易，所以非常值得一试。

然后我就能够生成随机数并将它们分配给 jQuery 中的每个图标:

$.keyframe.define([{
            name: 'gentleHover'+iconCounter,
            '0%': {'transform': 'translate3D(0px,0px,0px)'},
            '20%': {'transform': 'translate3D('+randomInt(40, -40)+'px,'+randomInt(40, -40)+'px,0px)'},
            '40%': {'transform': 'translate3D('+randomInt(40, -40)+'px,'+randomInt(40, -40)+'px,0px)'},
            '60%': {'transform': 'translate3D(0px,0px,0px)'},
            '80%': {'transform': 'translate3D('+randomInt(40, -40)+'px,'+randomInt(40, -40)+'px,0px)'},
            '100%': {'transform': 'translate3D(0px,0px,0px)'}
        }]);

为了制作多个版本，因此它们并不完全相同，我使用了 iconCounter ，它为每个图标创建了一个新的关键帧动画。我现在有与每个图标相关的 gentleHover1 等。结果是图标以随机方向 float ，各不相同。

作为一种继续前进的方法，向秒计时器添加一个随机数也是很酷的。目前所有图标的时间都是 30 秒。但是每个图标的时间间隔在 20-40 秒之间会使一些移动速度更快，并且每个图标的间隔都不同。