推荐 11 个好用的 JS 动画库小白攻略_库教程视频

1.Three.js超过46K的星星,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用 WebGL。这个库提供了、 、CSS3D 和 WebGL渲染器,让咱们在设备和浏览器之间创建丰富的交互体验。该库于2010年4月首次推出,目前仍有近1000名贡献者在开发中。2. Anime.js超过20K的星星,Anime 是一个

推荐 11 个好用的 JS 动画小白攻略

1.Three.js

超过46K的星星,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用 WebGL。这个库提供了<canvas>、 <svg>、CSS3D 和 WebGL渲染器,让咱们在设备和浏览器之间创建丰富的交互体验。该库于2010年4月首次推出,目前仍有近1000名贡献者在开发中。

推荐 11 个好用的 JS 动画库小白攻略_库教程视频

2. Anime.js

超过20K的星星,Anime 是一个 JS 动画库,可以处理CSS属性,单个CSS转换,SVG 或任 何 DOM 属性以及 JS 对象。 此库允许咱们链接多个动画属性,将多个实例同步,创建时间轴等。

3.Mo.js

超过 14K 星星,是一个用于 Web 的动态图形工具带,具有简单的声明 API,跨设备兼容性和超过1500个单元测试。 咱们可以在 DOME 或SVG DOME周围移动东西或创建唯一的 mo.js 对象。虽然文档有些稀缺,但是示例很丰富,这里有CSS技巧的介绍。

4. Velocity

超过 15k 星星,Velocity是一个快速的 JS 动画引擎,拥有与jQuery的 $.animate() 相同的API。它具有彩色动画、转换、循环、画架、SVG支持和滚动。这里是Velocity的高性能引擎的分解,这里是使用该库的 SVG 动画的介绍。

5. Popmotion

超过 14K 星星,这个动画库大小只有 11 kb。它允许开发人员从动作创建动画和交互,这些动作是可以启动和停止,可以使用 CSS、SVG、React、three 创建,js 和任何接受数字作为输入的 API。

6. Vivus

超过 10k 星星,Vivus是一个零依赖的 JS 类,可以让你为SVG制作动画,让它们具有被绘制的外观。 咱们可以使用许多可用动画之一,或创建自定义脚本来绘制SVG。 查看Vivus-instant获取实际示例,亲自动动手练习一下。

7. GreenSock JS

GSAP 是一个JS 库,用于创建高性能、零依赖、跨浏览器动画,据称在超过400万个网站上使用。GSAP是灵活的,可以与 React、Vue、Angular 和 vanilla JS 协同工作。GSDevtools 还可以帮助使用 GSAP 构建 dubug 动画。

8. Scroll Reveal

拥有15K颗星星和零依赖,这个库为 web 和移动浏览器提供了简单的滚动动画,以动画的方式显示滚动中的内容。它支持多种简洁的效果类型,甚至允许你使用自然语言定义动画。这里有一个简短的 SitePoint教程。

9. Hover (CSS)

超过 20k 星星,Hover 提供了CSS3支持的悬停效果集合,可应用于链接、按钮、徽标、SVG、特色图像等,在CSS、Sass和LESS中可用。您=可以复制和粘贴希望在自己的样式表中使用的效果,或者引用样式。

10. Kute.js

一个完全成熟的原生 JS 动画引擎,具有跨浏览器动画的基本功能。 重点是代码质量,灵活性,性能和大小(核心引擎17k 和 gzipped 5.5k) – 这是一个演示。 该库也是可扩展的,因此你可以添加自己的功能。

11. Typed.js

超过 7k 星星,这个库基允许你以选定的速度为字符串创建打字动画。 你还可以在页面上放置 HTML div 并从中读取以允许搜索引擎和禁用 JS 的用户访问,由Slack和其他人使用,这个库既流行又非常有用。

海计划公众号
(0)
上一篇 2020/03/22 20:50
下一篇 2020/03/22 20:50

