javascript - 如何取消设置/取消多个 Fx.Morphs

Question

我制作了一个有点简单的 Mootools 动画，它使用两个单独的 Fx.Morph 变量使元素在圆形路径上移动。我的问题是我需要能够取消动画，但我终生不能我想出了如何在不直接调用它们或将它们保存为全局变量的情况下处理取消这两个变形。

这是我使用的代码的简化版本:http://jsfiddle.net/4vBj9/2/

我试过使用 $(img).get('morph').cancel(); 但这似乎不适用于具有多个 Fx 的元素。

编辑:我突然忘记提到取消动画的事件可能不会在实例化的同一范围内发生，所以我不能真正调用处理变形的变量。

Answer 1

呃。您可以使用本地元素存储。默认情况下，.get('morph') 将为您检索第一个 fx 实例，但由于您每次都有多个/创建一个新实例并且不使用 .get/.set，你最好做这样的事情:

;(function(){
    var img = document.id('img');

    $('add').addEvent('click', function() {
        // try to get from storage, set empty array as default
        var fxs = img.retrieve('fxs', []);
        // if empty, make instances, store into array
        if (!fxs.length) {
                [].push.apply(fxs, [
                new Fx.Morph(img, {
                    duration: 1500,
                    transition: Fx.Transitions.linear.easeOut
                }),
                new Fx.Morph(img, {
                    duration: 750,
                    transition: Fx.Transitions.easeOutCirc
                })
            ]);
            // save it as one off
            img.store('fxs', fxs);
        }
        // reference as array elements
        fxs[0].start({
            top: 175
        });
        fxs[1].start({
            left: 175
        }).chain(function() {
            // this === fx instance. DRY
            this.options.transition = Fx.Transitions.easeInCirc;
            this.options.duration = 764;
            this.start({
                left: 10
            });
        });
    });

    $('rem').addEvent('click', function() {
       img.removeProperty('style');
    });

}());

很久以后，完全独立的代码:

;(function(){ // new scope
    $('box').addEvent('click', function(){
        var fxs = $('img').retrieve('fxs');
        fxs && fxs.invoke('stop');
    });
}());

这实现了代码的解耦和对变量的依赖，并使其干燥和封装——它还重新使用相同的 fx 实例，因此在第一次启动后运行速度会更快。

这是你的东西。 http://jsfiddle.net/4vBj9/6/

如果您要在 javascript 中制作需要流畅的复杂嵌套动画，请考虑 https://github.com/julianshapiro/velocity - 这是迄今为止最快的动画方式，包括 CSS 转换(检查基准)。哦 - 也可以做 css3 Prop ，而 mootools 不能。