详解jsanimate

一、jsanimate动画

jsanimate是一款轻量级、高性能的JavaScript动画库，它支持链式调用、队列和回调，同时还能处理复杂、多重的动画序列。通过jsanimate，我们可以轻松创建具有多重动画效果的UI，使网页更富有交互性。

下面是一段使用jsanimate实现动画效果的代码：

    
        var box = document.getElementById('box');
        animate(box).move(500, 500).rotate(360).scale(2).duration('2s').end();
    

在上述代码中，我们通过animate方法获取到元素box，并使用move、rotate和scale方法分别定义了元素的移动、旋转和缩放动画效果。duration函数设置动画时间为2s，end函数表示动画结束。

除了move、rotate和scale方法外，jsanimate还提供了一系列其他的方法，例如opacity、background、border等，以控制元素的样式变化。

二、animate方法

animate方法是jsanimate的核心方法，它将一个元素包装成了一个动画对象，这个对象具有一系列的属性和方法，用于控制该元素的动画效果。

下面是一段使用animate方法来创建动画对象的代码：

    
        var box = document.getElementById('box');
        var anim = animate(box).move(500, 500);
    

在上面的代码中，我们使用animate方法将元素box包装成动画对象，并使用move方法定义了动画效果。通过anim对象，我们可以继续调用其他的方法来定义更多的动画效果。例如：

    
        anim.rotate(360).scale(2).duration('2s').end();
    

上面的代码中，我们继续使用rotate和scale方法来定义元素旋转和缩放的动画效果，并通过duration方法设置动画时间为2s，最后调用end方法来结束动画。

三、动画队列

jsanimate支持动画序列，这意味着一个元素可以同时拥有多个动画效果，并按照指定顺序执行这些效果。例如：

    
        var box = document.getElementById('box');
        animate(box).move(500, 500).rotate(360).scale(2).duration('2s').queue()
            .move(0, 0).rotate(0).scale(1).duration('2s').dequeue();
    

在这段代码中，我们使用queue方法来创建一个动画队列，并在队列中添加了两个序列。第一个序列包含了元素移动、旋转和缩放的动画效果，通过duration方法设置动画时间为2s。第二个序列则是元素回到原来位置、角度和大小的动画效果，通过dequeue方法来触发执行队列中下一个序列。

四、回调函数

jsanimate支持回调函数，可以在动画开始、结束或者每一帧动画执行前后调用一个函数。例如：

    
        var box = document.getElementById('box');
        animate(box).move(500, 500).duration('2s').before(function() {
            console.log('Animation started');
        }).after(function() {
            console.log('Animation ended');
        });
    

在这段代码中，我们使用before和after方法分别在动画开始和结束时调用两个函数，并在控制台输出一段提示信息。

五、Easing

在动画中，Easing是一种非常常用的技巧。它可以让动画效果更加平滑、自然，并且可以尽可能地减少动画过渡的抖动。jsanimate支持多种Easing函数，例如linear、easeIn、easeOut和easeInOut等。例如：

    
        var el = document.getElementById('box');
        animate(el).move(500, 500).duration('2s').easeIn().end();
    

在上述代码中，我们使用easeIn方法来设置动画Easing效果为缓慢进入。其他的Easing函数也可以通过相应的方法来创建。

总结

jsanimate是一个非常好用的JavaScript动画库，它具有轻量化、高性能、支持链式调用、队列和回调等特点。通过jsanimate，我们可以方便地实现多种复杂的动画效果，使网页更加丰富、生动。