10个最好的 JavaScript 动画库和开发框架
虽然 CSS3 动画功能能够让我们以简单轻松的方式实现动画效果,但是浏览器兼容性问题让人头疼。不过不用担心,我们还有另外的武器——JavaScript,它同样可以帮助你实现各种各样的动画效果,而且借助已有的动画库和框架,也能够让你快速开发。
这篇文章挑选了个人认为最好的15个 JavaScript 动画库和开发框架,相信其中一定会有一款是适合你的。
1. Tween JS

TweenJS 是一个简单的 JavaScript 补间动画库。能够很好的和 EaselJS 库集成,但也不依赖或特定于它。它支持渐变的数字对象属性和 CSS 样式属性。API 简单但非常强大,因此很容易通过链式调用来创建复杂的补间动画。
2. Snap.svg

SVG 是一个创建交互式、分辨率无关的向量图形的很好的解决方案,让效果在任何大小的屏幕上看起来都是高保真的。Snap.svg 这个 JavaScript 库处理 SVG 就如你用 jQuery 操作 DOM 一样简单。Snap.svg 是专为现代浏览器设计的,支持最新的 SVG 遮罩,剪裁,模式,完整的渐变,分组等功能。
3. Animo.js

Animo.js 是一个用于管理 管理 CSS 动画的小工具。它的功能包括:堆栈动画,创建跨浏览器的模糊效果,设置动画完成的回调等。
4. Move.js

Move.js 是一个小的 JavaScript 库,用于以非常简单和优雅的方式支持 CSS3 动画。
5. Collie

Collie 是一个 Javascript 库,可以使用 HTML5 创建高度优化的动画和游戏。它在 PC 和移动端都能使用,使用 HTML5 Canvas 和 DOM 实现。Collie 能稳定使用渲染管道和处理多个对象支持的有用特性包括精灵动画和用户事件。
6. Minified.js

Minified.js 是一个客户端 JavaScript 库,很轻量(<8kb),功能齐全。它提供了类似 jQuery 的特性(DOM操作、动画、事件、HTTP请求等)和工具函数(集合,日期格式化、日期计算、模板等)与一个简单的、一致的API。
7. Rekapi

Rekapi 是一个基于 JavaScript 的关键帧动画库。它为您提供了一个 API,用于定义基于帧的动画和控制动画的播放。
2. Jsanim

jsAnim 这个库比较小众一点,可以为你的网站添加动画效果,大小为25KB 左右。
9. Favico

想给你的网站添加徽章、图片甚至视频作为图标吗?Favico.js 可以帮你实现,它能够轻松添加动画效果的网站徽章。
10. Textillate.js

Textillate.js 是一个简单的 CSS3 文本动画插件。Textillate.js 结合了一些很棒的库,提供一个易于使用的插件,能够将 CSS3 动画应用到任何文本。
本文链接:10个最好的 JavaScript 动画库和开发框架
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
10个最好的 JavaScript 动画库和开发框架的更多相关文章
- JavaScript 动画库和开发框架
1. Tween JS TweenJS 是一个简单的 JavaScript 补间动画库.能够很好的和 EaselJS 库集成,但也不依赖或特定于它.它支持渐变的数字对象属性和 CSS 样式属性.API ...
- 2019年10个最受欢迎的JavaScript动画库!
摘要: 非常炫酷的动画库! 原文:值得看看,2019 年 11 个受欢迎的 JavaScript 动画库! 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 1. Three.js 超过 ...
- 2018年值得关注的10大JavaScript动画库
2018年值得关注的10大JavaScript动画库 旭日云中竹 前端早读课 1周前 前言 平时大家开发动画是采用什么方式呢?虽然18年过半,可这十个动画库是真的没听过几个,有点尴尬.今日早读文章由@ ...
- Snabbt.js – 极简的 JavaScript 动画库
Snabbt.js 是一个简约的 JavaScript 动画库.它会平移,旋转,缩放,倾斜和调整你的元素.通过矩阵乘法运算,变换等可以任何你想要的方式进行组合.最终的结果通过 CSS3 变换矩阵设置. ...
- 原生javascript封装动画库
****转载自自己发表于牛人部落专栏的文章**** 一.前言 本文记录了自己利用原生javascript构建自己的动画库的过程,在不断改进的过程中,实现以下动画效果: 针对同一个dom元素上相继发生的 ...
- AOS – 另外一个独特的页面滚动动画库(CSS3)
AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,你可能会觉得它和 WOWJS 一样,的确他们效果是类似的.但是AOS是 CSS3 动画驱动的库,当你滚动页面的时候能让元素动起来,当页面滚回顶部 ...
- 前端笔记之移动端&响应式(上)媒体查询&Bootstrap&动画库&zepto&velocity
一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变 ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- CSS3 Animation Cheat Sheet:实用的 CSS3 动画库
CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画.所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类 ...
随机推荐
- 前端工程师技能之photoshop巧用系列第四篇——图片格式
× 目录 [1]图片格式 [2]保存设置 前面的话 对于前端来说,图片格式是需要重要掌握的知识.本文是photoshop巧用系列第四篇——图片格式 图片格式 目前在前端的开发中常用的图片格式有jpg. ...
- JSP网站开发基础总结《十》
经过上一篇的介绍相信大家对JSP提供的过滤器一定有了一个概念,本篇我们就一起再来研究一下关于创建多个过滤器时,如果有两个以上过滤器的过滤规则相同,那么这些过滤器的执行顺序如何呢?答案是根据我们在web ...
- php基础教程-输出Hello World
<!DOCTYPE html> <!--!文档类型,一个文档类型标记是一种标准通用标记语言的文档类型声明, 它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(D ...
- [转载]"百度方法+"案例—从持续集成到持续交付
前言 百度开放云(https://bce.baidu.com)是百度基于十五年基础架构核心技术积累推出的云服务,目前推出了14个云计算产品和9个大数据产品,并提供数字营销云.在线教育.物联网等10种解 ...
- Spark入门实战系列--7.Spark Streaming(下)--实时流计算Spark Streaming实战
[注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .实例演示 1.1 流数据模拟器 1.1.1 流数据说明 在实例演示中模拟实际情况,需要源源 ...
- Admin Panel – 非常漂亮的后台管理系统模板
网站或者应用系统的管理后台的设计虽然不像前台界面那样要求设计精美,但是也需要有清晰的管理模块划分,下面分享的这个后台管理模板的设计非常漂亮,特别是导航部分,头部还有未读的短消息和提醒的条数显示.赶紧下 ...
- Codrops 教程:基于 CSS3 的精美模态窗口效果
Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...
- [UWP]涨姿势UWP源码——极简的RSS阅读器
涨姿势UWP,一个开源的RSS阅读器,一个纯粹的项目,一个有道德的APP,一个脱离了低级趣味的作者,一些有益于人民的代码.骚年,还等什么,来涨点姿势吧! 该项目代码可能会引起部分人群的不适,敏感人群请 ...
- shell脚本专题之-----------全自动编译安装mysql
mysql的编译安装,在博客 开源服务专题之--------mysql的编译安装 中已经说明了,但是还是比较麻烦,尤其是一大堆命令,来手动执行,稍有不慎,就会出错.生产上一般都是先在本地测试环境进行自 ...
- 脚本引用中的defer和async的用法和区别
之前的博客漫谈前端优化中的引用资源优化曾经提到过脚本引用异步设置defer.async,没有细说,这里展开一下,谈谈它们的作用和区别,先上张图来个针对没用过的小伙伴有个初始印象: 是的,就是在页面脚本 ...