JS同步动画

Question

我正在尝试使用 velocity.js 为元素的 translateX 和 rotateZ 属性设置动画，这是我的代码：

$(document).ready(function () {
    $("div").velocity({
        rotateZ: '-10deg'
    }, {
        loop: true
    });
    $("div").velocity({
        'translateX': '2000px'
    });
});

我想实现的是让元素直线向右移动，同时始终上下振动（无限旋转10度），但结果是循环应用于两个属性不仅在旋转上，而且一旦开始翻译，旋转就会变大。

jsfiddle

Answer 1

与其使用单个元素并应用两个动画，不如创建两个元素并对每个元素应用一个动画。

我会考虑以下备选方案：

<div class="outer">
    <div class="inner">I'm trying to vibrate and move.</div>
</div>

$(document).ready(function () {
    $(".outer").velocity({
        rotateZ: '-10deg'
    }, {
        loop: true
    });
    $(".inner").velocity({
        'translateX': '2000px'
    });
});

JS同步动画

Simultaneous animation with JS

javascript

animation

velocity.js