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

Posted

技术标签:

【中文标题】使用 javascript 暂停 CSS 动画并跳转到动画中的特定位置【英文标题】：Pausing CSS animation with javascript and also jumping to a specific place in the animation 【发布时间】：2014-03-31 14:13:23 【问题描述】：

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

有谁知道如何做到这一点？

点击后..

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

键盘输入...

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

【问题讨论】：

请参阅：***.com/questions/20499462/…“不幸的是，目前没有选项可以轻松地在迭代之间设置延迟，但是您可以添加另一个具有相同值的停止（正如我评论的那样），并增加持续时间:" GSAP 会很适合这个。查看 TimelineMax 【参考方案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) + "&nbsp; 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 库。查看链接。

启动和暂停 css 动画可以通过 animation-play-state 财产。

启动和停止 jquery 动画有几种方法。 $(element).queue("fx", []) 应该停止所有 jquery 动画并清除 jquery animations queue。 .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 版）不尝试访问确切的 css keyframe '(elapsedTime) 在running css 动画中/在中断之前 它们带有几个 layered 或“重新激活”的 css/js 动画和/或 css 过渡。 而是尝试将 css 动画返回到近似位置 它们在“分层” js 动画中断之前运行。虽然，应该 可以访问keyframes 的确切动画elapsedTime 或timeStamp（可能是0 或miliiseond 类型的时间戳，具体取决于浏览器）。例如， 通过访问“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/

希望对你有帮助

【讨论】：

【参考方案2】：

试试这个：

http://css-tricks.com/controlling-css-animations-transitions-javascript/

希望这有助于解决您的问题！

【讨论】：

以上是关于使用 javascript 暂停 CSS 动画并跳转到动画中的特定位置的主要内容，如果未能解决你的问题，请参考以下文章

使用 jQuery 运行/暂停 CSS 动画

寻找画布关键帧暂停关键帧动画示例

悬停时播放 CSS 动画，悬停时暂停

css 您可以通过更改其动画播放状态属性来“暂停”和“播放”CSS动画。将其设置为“暂停”会停止播放动画

Webkit CSS 动画跳跃问题

使用 jQuery 在向上滚动和向下滚动时添加不同的 CSS 动画