10 个顶级 JavaScript 动画框架推荐
jopen 12年前
<p>使用JavaScript可以做出一些引人注目的动画效果，但通常不太容易实现。本文为你整理了10个非常优秀的JavaScript动画框架，使用它们你可以轻松实现动画效果。 <br /> <br /> <strong>1. Raphaël</strong> <br /> <br /> Raphaël是一个小型JavaScript库，用于简化你的Web矢量图形工作。如果你想创建独特的图表或图形的裁剪和旋转部件，你可以使用这个简单方便的库来实现。 <br /> </p> <div style="text-align:center;"> <img alt="10 个顶级 JavaScript 动画框架推荐" src="https://simg.open-open.com/show/e56616c827292766e2379c8e9cb9bf6f.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958190210435298611" target="_blank">源码 + 演示</a> <br /> <br /> <strong>2. Processing.js</strong> <br /> <br /> 该框架主要针对不想使用Flash或Java applets进行图片编程以及Web交互的开发者。Processing.js使用JavaScript在HTML5的Canvas元素上绘制形状以及操作图像。 <br /> </p> <div style="text-align:center;"> <img alt="10 个顶级 JavaScript 动画框架推荐" src="https://simg.open-open.com/show/d38d480db27a3506cdde8a3074884011.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958190209686600862" target="_blank">源码 + 演示</a> <br /> <br /> <strong>3. script.aculo.us</strong> <br /> <br /> 这是一个易用、跨浏览器的JavaScript UI库，可以让你的网站和Web应用更加生动。 <br /> </p> <div style="text-align:center;"> <img alt="10 个顶级 JavaScript 动画框架推荐" src="https://simg.open-open.com/show/5167cd3f0767373ade251e590877ba39.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958325491622417780" target="_blank">源码</a> / <a href="/misc/goto?guid=4958325492413558578" target="_blank">演示</a> <br /> <br /> <strong>4. Pixastic</strong> <br /> <br /> Pixastic 使用 HTML5 Canvas对象，允许对原始像素进行操作。效果包括去饱和度、灰度、反转、亮度、对比度调整、色调调整、饱和度调整、浮雕、虚化等效果。因为用到了 HTML 5 的Canvas对象，因此还无法兼容所有浏览器。 <br /> </p> <div style="text-align:center;"> <img alt="10 个顶级 JavaScript 动画框架推荐" src="https://simg.open-open.com/show/69554545eb3eca491c91719704fd14df.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958190208938298893" target="_blank">源码</a> / <a href="/misc/goto?guid=4958325493946812161" target="_blank">演示</a> <br /> <br /> <strong>5. moo.fx</strong> <br /> <br /> 这是一个超轻量级但非常杰出的JavaScript效果库，可以和Prototype.js或者Mootools框架结合使用。 <br /> </p> <div style="text-align:center;"> <img alt="10 个顶级 JavaScript 动画框架推荐" src="https://simg.open-open.com/show/66bc8d5e5ee9d634df6dde2aeab2b9a6.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958325494739318851" target="_blank">源码 + 演示</a> <br /> <br /> <strong>6. scripty2</strong> <br /> <br /> 这 是一个强大、灵活的JavaScript框架，可以帮助你创建漂亮的视觉效果及用户界面。scripty2分为三个部分：核心（CORE）、特 殊效果（FX）和用户界面（UI），支持IE6+、Safari 3+、Firefox 3+、Chrome、Opera 10 以及更多基于WebKit引擎的浏览器。 <br /> </p> <div style="text-align:center;"> <img alt="10 个顶级 JavaScript 动画框架推荐" src="https://simg.open-open.com/show/11578c252e9a3eec94b399fa30dd5d4a.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958325495531891296" target="_blank">源码</a> / <a href="/misc/goto?guid=4958325496317020303" target="_blank">演示</a> <br /> <br /> <strong>7. jsAnim</strong> <br /> <br /> 这是一个强大、易用的JavaScript库，可以为你的网站添加令人印象深刻的动画效果，非常轻量级，大小不超过25KB。 <br /> </p> <div style="text-align:center;"> <img alt="10 个顶级 JavaScript 动画框架推荐" src="https://simg.open-open.com/show/1f5b7ea33cf92471c0890a45a1827ab9.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958325497102937893" target="_blank">源码 + 演示</a> <br /> <br /> <strong>8. The Canvas 3D JS Libary (C3DL) </strong><br /> <br /> 这是一个JavaScript库，使用它你可以很容易地使用Canvas 3D元素来编写3D应用。 <br /> </p> <div style="text-align:center;"> <img alt="10 个顶级 JavaScript 动画框架推荐" src="https://simg.open-open.com/show/98e854c45b1d71790ae97ba1776d6c84.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958190188834133697" target="_blank">源码</a> / <a href="/misc/goto?guid=4958325498622051955" target="_blank">演示</a> <br /> <br /> <strong>9. GX</strong> <br /> <br /> 这是一个全功能、跨浏览器、超小（未压缩版本为10KB）的JavaScript动画框架。使用GX，你可以创建复杂的动画。 <br /> </p> <div style="text-align:center;"> <img alt="10 个顶级 JavaScript 动画框架推荐" src="https://simg.open-open.com/show/47d60e687c0a5356e95044e6ae198b9d.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958325499411489170" target="_blank">源码</a> / <a href="/misc/goto?guid=4958325500207459254" target="_blank">演示</a> <br /> <br /> <strong>10. Scriptio</strong> <br /> <br /> 这是一个开源框架，用于在线展示动画和教学媒体。使用该框架，可以提高原型设计和高质量开发工作的效率。Scriptio被设计用于富Web 2.0应用。 <br /> </p> <div style="text-align:center;"> <img alt="10 个顶级 JavaScript 动画框架推荐" src="https://simg.open-open.com/show/9da99e98f96a4462c2e72f53955bd9a4.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958325500995317692" target="_blank">源码</a> / <a href="/misc/goto?guid=4958325501790293967" target="_blank">演示</a> <br /> <br /> 英文原文：<a href="/misc/goto?guid=4958325502587234429" target="_blank">10 Super JavaScript Animation Frameworks</a></p> 本文转载自: <a href="/misc/goto?guid=4958325503378250291" rel="nofollow" target="_blank">http://www.iteye.com/news/23996</a>