推荐10 款 SVG 动画的 JavaScript 库

标题：推荐10款SVG动画的JavaScript库

介绍：
本文将会介绍10个优秀的SVG动画的JavaScript库，使你可以更好的在网站中使用SVG动画。我们将从这些库的特点和优点开始，然后根据需求来选择最适合你的库，同时也会提供几个实例来更好的了解这些库。

一、Snap.svg
Snap.svg 是一个基于 SVG 元素的 JavaScript 库。它是一个小巧，可扩展的动态 SVG 库，适用于所有现代浏览器以及移动设备。Snap.svg 上手简单，有着许多常用的动画和变形效果，如简单的平移和旋转等。它的示例广泛且所有的示例代码都是开源的，所以你可以根据自己的需求轻松地修改代码。

二、GreenSock
GreenSock 的动画库官网上写道：“GreenSock 是建立在 Javascript 原生 API 之上的高效、适用于所有现代浏览器和移动设备的动画库。”大部分代码都开源，使用这个库，你可以轻松地实现大量的动画和过渡效果。GreenSock的TweenMax是其核心组件，提供了强大的动画功能，易于使用但功能强大，而且可以在多个平台和设备上高效地运行。

示例1：书本翻转效果

//HTML
<svg id="book-flip" class="book-flip" viewBox="0 0 360 360">
    <image x="0" y="0" width="360" height="360" href="img/book.jpg" />
    <rect x="174" y="0" width="6" height="360" fill="#000"></rect>
    <rect id="book-flip-mask" x="84" y="0" width="292" height="360" fill="white"></rect>
    <use href="#book-flip" opacity="0.9" />
</svg>

//JS - 使用TweenMax实现书本翻转效果
var bookFlip = new TimelineMax({paused: true});
var rotation = 0,
    rotationDelta = -150,
    ease = Power3.easeInOut,
    transformOriginX = 85,
    transformOriginY = 180,
    rotationDuration = 0.5,
    shadow = '5px 5px 20px rgba(0, 0, 0, 0.2)';

bookFlip
    .set('#book-flip z.use', {opacity: 0})
    .set('#book-flip-mask', {transformOrigin: 'left'})
    .to('#book-flip-mask', rotationDuration/2, {
        scaleX: 0.4,
        scaleY: 1.1,
        rotation: rotationDelta/2,
        ease: ease,
        transformOrigin: 'left'
    })
    .set('#book-flip-mask', {transformOrigin: 'right'})
    .to('#book-flip-mask', rotationDuration/2, {
        scaleX: 1,
        scaleY: 1,
        rotation: rotationDelta,
        ease: ease
    })
    .to('#book-flip', 0.03, {rotation: '+=1'}) //force antialiasing
    .set('#book-flip', {
        transformOrigin: String(transformOriginX)+'px '+String(transformOriginY)+'px',
        boxShadow: shadow
     })
    .to('#book-flip', rotationDuration, {
        rotation: '+=135',
        ease: ease
    })
    .to('#book-flip', 0.03, {rotation: '+=1'}) //force antialiasing
    .to('#book-flip-mask', rotationDuration/2, {
        scaleX: 0.4,
        scaleY: 1.1,
        rotation: 150/2,
        ease: ease,
        transformOrigin: 'left'
    })
    .to('#book-flip-mask', rotationDuration/2, {
        scaleX: 1,
        scaleY: 1,
        rotation: 0,
        ease: ease,
        transformOrigin: 'right'
    })
    .set('#book-flip', {rotation: 0, boxShadow: 'none'});

document.getElementById('book-flip').addEventListener('click', function() {
    bookFlip.play();
});

示例2： 可拖拽的SVG图像

//HTML
<svg id="draggable-svg" width="200" height="200">
    <rect x="0" y="0" width="100%" height="100%" fill="#CCCCCC" />
    <circle id="drag-obj" cx="100" cy="100" r="50" fill="#009966" />
</svg>

//JS - 使用Draggable功能实现可拖拽的SVG图像
Draggable.create("#drag-obj", {
   edgeResistance: 1,
   type:"x,y"
});

三、Velocity.js
Velocity.js 是一个比较新奇的 JavaScript 动画库，主打轻量，使用简单，有很多的插件可供使用。其有非常简单易用的API，可以轻松地创建和控制动画。Velocity.js 支持jQuery和Zepto，并扩展了许多动画功能、过渡效果、循环方法等。

四、Anime.js
Anime.js 是一个轻量级 JavaScript 动画库，尽可能地减小了性能瓶颈，并尝试使用CSS和SVG属性来实现动画效果。它的API特别干净简单，使得在使用中非常方便和自然。

五、Bonsai
Bonsai是一个由Adobe提供的开源库，它提供了大量的绘图和动画组件，而且和Flash和ActionScript有着很高的相似度。Bonsai 完全用 JavaScript 实现，可以在 WebApp 中轻松部署和扩展。它的强大之处在于可以使用JavaScript控制动画的每一个细节，从而实现更加精细的功能。

六、Zdog
Zdog 是一个基于 SVG 的 3D 形状制作库，它使用了全新的设计思路，由一组单独的、组合的形状元素构成，可以通过 JavaScript 控制每一个圆角和棱角的角度，使得开发人员有着更加自由的设计选择。

七、Three.js
Three.js 是一个用于创建3D图形的 JavaScript 库，它的庞大和复杂性使得它适用于体验设计、视觉化、3D图形艺术和许多其它领域。它提供了许多先进的功能，使得开发人员可以轻松地追踪虚拟相机的位置和旋转，并在空间中移动灯光和过滤器。此外，Three.js也支持GLSL着色器。

八、CircleMagic
CircleMagic 是一个由 Yuriy Artyukh 创建的 JavaScript 库，它提供了直观的元素动效载入和过渡动画效果。它广泛地应用于页面装载、滚动和变换。它以其流畅的动画效果和具有深度的动画表现力，产生了巨大的影响。

九、Raphael
Raphael 是一个流行的 JavaScript 库，专门用于绘制矢量图，它由Dmitry Baranovskiy开发。它基于SVG且具有跨浏览器支持，可以轻松地绘制和编辑矢量图。Raphael 的最大优势在于它拥有非常丰富的方法集合，可以实现各种各样的效果，并且常常广泛应用于图标和界面设计中。

十、Shifty
Shifty 是一个原生的 JavaScript 动画库，它主要专注于值的过度、重叠和动态计算。它严格遵循 MIT 许可证，并尝试不断扩展其功能。它最主要的功能是支持 moment.curry 函数和低级代码优化，并提供了一组非常丰富的函数和工具类。

总结：
上述10个SVG动画的JavaScript库都有其特点和优点。根据实际需求情况选择最合适的库是最重要的。在熟悉各类库的基础上可以使用其中的组件提供丰富的功能。同时，我们为大家提供了几个实例，以帮助更好的了解这些库。需要注意的是，不同的库实现动画效果的方式不同，在选择使用时要根据实际的需求和性能优化等方面综合考虑。