javascript - 道场无限弹跳动画

Question

我需要使用 Dojo 制作这个 css3 动画，但我没有得到想要的结果。箭头悬停时应该弹跳。类似于此 http://codepen.io/dodozhang21/pen/siKtp但水平。HTML:

            <a href="#" class="uiAnimatedArrow" title="Buying a Home">
                <!-- -->
                <span>
                    <i data-copy="Learn More"><b></b></i>
                    Buying a Home
                </span>
            </a>

CSS:

a.uiAnimatedArrow i b {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 12px;
  margin: -6px 0 0 0;
  content: '';
  background: url("/assets/images/icons/arrow-right-black.png") 0 0 no-repeat;
  right: 13px;
}

  a.uiAnimatedArrow span:hover i b {
  -webkit-animation: bounce 1.5s infinite;
  -moz-animation: bounce 1.5s infinite;
  -ms-animation: bounce 1.5s infinite;
  -o-animation: bounce 1.5s infinite;
  animation: bounce 1.5s infinite;
}

有什么建议吗？

Answer 1

要在 Dojo 中做到这一点，您必须使用 dojo/_base/fx 为 right 属性设置动画。但是，您不能在单个动画中执行此操作，因为定义了多个关键帧。因此，您必须在以下情况下将其拆分(如果您希望它类似于给定的 Codepen):

0%  0
20% 0
40% -30
50% 0
60% -15
80% 0

因此，我们需要 4 个单独的动画，从 20% 到 40%、从 40% 到 50%、从 50% 到 60% 和从 60% 到 80%。

使用 dojo/_base/fx 你可以做这样的事情:

function frame40(node) {
    return fx.animateProperty({
        node: node,
        properties: {
            right: {
                start: 0,
                end: 30
            }
        },
        delay: 800,
        duration: 200,
        easing: easing.quadInOut
    });
}

function frame50(node) {
    return fx.animateProperty({
        node: node,
        properties: {
            right: {
                start: 30,
                end: 0
            }
        },
        duration: 200,
        easing: easing.quadInOut
    });
}

function frame60(node) {
    return fx.animateProperty({
        node: node,
        properties: {
            right: {
                start: 0,
                end: 15
            }
        },
        duration: 200,
        easing: easing.quadInOut
    });
}

function frame80(node) {
    return fx.animateProperty({
        node: node,
        properties: {
            right: {
                start: 15,
                end: 0
            }
        },
        duration: 400,
        easing: easing.quadInOut
    });
}

在这种情况下，我在给定的 duration 内为 right 属性设置动画。持续时间基于关键帧百分比 * 总动画(Codepen 中的 2s)。

我还使用 dojo/fx/easing 添加了一个 easing 属性，否则它只是一个线性动画，我觉得它不自然。

要调用动画，我们需要创建两个事件监听器，一个mouseenter 监听器和一个mouseleave 监听器。在 mouseenter 监听器中，我们必须链接动画并播放它。要链接它们，您可以使用 dojo/fx::chain() 函数。但是，这只会播放一次动画。要无限运行它，我们使用 setInterval() 函数每 2 秒重复一次动画:

var interval, anim;
query(".arrow").on("mouseenter", function() {
    var node = this;
    var keyframes = function() {
        anim = coreFx.chain([
            frame40(node),
            frame50(node),
            frame60(node),
            frame80(node)
        ]).play();
    };
    interval = setInterval(keyframes, 2000);
    keyframes();
});

现在，在 mouseleave 事件处理程序中，我们必须清除间隔，如果动画正在播放，我们必须停止它。但是，停止动画可能会导致箭头停在“半空中”，因此我们必须将其适本地放回右侧，您也可以使用动画来做到这一点:

query(".arrow").on("mouseleave", function() {
    if (interval != null) {
        clearInterval(interval);
    }
    if (anim != null) {
        anim.stop();
        fx.animateProperty({
            node: this,
            properties: {
                right: 0
            },
            duration: 200,
            easing: easing.quadInOut
        }).play();
    }
});

这应该就是一切，您可以在 JSFiddle 上查看完整示例:http://jsfiddle.net/ro55btas/