文档章节

给 Web 开发人员推荐的开源图形库 —— 动画

编辑部的故事
 编辑部的故事
发布于 2017/07/13 16:51
字数 1623
阅读 8736
收藏 669
点赞 38
评论 9

现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高,数据可视化、动画交互、2D/3D 等元素已然成为标配。

以下是为 Web 开发者推荐的一些精品开源图形库,旨在专注于最常见的问题和最常用的东西。将针对动画(Animation)、数据可视化(Data Visualization)、2D/3D 分别整理,欢迎保持关注。

给 Web 开发人员推荐的开源图形库 —— 2D/3D

给 Web 开发人员推荐的开源图形库 —— 数据可视化

动画

一、效果(Effects)

1、切换和过渡

Animate.css

一个跨浏览器的 css3 动画库,内置了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)、放大缩小(等多达 60 多种动画效果,几乎包含了所有常见的动画效果。在炫酷的同时,还一直保持着易于使用的特点。

效果预览:点此查看

Magic Animations

一个独特的 CSS3 动画特效包,可以自由地使用在 Web 项目中。包括:Magic Effects、Bling、Static Effects、Static Effects Out、Perspective、Rotate、Slide、Math、Tin、Bomb 等各类效果。

效果预览:点此查看

Effeckt.css

同样是一个包含众多精妙的 CSS3 切换和动画效果库,例如:弹窗、按钮、导航、列表、页面切换等,适用于网站和移动 Web 开发。

效果预览:点此查看

还有:

Velocity.js:一个简单易用、高性能、功能丰富的轻量级动画库。它能和 jQuery 完美协作,并和 $.animate() 有相同的 API, 但它不依赖 jQuery,可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能, 还有变换、循环、缩放等特色功能。

Anime.js:可以和 CSS3 属性、SVG、DOM 元素和 JS 对象一起工作,制作出各种高性能,平滑过渡的动画效果。

数量太多,不一一列举。

2、悬停

Hover

一款基于 CSS3 的悬停特效合集,可以轻松的被应用到链接、按钮、LOGO、SVG 以及图片等元素和修饰上。可用于 CSS、Sass 和 LESS 。

效果预览:点此查看

3、图标

Transformicons

一个结合 SVG、CSS 和 HTML 技术,让图标、按钮和符号具有变种(特殊)动画效果的库。它几乎可完成开发所需的任意动画效果,还提供了一些可选参数方便对效果进行自定义。

4、加载

Loaders.css

一款追求性能和体验感的加载动画合集,利用纯 CSS 实现多种样式的 Loading 加载动画。这些动画并不需要图片来辅助,以避免昂贵的绘画和布局成本,同时也对运行效率有所保证。

SpinKit

同样是一款  CSS 加载动画合集,可高度自定义动画效果,并且提供多个参数可供选择,运行性能流畅。

类似的 spin.js 也不错,压缩后仅 1.9K,在此不多赘述。

5、行为速度(Easing)

d3-ease

这是一个让动画更为平滑的 Easing 库。Easing 是一种通过调整时间映射来控制动画中的行为的方法。它最常用于缓慢进退,让动画转换更为平滑,行为更加合理。

6、滚动

ScrollReveal

一款页面滚动显示动画,可以播放一次也可以播放无限次,能让页面更加有趣,更吸引用户眼球。

ScrollMagic

一个用来创建魔幻滚动交互的 JavaScript 库,可以像使用进度条一样使用滚动条。支持在特定的滚动位置开始一个动画,并且让动画同步滚动条的动作,和把元素粘在一个特定的滚动位置。当用户到达某个滚动位置时,可以调用函数,或以任何其他方式来和当前的滚动位置进行交互。

7、视差

Parallax

一款简单,轻量级的视差效果生成器,可以对智能设备点击运动的方向作出反应,不需要任何识别方向,检测位置的设备,只需要游标(鼠标运动的方向等)的方向。

效果预览:点此查看

RELLAX

同样是一款主打轻量级的纯 JavaScript 视差效果库,但和 Parallax 的游标视觉差不同的是,它倾向于滚动视觉差。RELLAX 压缩后的版本仅 1021 个字节,在手机等小屏幕设备中,插件会自动限制视觉差特性。

8、翻转(Flip)

React FLIP Move

一个翻转移动的库,旨在解决当列表的顺序发生变化时,项目列表动画化的问题。DOM 节点实际上不能重新排序,创建新的节点,因此简单的 CSS 转换不起作用。react-flip-move 利用 FLIP 技术来计算出这样的转换将是什么样的,并使用硬件加速 CSS 转换。

效果预览:点此查看

从阿里的  Ant Design 中提炼出来的动效语言 Ant Motion ,也能实现类似的效果。它同时也是一套 React 框架动效解决方案,提供了单项、组合动画,以及整套解决方案。

9、数值

CountUp.js

一个无依赖关系的轻量级 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据。尽管它的名字叫 countUp,但其实可以在两个方向进行变化,取决于传递的 startVal 和 endVal 参数判断。

10、关键帧/时间轴

Dynamics.js

一款可以创建物理运动动画效果 JavaScript 库,只需把它引入页面,即可激活任意 DOM 元素的 CSS 属性动画,也可结合 SVG 使用。

React-Motion

一个值得推荐的物理动画库, 使动画看起来像一个弹簧那样,配置合适的劲度系数和空气阻力后,可以使网站增添一些俏皮的元素,让用户体验起来更加舒畅。

11、轨迹/曲线

Mojs

一个拥有极简的声明式 API ,能够轻松掌控运动轨迹,为运动图形而生的工具库,允许模块化需求定制,有良好的动画效果和用户体验。

Vivus

一个无依赖的轻量级 Javascript 库,可以绘制 SVG 图形的外观,执行 SVG 路径动画。它有各种不同的动画效果可用,允许创建一个自定义脚本来绘制 SVG 。

© 著作权归作者所有

共有 人打赏支持
编辑部的故事

编辑部的故事

粉丝 1085
博文 231
码字总数 392922
作品 0
深圳
运营/编辑
加载中

评论(9)

Loveni
Loveni
这个可以mark一下
马丁的早晨
马丁的早晨
收藏
都柏林
都柏林
mark
lemonwater
lemonwater
必须收藏的好文章
wappleat
wappleat
:fire:
SimonYe
SimonYe
我喜欢动图~~
Heanes
Heanes
这个可以mark
开源中国首席PHP宣传专家
开源中国首席PHP宣传专家
有没有google材质 设计 的相关css
JavaFX技术预览

作者 Charles Humble译者 崔康 发布于 2008年11月24日 上午1时35分 社区 Architecture, Java 主题 语言设计, Web 2.0, RIA, 富客户端/桌面 标签 JavaFX Mobile, 开源Java, JavaFX脚本 Java 的...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

Android开发_推荐一些顶级Android书

这两天在网上看到的一些perfect android books , 那就分享给大家,没兴趣买的可以下载下电子版的书看看 本帖对Android开发菜鸟和中级老兵同样适用,因为本帖重点列出了那些最常用的Android开...

zhangty0223 ⋅ 2013/07/19 ⋅ 0

个人分享--web前端学习资源分享

1.前言 时间过得真快,转眼间现在是2017年最后一个星期,而今天也是圣诞节,过几天也是元旦了。每到年底,大家都习惯总结和分享,我也不例外。但是经历,我之前已经发过了,那么我今天就分享...

⋅ 2017/12/25 ⋅ 0

10月新增开源项目:号称最快的 Node.js 应用框架来了

摘要: 看看开源中国社区十月份有哪些值得关注的新增项目:百度研发的移动端深度学习框架 MDL,号称是目前最快 Node.js 应用框架之一的 Fastify,Go 语言实现的分布式全文搜索引擎 riot 等等…...

开源中国 ⋅ 01/05 ⋅ 0

开发人员常用的10个JavaScript库

最近有很多学员在问我,有没有常用的javascript库,他们在日常使用的时候不知道去哪儿找。我在此整理出来,供麦子学院的学员们参考。 MooTools MooTools是一个简洁,模块化,面向对象的JavaS...

yexiaobo1990 ⋅ 2015/07/24 ⋅ 0

OSChina 开源周刊第32期 —— Go 的插件化开发 Pingo

每周技术抢先看,总有你想要的! 移动开发 【博客】IOS 表视图(UITableView)使用详解 UITableView视图是IOS开发中常用而好用的一个控件。详情 前端开发 【软件】AngularJS 无限滚动指令 ngIn...

OSC编辑部 ⋅ 2015/05/03 ⋅ 1

Web开发中的矢量绘图(vml,svg)处理和应用

前言 1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 ...

kevin_pang ⋅ 2014/02/25 ⋅ 0

使用 PHP 快速生成 Flash 动画

Rich Internet Application 是 Web 2.0 中的新时髦词,并且就 Web 2.0 的实质而言,一个关键组件就是 Adobe Flash。了解如何将 Flash 动画集成到应用程序中,并使用 Ming 库动态生成 Flash ...

红薯 ⋅ 2009/12/18 ⋅ 4

【译】10个机器学习的JavaScript示例

Machine Learning.png 原文地址:10 Machine Learning Examples in JavaScript 在过去的每一年,用于机器学习(Machine Learning)的库在变得越来越快和易用。一直以来Python都是机器学习的首...

雪飞鸿 ⋅ 2017/12/03 ⋅ 0

OSC 第 45 期开源周刊:IBM 开源重重出击!

开源资讯 IBM 推出开源项目门户,将开源 50个项目 IFTTT 加入开源大家庭,已开源5个项目 2015 上半年 JavaScript 使用统计数据 新 FCC 可能禁止在 WiFi 路由器安装 OpenWRT IBM Cloudant 开源...

OSC编辑部 ⋅ 2015/07/31 ⋅ 4

没有更多内容

加载失败,请刷新页面

加载更多

下一页

如何优雅的编程——C语言界面的一点小建议

我们鼓励在编程时应有清晰的哲学思维,而不是给予硬性规则。我并不希望你们能认可所有的东西,因为它们只是观点,观点会随着时间的变化而变化。可是,如果不是直到现在把它们写在纸上,长久以...

柳猫 ⋅ 36分钟前 ⋅ 0

从零手写 IOC容器

概述 IOC (Inversion of Control) 控制反转。熟悉Spring的应该都知道。那么具体是怎么实现的呢?下面我们通过一个例子说明。 1. Component注解定义 package cn.com.qunar.annotation;impo...

轨迹_ ⋅ 36分钟前 ⋅ 0

系统健康检查利器-Spring Boot-Actuator

前言 实例由于出现故障、部署或自动缩放的情况,会进行持续启动、重新启动或停止操作。它可能导致它们暂时或永久不可用。为避免问题,您的负载均衡器应该从路由中跳过不健康的实例,因为它们...

harries ⋅ 38分钟前 ⋅ 0

手把手教你搭建vue-cli脚手架-详细步骤图文解析[vue入门]

写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是...

韦姣敏 ⋅ 48分钟前 ⋅ 0

12c rman中输入sql命令

12c之前版本,要在rman中执行sql语句,必须使用sql "alter system switch logfile"; 而在12c版本中,可以支持大量的sql语句了: 比如: C:\Users\zhengquan>rman target / 恢复管理器: Release 1...

tututu_jiang ⋅ 今天 ⋅ 0

Nginx的https配置记录以及http强制跳转到https的方法梳理

Nginx的https配置记录以及http强制跳转到https的方法梳理 一、Nginx安装(略) 安装的时候需要注意加上 --with-httpsslmodule,因为httpsslmodule不属于Nginx的基本模块。 Nginx安装方法: ...

Yomut ⋅ 今天 ⋅ 0

SpringCloud Feign 传递复杂参数对象需要注意的地方

1.传递复杂参数对象需要用Post,另外需要注意,Feign不支持使用GetMapping 和PostMapping @RequestMapping(value="user/save",method=RequestMethod.POST) 2.在传递的过程中,复杂对象使用...

@林文龙 ⋅ 今天 ⋅ 0

如何显示 word 左侧目录大纲

打开word说明文档,如下图,我们发现左侧根本就没有目录,给我们带来很大的阅读障碍 2 在word文档的头部菜单栏中,切换到”视图“选项卡 3 然后勾选“导航窗格”选项 4 我们会惊奇的发现左侧...

二营长意大利炮 ⋅ 今天 ⋅ 0

智能合约编程语言Solidity之线上开发工具

工具地址:https://ethereum.github.io/browser-solidity/ 实例实验: 1.创建hello.sol文件 2.调试输出结果

硅谷课堂 ⋅ 今天 ⋅ 0

ffmpeg 视频格式转换

转 Mp4 格式 #> ffmpeg -i input.avi -c:v libx264 output.mp4#> ffmpeg -i input.avi -c:v libx264 -strict -2 output.mp4#> ffmpeg -i input.avi -c:v libx264 -strict -2 -s 1......

Contac ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部