Question

我见过CSS animations off the UI thread 。如果我将移动动画添加到svg元素，则不会被阻止，但是如果我添加到svg组元素，它将被JavaScript阻止。有什么办法解决这个问题？谢谢这是我的demo，点击该按钮将被JavaScript阻止

我使用了chrome浏览器性能分析工具来发现，如果group元素上的css动画将进行渲染和绘画，而在svg元素上的css动画则不会。

   <!DOCTYPE html>
    <!-- saved from url=(0050)http://www.phpied.com/files/css-thread/thread.html -->
    <html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <meta name="viewport" content="width=device-width">
        <title>CSS animations</title>
        <style>
            .move {
                -webkit-animation: 5s move-to linear 0s infinite;
                animation: 5s move-to linear 0s infinite;
            }

            @keyframes move-to {
                100% {
                    transform: translateX(5000px) translateZ(0);
                }
            }

            @-webkit-keyframes move-to {
                100% {
                    transform: translateX(5000px) translateZ(0);
                }
            }
        </style>

        <script>
            function kill() {
                var start = +new Date;
                let count = 0;
                while (+new Date - start < 5000) {
                    count++;
                }
                console.log("" + new Date(), count);
            }
        </script>
    </head>

    <body>
        <p><button onclick="kill()">kill 'em all for 5 sec</button></p>
        <!--   if you add move animation to svg ,it will not be blocked  -->
        <svg t="1562835859455" id="wps" class="spin0" viewBox="0 0 10000  1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="5774" width="1000" height="500" style=" background: darkgrey">
            <g class="move">
                <path transform="translate(2000,0)"
                    d="M1446.61471 40.993032A85.124129 85.124129 0 0 0 1374.141935 0H947.596387c-31.810065 0-60.977548 18.002581-75.742968 46.707613L726.709677 296.134194l-93.514322 193.701161-129.519484 253.291355L216.130065 141.510194h237.997419l154.822193 323.584 93.514323-193.668129-120.898065-224.718452A85.322323 85.322323 0 0 0 505.822968 0H79.277419C49.812645 0 22.395871 15.525161 6.804645 40.993032c-15.65729 25.500903-1.123097 49.185032 11.792516 76.20542l405.636129 857.781677A85.355355 85.355355 0 0 0 499.943226 1024h1.156129c31.810065 0 61.043613-18.035613 75.776-46.905806L726.709677 684.098065l93.547355-194.26271 179.034839-348.358194h237.997419l-287.545806 601.649549-105.273807-228.583226-93.514322 194.295742 125.588645 268.288A85.256258 85.256258 0 0 0 952.32 1024h1.156129a85.388387 85.388387 0 0 0 75.709936-49.019871l405.636129-857.781677c12.915613-27.020387 27.416774-50.704516 11.792516-76.20542"
                    p-id="5775" fill="red"></path>
                <g>
        </svg>
        <p></p>

    </body>

    </html>

如何在svg组元素上制作平滑的动画关键帧？

0 个答案: