Question

我在html代码中设置svg元素的动画。基本上我有一个间隔，每次运行时，它会转换几个svg标签。这会导致Web应用程序出现大量延迟。有没有办法可以创建一个Web worker并在那里转换对象？

    var walk = function() {
        var step = 0, rotation_angle = 50, head_angle = 10, torso_angle = 5, arm_angle = 15;
        interval = setInterval(function() {
            main.transform(-(Math.sin(step * 0.8)) * head_angle, 1, 1, w/2, h/2, 0, 0);
            head.transform(-(Math.cos(step * 0.8)) * torso_angle, 1, 1, 0, 0, 0, 0);
            torso.transform(-(Math.cos(step * 0.8)) * torso_angle, 1, 1, 0, 0, 0, 0);
            leftArm.transform((Math.sin(step * 0.8)) * arm_angle, 1, 1, 0, 0, 0, 0);
            rightArm.transform(-(Math.cos(step * 0.8)) * arm_angle, 1, 1, 0, 0, 0, 0);
            rightLeg.transform(-(Math.cos(step)) * rotation_angle, 1, 1, 0, 0, 0, 0);
            leftLeg.transform((Math.sin(step)) * rotation_angle, 1, 1, 0, 0, 0, 0);
            step += 0.1;
        }, 0.5);                             
    };

例如，我想做一个步行动画，所以我旋转这些东西。 main，head，...是我创建的具有transform函数属性的函数对象。但有没有办法可以将其改为像

这样的东西

    var walk = function() {
        var step = 0, rotation_angle = 50, head_angle = 10, torso_angle = 5, arm_angle = 15;
        interval = setInterval(function() {
            new web_worker(function() {
                 main.transform(-(Math.sin(step * 0.8)) * head_angle, 1, 1, w/2, h/2, 0, 0);
            });
            new web_worker(function() {
                 head.transform(-(Math.sin(step * 0.8)) * head_angle, 1, 1, w/2, h/2, 0, 0);
            });
            new web_worker(function() {
                 torso.transform(-(Math.sin(step * 0.8)) * head_angle, 1, 1, w/2, h/2, 0, 0);
            });
            new web_worker(function() {
                 leftArm.transform(-(Math.sin(step * 0.8)) * head_angle, 1, 1, w/2, h/2, 0, 0);
            });
            new web_worker(function() {
                 rightArm.transform(-(Math.sin(step * 0.8)) * head_angle, 1, 1, w/2, h/2, 0, 0);
            });
            new web_worker(function() {
                 rightLeg.transform(-(Math.sin(step * 0.8)) * head_angle, 1, 1, w/2, h/2, 0, 0);
            });
            new web_worker(function() {
                 leftLeg.transform(-(Math.sin(step * 0.8)) * head_angle, 1, 1, w/2, h/2, 0, 0);
            });
            step += 0.1;
        }, 0.5);                             
    };

所有变换在每个区间函数中同时发生？

由于

Answer 1

我看了这篇文章太多次了，没有给出答案。想通了某人可能想要它。

使用函数构造函数new Function(argIdentifiers...,scopeString)，如图here所示。

如何在html中将函数对象传递给Web worker？

1 个答案: