javascript - 使用javascript暂停CSS动画并跳转到动画中的特定位置

Question

我有一个完全用 CSS 动画构建的无限 slider ，我希望能够使用 javascript(onlcick 和键盘输入)来操纵动画。我希望能够从一帧快速运行动画，即加速它......到另一帧，以便在按下指向 slider 中特定图像的按钮时产生跳跃效果。另外，我希望能够通过键盘输入逐步完成动画...( --> ， <-- )

有人知道如何实现吗？

点击..

1. 检索当前关键帧位置；
2. 为目的地设置适当的方向；
3. 大大提高动画速度，直到达到所需的关键帧；
4. 暂停动画或从新点继续

键盘输入……

1. 跳转到特定关键帧并继续动画

Answer 1

尝试

html

<!-- html -->
<div id=animated></div>

CSS

      /* css */

    #animated {

      animation : animationName; /* animation block(s) */

      animation-play-state : paused; /* (paused; running) */ 

    }

    @keyframes animationName {

      0% { .. /* css animations (`animationstart`) */ }

      50% {..}

      100% { .. /* css animations (`animationend` / `animationiteration` (start; end)) */ }

    }

js

 (function(el) {

   function animations(e) {

     /* `key code` to trigger event */
     if (e.which === 123456) {

       $(el).animate({ /* jquery animations */ }, 123456 /* duration */)
       .promise().done(function() {
         el.style.animationPlayState = "running";
         el.style.WebkitAnimationPlayState = "running";
        });

      };

    };

$(window).on("keydown", animations);
})($(#animated).get(0))

---

$(document).ready(function() {

    (function reanimate(el, r, p, runner, pauser, pauseAll) {

        var _state = function() {
            $.when(
            $("#animated").data("states", {"fxq": "animated!","cssAnimationState": (el.style.WebkitAnimationPlayState || el.style.animationPlayState),"jsAnimationState": $("#animated").queue("fx")[0]}))
            .done(function(status) {
                return status.data("states")
            });

            return String("css animation state: " + (el.style.WebkitAnimationPlayState || el.style.animationPlayState) + "  js animation state: " + $("#animated").queue("fx")[0])
        };

        var runner = function() {
            el.style.animationPlayState = "running";
            el.style.WebkitAnimationPlayState = "running";
            return $("data").html(_state())
        };

        var pauser = function() {
            el.style.animationPlayState = "paused";
            el.style.WebkitAnimationPlayState = "paused";
            $("#animated:animated, #animated *").finish().queue("fx", []);
            return $("data").html(_state())

        };

        $("button:last").on("click", pauser);
        $("button:first").on("click", runner);

        function player(e, pause, play, pauseAll) {

            /*!
            //  settings
            */
            var pauseAll = (undefined || 38); /* `up-arrow` : `pauseAll` */
            var pause = (undefined || 37); /* `left-arrow` : `paused` */
            var play = (undefined || 39); /* `right-arrow` : `running` */

            if (e.which === play) {
                e.preventDefault();
                runner();
                $("data").html(_state())
            };
            /*!
            //  js (jquery) animations (, css transitions,
            //  css animations) at `paused` css animations
            */
            if (e.which === pause) {
                e.preventDefault();
                $.when(
                $('#animated')
                .animate({
                    width: "+=400px",
                    height: "+=400px",
                    borderRadius: "+=50%",
                    fontSize: "+=22px"
                },
                {
                    duration: 3500,
                    easing: "swing",
                    start: $('#animated').css({"transition": "background 3500ms linear, box-shadow 3500ms linear","-webkit-transition": "background 3500ms linear, -webkit-box-shadow 3500ms linear","-moz-transition": "background 3500ms linear, -moz-box-shadow 3500ms linear","background": "yellow","box-shadow": "0.25em 0.25em 0.25em #f57900","-webkit-transform-style": "preserve-3d","-webkit-transform": "rotateX(180deg) rotateZ(45deg)","-moz-transform-style": "preserve-3d","-transform": "rotateX(180deg) rotateZ(45deg)","-webkit-backface-visibility": "visible","-moz-backface-visibility": "visible"}).html(function() {
                        return $("<em>" + $('#animated').data("states").fxq + "</em>").css({"display": "block","position": "relative","top": "25%","left": "0%","transform": "rototeX(33deg)","text-shadow": "2px 2px 2px orange"}).fadeIn(2000, function() {
                            _state()
                        })
                    })
                })
                .animate({width: "100px",height: "100px",
                    borderTopLeftRadius: "0%",
                    borderTopRightRadius: "0%",
                    borderBottomLeftRadius: "0%",
                    borderBottomRightRadius: "0%",
                    fontSize: "10px"}, {
                    duration: 3500,
                    easing: "linear",
                    done: function() {
                        $('#animated').css({"transition": "background 3500ms ease-out, box-shadow 2500ms ease-out","-webkit-transition": "background 3500ms, -webkit-box-shadow 3500ms ease-out","-moz-transition": "background 3500ms ease-out, -moz-box-shadow 3500ms ease-out","background": "red","box-shadow": "0.0em 0.0em 0.0em transparent","-webkit-transform": "rotateX(0deg) rotateY(0deg) rotateZ(0deg)","transform": "rotateX(0deg) rotateY(0deg) rotateZ(0deg)","-moz-backface-visibility": "hidden","-webkit-backface-visibility": "hidden"}).children("em").fadeOut(2000, function() {
                            _state()
                        }).promise().done(function() {
                            $("em").finish().detach()
                        })
                    }
                }), $("data").html(_state())).promise().done(function() {
                    runner();
                }).always(function() {_state()})
            };
            /*!
            //  pause all css and js animations
            */
            if (e.which === pauseAll) {
                e.preventDefault();
                (function() {
                    var _check = ($("#animated").queue("fx")[0] != undefined ? $("#animated:animated, #animated *").finish() && pauser() : ((el.style.animationPlayState === undefined ? el.style.WebkitAnimationPlayState : el.style.animationPlayState) === "running" ? pauser() : runner()))

                    return $.when(_check, $("data").html(_state()))

                }())
            };
        };
        $(window).on("keydown", player);

        return $("data").html(_state())
    })($("#animated").get(0), "running", "paused")
})

见 http://guest271314.github.io/reanimate/

---

可能有几种可能的方法来完成要求，包括 CSSOM、Javascript、jQuery 库。查看链接。

可以通过animation-play-state 属性。

启动和停止 jquery 动画可以通过几种方式完成。$(element).queue("fx", []) 应该停止所有 jquery 动画并清除jquery 动画 队列。 .finish() 应该完成，或者 finish 当前正在运行或 inprogress jquery 动画。

animation-play-state : paused 不会停止 jquery 动画。

这个过程也可以通过插入、替换、或删除 style 元素，或仅删除 style 元素中的文本；animationstart 和 animationiteration DOM 事件；和其他一些潜力下面链接的选项。

将 reanimate.js 放在一起，包括几个上面提到的方法。包括 css 转换在 jquery 动画中，尽管那部分可能被替换为要么访问的确切的定时阶段运行 css 动画(“@keyframes”)，和/或插入新动画；或调整或重新定义时间。

这篇文章只是一个共享前瞻性功能的工作草案模板。请注意，webkit、firefox 和 opera 可能“呈现”动画略有不同。使用此模板 webkit 可能看起来“过渡”得更“平滑”比 firefox 更“运行”的 css 动画。完整的歌剧支持可能需要一些更精细的调整。

Opera 似乎对某些 css 属性使用了 -o- 和 -webkit- 前缀，而其他人只使用 w3c 标准(无前缀)。另外，每个浏览器可能需要不同的“前缀”来访问“animationstart”等。

reanimate.js 当前(1.0 版)不会尝试访问确切的 csskeyframe '(elapsedTime) 在 running 中断之前的 css 动画中它们带有多个 layered 或“reanimated”css/js 动画和/或 css 转换。而是尝试将 css 动画返回到大致位置他们在“分层”js 动画中断之前运行。虽然，应该可以访问确切的动画 elapsedTime 或 timeStamp(可能是 0 或 miiliseond 类型的时间戳，具体取决于浏览器) 关键帧。例如，通过访问“animationiteration”或“animationstart”或“animationend”事件，或者可能使用“requestAnimationFrame”。

---

资源:

programmatically changing webkit-transformation values in animation rules

Set Webkit Keyframes Values Using Javascript Variable 位置 http://jsfiddle.net/russelluresti/RHhBz/2/

Alter or generate and then remove a css3 keyframe

Changing the different Keyframes in css using Javascript

https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitAnimationEventClassReference/WebKitAnimationEvent/WebKitAnimationEvent.html

http://msdn.microsoft.com/en-us/library/ie/hh772074%28v=vs.85%29.aspx

http://blogs.msdn.com/b/msdn_answers/archive/2013/11/04/part-i-using-javascript-to-set-keyframes-in-css-animations-windows-store-apps-ie.aspx

http://www.w3.org/TR/animation-timing/

希望对你有帮助