开发者社区> 冰点沐雪> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

10个顶级JavaScript动画框架推荐

简介: 使用JavaScript可以做出一些引人注目的动画效果,但通常不太容易实现。本文为你整理了10个非常优秀的JavaScript动画框架,使用它们你可以轻松实现动画效果。   1. Raphaël   Raphaël是一个小型JavaScript库,用于简化你的Web矢量图形工作。
+关注继续查看

使用JavaScript可以做出一些引人注目的动画效果,但通常不太容易实现。本文为你整理了10个非常优秀的JavaScript动画框架,使用它们你可以轻松实现动画效果。

 

1. Raphaël

 

Raphaël是一个小型JavaScript库,用于简化你的Web矢量图形工作。如果你想创建独特的图表或图形的裁剪和旋转部件,你可以使用这个简单方便的库来实现。

源码 + 演示

 

2. Processing.js

 

该框架主要针对不想使用Flash或Java applets进行图片编程以及Web交互的开发者。Processing.js使用JavaScript在HTML5的Canvas元素上绘制形状以及操作图像。

源码 + 演示

 

3. script.aculo.us

 

这是一个易用、跨浏览器的JavaScript UI库,可以让你的网站和Web应用更加生动。

源码 / 演示

 

4. Pixastic

 

Pixastic 使用 HTML5 Canvas对象,允许对原始像素进行操作。效果包括去饱和度、灰度、反转、亮度、对比度调整、色调调整、饱和度调整、浮雕、虚化等效果。因为用到了 HTML 5 的Canvas对象,因此还无法兼容所有浏览器。

源码 / 演示

 

5. moo.fx

 

这是一个超轻量级但非常杰出的JavaScript效果库,可以和Prototype.js或者Mootools框架结合使用。

源码 + 演示

 

6. scripty2

 

这是一个强大、灵活的JavaScript框架,可以帮助你创建漂亮的视觉效果及用户界面。scripty2分为三个部分:核心(CORE)、特殊效果(FX)和用户界面(UI),支持IE6+、Safari 3+、Firefox 3+、Chrome、Opera 10 以及更多基于WebKit引擎的浏览器。

源码 / 演示

 

7. jsAnim

 

这是一个强大、易用的JavaScript库,可以为你的网站添加令人印象深刻的动画效果,非常轻量级,大小不超过25KB。

源码 + 演示

 

8. The Canvas 3D JS Libary (C3DL)

 

这是一个JavaScript库,使用它你可以很容易地使用Canvas 3D元素来编写3D应用。

源码 / 演示

 

9. GX

 

这是一个全功能、跨浏览器、超小(未压缩版本为10KB)的JavaScript动画框架。使用GX,你可以创建复杂的动画。

源码 / 演示

 

10. Scriptio

 

这是一个开源框架,用于在线展示动画和教学媒体。使用该框架,可以提高原型设计和高质量开发工作的效率。Scriptio被设计用于富Web 2.0应用。

源码 / 演示

 

英文原文:10 Super JavaScript Animation Frameworks

译文出自:ITeye

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
10 个顶级 JavaScript 动画框架推荐
使用JavaScript可以做出一些引人注目的动画效果,但通常不太容易实现。本文为你整理了10个非常优秀的JavaScript动画框架,使用它们你可以轻松实现动画效果。 1. Raphaël Raphaël是一个小型JavaScript库,用于简化你的Web矢量图形工作。
633 0
《HTML5+JavaScript动画基础》——2.6 小结
本章介绍了理解书中示例所需要的JavaScript基础知识。现在你应该了解了如何创建HTML5文件、调试、循环、事件以及事件处理程序。本章简单介绍了JavaScript对象,基本的用户交互,并且创建了一系列用于简化代码的工具函数。
974 0
《HTML5+JavaScript动画基础》——第2章 动画的JavaScript基础 2.1动画基础
本书着重于动态动画的规则,其中会介绍改变图像描述的各种不同技术,正是依赖于这些技术才得以实现逼真的动画效果。本章将介绍如何定义图像起始描述的结构,如何为每一帧应用变化规则以及如何将两者结合在一起完成一个程序。在此过程中我们会创建大量可行的实例。
1062 0
《HTML5+JavaScript动画基础》——1.4 小结
归功于创新驱动的现代浏览器,Web编程的一个新纪元创造性地拉开序幕。HTML5中的canvas元素为我们带来了一个遵循标准。跨平台的组件,使用它可以创建更加高级的Web图像。本书将探究那些以编程方式创建动画的原理,而这些动画则是构成下一代图形交互的重要元素。
947 0
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: <!-- <input type="text" id="text"> --> 请选择省份: <select name="" id="provinces"> <!-- <option value="江苏省">江苏省</option>
0 0
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
0 0
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
0 0
JS中实现或退出全屏
JS中实现或退出全屏
0 0
前端:JS实现双击table单元格变为可编辑状态
前端:JS实现双击table单元格变为可编辑状态
0 0
+关注
冰点沐雪
专业从事软件开发(asp.net)近10年。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载