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

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

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

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

我使用以下内容为上面边界内的每个图标生成随机数：

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文件中。它不在页面上的<script>标记中。

Answer 1

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

然后我能够生成我的随机数并将它们分配给jQuery中的each图标：

$.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为每个icon创建一个新的关键帧动画。我现在有gentleHover1等与每个图标相关的内容。结果是图标以随机方向浮动，完全不同。

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

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

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

1 个答案: