javascript - 流畅的动画跟随光标

Question

我想弄清楚如何使用 cocos2d js 创建平滑的光标跟随动画

这里有一些代码:

var listener = cc.EventListener.create({
            event: cc.EventListener.MOUSE,
            onMouseMove: function (event) {
                var str = "MousePosition X: " + event.getLocationX() + "  Y:" + event.getLocationY();

                var actionBy = cc.MoveTo.create(2, cc.p(event.getLocationX(), $scope.bar._position.y));
                $scope.bar.stopAllActions();
                $scope.bar.runAction(
                    cc.sequence(
                        //cc.rotateTo(2, 0),
                        actionBy
                    )
                );


                // do something...
            }});

这里的问题是，它被卡住了，因为事件经常被触发，并且“$scope.bar.stopAllActions();”停止动画。

如果我删除“$scope.bar.stopAllActions();”动画太疯狂了，“条”在屏幕上飞过。

我只是不会让栏跟随鼠标光标，就像狗跟随人类一样

Answer 1

这里的问题是，如果您删除 stopAllActions();，您将尝试对已同时执行操作的对象运行操作。无论哪种情况，您都会过于频繁地在对象上触发动画，我很少看到这种工作按预期进行。

我会尝试直接运行该操作，而不是首先将其放入 cc.Sequence 中，但如果这不起作用，您有两种选择，两者都依赖于体力劳动:

a.只需将条形图放在鼠标移动时的位置即可:$scope.bar.x = event.getLocationX();

b.假设您想让游戏“更有活力”，仅仅在鼠标上设置进度条会很无聊，因此您可以使进度条逐渐 catch 鼠标:

在你的常量部分:

var EASING_CONSTANT = 0.9;

在事件处理程序中:

$scope.bar.x += ($scope.bar.x - event.getLocationX()) * EASING_CONSTANT;

EASING_CONSTANT 越低，条形追上鼠标的速度就越慢(仅使用 0 到 1 之间的值)。

现在，如果您尝试使用此功能，您会发现栏永远不会完全跟上您的鼠标，因此您必须将此代码放在更新函数中(在主游戏层的 update 方法，例如)，因此它运行每一帧。

但是!那么您将无法访问 event 对象，因此您最终将不得不得到如下结果:

在事件处理程序中:

$scope.bar.targetX = event.getLocationX();

在更新方法中:

$scope.bar.x += ($scope.bar.x - $scope.bar.targetX) * EASING_CONSTANT;

您可以使用很多缓动函数，我只是给您提供了最简单的示例。

例如，请注意，您还有 event.getDeltaX() 方法，该方法将返回事件的最后一次调用与当前事件之间的位置差异(鼠标移动了多少自事件的最后一次调用以来)。有了这个，你可以做一些类似的事情:

在你的常量部分:

var EASING_CONSTANT = 0.9;
var WOBBLING_CONSTANT = 10;

在事件处理程序中:

$scope.bar.targetX = event.getLocationX();
$scope.bar.mouseDeltaX = event.getDeltaX();

在更新方法中:

$scope.bar.x += ($scope.bar.x - $scope.bar.targetX) * EASING_CONSTANT + Math.cos($scope.bar.mouseDeltaX) * WOBBLING_CONSTANT;

发挥创意并开始修改公式，直到找到“感觉”正确的行为。但一定要先从简单开始!

PS:我猜你希望你的“条”只在 x 轴上移动，所以..你在制作一个打砖 block 克隆吗？ :D