Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件

Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件

Fx.Morph

在Mootools 1.2中引入的Fx.Morph类是一种基于Tween的动画效果，可以让您实现令人惊叹的动态效果。例如，您可以使用Fx.Morph类使元素的宽度和高度逐渐变化，或者使图像的透明度逐渐变化。其基本语法如下：

var myFx = new Fx.Morph(element, options);

其中，element是需要应用动画效果的DOM元素，options则是一个可选的JavaScript对象，用于设置动画的参数和选项。以下是一些常用的选项：

• duration：指定动画的持续时间，默认为500毫秒。
• transition：指定动画的缓动函数，例如'sine:out'表示在结束时有缓动效果。
• onStart：指定当动画开始时要调用的回调函数。
• onComplete：指定当动画完成时要调用的回调函数。

如下代码展示了如何使用Fx.Morph来创建一个透明度动画效果：

window.addEvent('domready', function(){
    var myFx = new Fx.Morph('myElement', {
        duration: 2000,
        transition: 'sine:out'
    });
    $('myButton').addEvent('click', function(){
        myFx.start({
            opacity: 0
        });
    });
});

Fx选项

在Mootools 1.2中引入的Fx选项与Fx.Morph类似，它是另一种用于创建动画效果的类，可以与Fx.Morph类结合使用。例如，您可以使用Fx.Morph类创建一个宽度变化的动画，然后使用Fx选项类同时创建一个透明度变化的动画。以下是Fx选项类的基本语法：

var myFx = new Fx.Options(element, options);

其中，element是要应用动画效果的DOM元素，而options则与Fx.Morph类中的选项相似，用于设置动画的参数和选项。以下是一些常用选项：

• onStart：指定当其中一个动画开始时触发的回调函数。
• onComplete：指定当所有动画都完成时的回调函数。
• link：指定是否将所有动画对象链接到一起，使它们同时播放。

以下示例展示了如何使用Fx选项创建两个动态效果，并在它们完成后触发一个回调函数：

window.addEvent('domready', function(){
    var myMorph = new Fx.Morph('myElement', {
        duration: 2000,
        transition: 'sine:out'
    });
    var myFx = new Fx.Options();
    myFx.setOptions({
        link: 'chain',
        onComplete: function(){
            console.log('动画已完成');
        }
    });
    myFx.start({
        elements: [
            myMorph,
            new Fx.Tween('myElement', {
                duration: 1000,
                transition: 'bounce:out',
                property: 'opacity',
                onComplete: function(){
                    console.log('第一个动画已完成');
                }
            })
        ]
    });
});

Fx事件

在Mootools 1.2中引入了一系列事件，当应用动画效果时，这些事件可以使用，并通过回调函数来执行某些操作。以下是一些可以在Fx.Morph和Fx选项类中使用的事件：

• start：每当动画开始时触发的事件。
• complete：每当动画完成时触发的事件。
• cancel：每当动画被取消时触发的事件。

下面的代码示例演示了如何使用start事件和complete事件：

window.addEvent('domready', function(){
    var myFx = new Fx.Morph('myElement', {
        duration: 2000,
        transition: 'sine:out'
    });
    myFx.addEvent('start', function(){
        //在动画开始时执行一些操作
        console.log('动画已开始');
    });
    myFx.addEvent('complete', function(){
        //在动画完成时执行一些操作
        console.log('动画已完成');
    });
    $('myButton').addEvent('click', function(){
        myFx.start({
            opacity: 0
        });
    });
});

示例说明

以下是两个使用Mootools Fx的完整示例：

示例一：利用Fx.Morph实现图像渐变切换

window.addEvent('domready', function(){
    var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
    var currentIndex = 0;
    var myFx = new Fx.Morph('myImage', {
        duration: 2000,
        transition: 'sine:out'
    });
    $('myButton').addEvent('click', function(){
        currentIndex = (currentIndex + 1) % images.length;
        myFx.start({
            opacity: 0,
            onComplete: function(){
                $('myImage').set('src', images[currentIndex]);
                myFx.start({
                    opacity: 1
                });
            }
        });
    });
});

示例二：同时使用Fx.Morph和Fx选项实现文本淡入淡出效果

window.addEvent('domready', function(){
    var myMorph = new Fx.Morph('myText', {
        duration: 2000,
        transition: 'sine:out'
    });
    var myFx = new Fx.Options();
    myFx.setOptions({
        link: 'chain',
        onComplete: function(){
            console.log('动画已完成');
        }
    });
    $('myButton1').addEvent('click', function(){
        myFx.start({
            elements: [
                myMorph,
                new Fx.Tween('myText', {
                    duration: 1000,
                    transition: 'bounce:out',
                    property: 'opacity',
                    onComplete: function(){
                        console.log('第一个动画已完成');
                    }
                })
            ]
        });
    });
    $('myButton2').addEvent('click', function(){
        myFx.start({
            elements: [
                myMorph,
                new Fx.Tween('myText', {
                    duration: 1000,
                    transition: 'bounce:out',
                    property: 'opacity',
                    onComplete: function(){
                        console.log('第二个动画已完成');
                    }
                })
            ]
        });
    });
});