10个最好的JavaScript动画库【值得收藏】

更新日期: 2021-11-18阅读: 1.5k标签: 动画

1. Tween.js

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

2. Snap.svg

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

3. Bounce.js

  • 可以直接在浏览器中进行设计和设置的动画库,带有一个完整的网页构建器,只需添加一个组件,选择预设,然后你就可以得到 CSS 代码了。
  • 和其他的同类工具不同的地方在于,它不仅仅是一个库,而是有着用户可以直接操作的实际功能,它带有一个完整的网页构建器。
  • Bounce.js 是为数不多的可以直接在浏览器中进行设计和设置的动画库之一。

4. Move.js

  • Move.js 是一个小的 JavaScript 库,用于以非常简单和优雅的方式支持 CSS3 动画。
  • 一个简单的工具,帮你创建缩放、倾斜、移动等常规的动效。

5. Anime.js

  • 支持 CSS,DOM,SVG,和 JS 对象
  • 点击 Documentation,查看 animejs 的动效组件说明文档;点击 Codepen,进入 anime 的动效库,查看可编辑的动效演示和示例。
  • 将动画加持在 LOGO、按钮、图像等各种各样的元素上。它支持各种常见的触发机制,比如点击、悬停、滑动,你可以借助它定义一系列的动画。
  • 缺少自定义特效。
  • 作为 Three JS 的潜在替代方案。

6. Mo.js

  • 非常的庞大,而且它是完全为 UI/UX 设计而生的动效库。
  • Mo.JS 是模块化的,你可以轻松移除不必要的功能,确保体量合理和流畅运行。

7. Matter.js

  • 吊炸天了,接近现实生活中的物理运动、碰撞、惯性动画库。

8. parallax.js

  • 这个效果也很常见,类似于视觉差效果。
  • 官网看起来很不错。

9. Dynamics.js

  • 一个 JS 库,能为你提供 9 种标准的动效。
  • 你可以制定其中的持续时间、频率、预期尺寸和强度等数据,创造出符合物理效果的动效。

10. Single Element CSS Spinners

  • 一组非常漂亮的可用于加载中状态的 CSS3 动效。


链接: https://fly63.com/article/detial/10821

纯CSS3实现各种表情动画

CSS3非常强大,我们可以利用CSS3相关特性绘制很多平面图形,并且可以制作很多简单的动画。今天要分享的是一款用纯CSS3实现的可爱表情动画

Vue.js动画笔记_vue实现动画效果

Vue.js中的元素动画或页面跳转动画有多种实现方式比如:1、自己手动写CSS3动画来实现2、使用第三方CSS动画库如:Animate.css3、在构子函数中操作DOM4、使用第三方Js动画库如:Velocity.js。

新手引导动画的4种实现方式

尽量多的列举出新手引导动画的实现方式, 昨天稍微总结了一下, 实现了4种.源码在最后,如果想直接看结果的,可以拉到最后去看.这里假设所有的弹出层都是基于页面上原有的元素

为何 Canvas 内元素动画总是在颤抖?

在项目中我们可能对动画进行锁帧,帧率可能是 60 或者 30,如果我们想保证渲染不抖动,在匀速直线运动中,我们尽量保证我们设置的速度要是帧率的倍数,或者保证平均每帧移动的像素点是一样的

前端开发常用css动画代码

常用的CSS动画效果,在实际开发中经常需要用到移动、大小、闪烁、渐显、渐隐等动画效果,这篇文章就整理了些常见的动画效果分享给大家,一遍收藏使用。

css环形滚动_内容加载的环形滚动动画效果

创建一个没有背景的圆,然后声明透明度为0.1的黑色边框(看起来是灰色),修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画,并让该动画无限播放(infinite)即可

css transition 实现滑入滑出

transition是css最简单的动画。 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!!但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? transition可以做到。

动画函数的绘制及自定义动画函数

制作动画效果离不开动画运动函数,而我们用得最多的无疑就是Tween.js。根据不同的数学公式原理,Tween.js划分出了不同的动画类型,每种动画类型里面都包含以下的缓动类型:ease in 先慢后快、ease out 先块后慢、ease in out 先慢后快再慢

超酷的CSS3 loading预加载动画特效

这是一款超酷CSS3 loading预加载动画特效。该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成。HTML结构:4种loading预加载动画的HTML结构分别如下

Vue 动画的封装

js提供的钩子动画before-enter、enter、after-enter,用这种方法写,所有的动画都写在了组件里,外部只需要调用这个fade组件就可以了,也不需要全局去写一些样式了,这种动画的封装是比较推荐的一种动画封装,因为它可以把所有动画的实现完整的封装在一个组件中

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!