您可能感兴趣的内容

  • 前端常用的CSS动画库小白教程_库指南攻略

    前端常用的CSS动画库小白教程 动效设计一直都是最近几年前端开发的热门趋势之一。动画是Web和UI设计的主要内容。一个完全静止的网站,即使是使用了微妙的悬停状态,也可能感觉不一样。…

    2020/03/20
  • 做好这几件事,代码质量可以提升一个档次入门百科_质量菜鸟知识

    这篇文章又是关于代码质量的,有些同学可能觉得我比较啰嗦。不过我就是想用这种方式让大家重视起来。其实说来说去就那么几种方法,但是实际执行起来真是难于登天。低质量的代码真的是一种灾难。当你的代码变得越来越混乱,维护起来就会花费大量的时间。在最坏的情况下,代码将变得不可维护,并且项目会慢慢终止。为了避免这种情况,你需要注意你的代码质量。尝试在代码质量上花费一些时间

    2020/03/23
  • webpack命令打包时报错TypeError: Cannot read property presetToOptions of undefined的解决办法入门基础_报错基础知识教程

    我只安装了webpack,没有安装webpack-cli,第一次输入webpack打包时,提示One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:- webpack-cli (https://github.co

    2020/03/23
  • 你不一定知道的head标签入门基础教程_标签小白基础

    先来梳理一下本文的目录结构 现在我将详解head标签和它六个子标签的属性和作用,请耐心看完,会有很大的收获哦!一、 head标签可选属性:属性值描述profileURL一个由空格分隔的 URL 列表,这些 URL 包含着有关页面的元数据信息。说明:·文档的头部经常会包含一些 meta 标签,用来告诉浏览器关于文档的附加信息。在将来,创作者可能会利用预先定义好

    2020/03/29
  • component小白帮助_前端包管理器和模块化Web应用程序的构建工具

    component小白帮助 官方网址:https://github.com/componentjs/guide GitHub:https://github.com/componen…

    2020/03/10
  • 自学WEB前端的详细路线菜鸟教程下载_前端指南教程

    学习web前端编程技术肯定是以就业拿到高薪工作为主要目的的,可是高薪不会那么轻易拿到,这是一个最简单的道理。没有付出就没有回报,在整个学习web前端编程技术的过程中,你需要付出时间、精力、金钱。废话不多说直接上干货。在开始学习之前你需要做到以下5点:第一:需要达到什么样的技术水平才能就业?既然是为了就业,你就要知道学习web前端编程技术需要达到什么样的技术水

    2020/03/23
  • js函数基础知识_函数基础入门

    在JavaScript中,函数其实就是对象。使函数不同于其他对象的决定性特点是函数存在一个被称为[[Call]]的内部属性。内部属性无法通过代码访问而是定义了代码执行时的行为。ECMAScript为JavaScript的对象定义了多种内部属性,这些内部属性都用双重中括号来标注。​[[Call]]属性是函数独有的,表明该对象可以被执行。由于仅函数又有该属性,E

    2020/03/29
  • 使用 Array.fill( ) 填充对象的问题小白帮助_Array小白帮助

    当你想使用 Array.fill( ) 来填充一个全是空白对象的数组时需要特别注意。Array(length).fill({ }) 这样填充创建的数组,里面每一项{ }都完全相同let arr = Array(6).fill({});
    console.log(arr[1] === arr[2]) //true//哪怕是使用 new Object() 来

    2020/03/24
  • location.hash属性#入门百科window.location.hash 使用_Hash基础指南

    URL中hash 属性目前所有主要浏览器都支持 hash 属性。hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。比如:http://www.fly63.com/index.html#print就代表网页index.html的print的位置。浏览器读取这个URL后,会自动将print位置滚动至可视区域。为网页位置指

    2020/04/03
  • 函数化编程攻略教程_编程零基础入门

    百科定义:函数化编程: 又称泛函数编程,是一种编程泛式,它将电脑运算视为数学上的函数计算,并且避免使用程序状态以及易变对象。简单理解,以函数为单元,对复杂逻辑进行拆分,将复杂逻辑转化为多个简单函数逻辑,同时通过对函数进行层层调用,来达到最终目的。特点: 函数可以作为参数传入,也可以作为返回值返回。1. 纯函数 && 非纯函数定义: 输入一个x产生输出一个唯一

    2020/03/24
  • 11 个优秀的 Python 编译器和解释器使用说明_Python教程视频

    Python 是一门对初学者友好的编程语言,是一种多用途的、解释性的和面向对象的高级语言。它拥有非常小的程序集,非常易于学习、阅读和维护。其解释器可在Windows、Linux 和 Mac OS 等多种操作系统上使用。它的可移植性和可伸缩性等特性使得它更加容易被运用。Python 库可用于以下用途:Web 开发数据科学机器学习多媒体软件开发像 Django

    2020/03/21
  • 微助点指南教程_免费在线公众号编辑器

    微助点指南教程 官方网址:http://www.videaba.com/ 简介描述:免费在线公众号编辑器 「微助点编辑器」是一家老牌的公众号编辑器工具,帮助公众号运营者轻松的撰写公…

    2020/03/11
  • 如何解决在vue中this报错undefined入门教程_undefined零基础入门

    当你开心地在编程,惊叹于vue的神奇,这时你却遇到这样的情况:你的vue应用无法正常工作,你收到的报错是:this is undefined产生问题的原因是你混合使用了普通函数和箭头函数。我猜你肯定用了一个箭头函数。如果你把这个箭头函数替换成普通函数,也许能解决上面你遇到的问题。接下来让我们深入原理来了解为什么会产生这个问题。毕竟,知识是强大的,如果你知道了

    2020/04/03
  • Flutter 与 iOS 原生 WebView 对比入门基础_Flutter使用帮助

    原文作者:享物说原文地址: https://juejin.im/post/5c778d86e51d4506304ee348本文对比的是 UIWebView、WKWebView、flutter_webview_plugin(在 iOS 中使用的是 WKWebView)的加载速度,内存使用情况。测试手机:iPhoneX系统:iOS12.0加载速度对比测试网页打开

    2020/03/29
  • 一种对开发更友好的前端骨架屏自动生成方案入门攻略_骨架屏小白知识

    一份来自 Akamai 的研究报告显示,在对 1048 名网购户进行采访后发现:约 47% 的用户期望他们的页面在两秒之内加载完成。如果页面加载时间超过 3s,约 40% 的用户会选择离开或关闭页面。一直以来,为了提升用户在页面加载时的体验,无论是 Web 还是 iOS、Android 的应用中,前端开发工程师都做了许多工作。除了解决如何让网页展现速度更快的

    2020/03/24
  • css-blocks教程视频_一款CSS 解决方案,实现组件的样式隔离

    css-blocks入门教程 官方网址:http://css-blocks.com/ GitHub:https://github.com/linkedin/css-blocks 简…

    2020/03/06