果你想抓住你的网站访问者的注意力,还有什么能比动画更好呢?使用网络上免费提供的许多应用引擎,你可以很容易地让你的网站元素褪色、跳动或嗖嗖作响。在今天的文章中,我们将看到JavaScript动画库如何帮助实现这一切。
首先,介绍一下JavaScript的动画
添加只需要一个动作的简单动画(例如,切换)是一回事。对于这一点,你总是可以使用简单的CSS动画。但是,对于更复杂或高级的效果。 JavaScript是一个更好的工具。不言而喻,使用JavaScript来创建动画比使用CSS更具挑战性。
然而,JavaScript可以处理CSS所不能处理的事情。这给了开发者更多的权力来控制需要协调多个移动部件的复杂动画。
JavaScript动画是通过在一个元素的样式上添加渐变来实现的。你可以把它们作为你代码的一部分在线添加,或者把它们包含在其他对象中。在渲染时,这些变化由一个定时器调用。另外,你可以通过调整变化的时间间隔来控制动画的连续性。
让我们从Anime.js开始这个JavaScript动画库的列表。这个轻量级的动画库在GitHub上有35K多颗星。 通过一个强大的API工作,你可以用它来为HTML、CSS、JS、SVG和DOM属性制作动画。通过一个内置的交错系统,它可以使创建波纹、定向运动、跟随和重叠的效果显得很简单。这个系统在定时和属性上都是可用的。
使用内置的回调和控制函数,你可以做很多事情。例如,你可以同步播放、暂停、控制、逆转和触发事件。
Velocity.js结合了jQuery和CSS转换的优点。它的评分接近17K星,在 GitHub上有接近17K颗星,并拥有像WhatsApp和Motorola这样的杰出用户。 Mailchimp.循环、反转、延迟、隐藏/显示元素、属性数学(+、-、*、/)和硬件加速,都是其功能的一部分。
你可以使用Velocity.js来滚动 browser windows.它既可以与浏览器中加载的jQuery一起工作,也可以独立于它,甚至可以撤消之前的动画效果。
在接近 18K星,Popmotion是一个适用于任何JavaScript环境的功能性动画库。它几乎可以与任何接受数字输入的API一起工作,如 React,Three.js,A-Frame和PixiJS。
Popmotion的重量只有11.7kB,但却很有冲击力。它的特点是动画,如关键帧、衰减、用于同步多个实例的时间线等。你可以错开任何系列的动画或函数,也可以使用纯函数来组成你自己的配置。
Three.js以60K以上的星级在这个JavaScript动画库列表中排名第一。 它依靠的是 WebGL来创建和渲染浏览器中的3D动画。
有大量的文档可以帮助你,一旦你通过了学习曲线,使用这个库就没有什么不能完成的。首先,使用Three.js编辑器,你可以创建一个场景。此后,你可以添加几何图形,并调整灯光和摄像机。材料、纹理、物体、颜色和雾化都可以进行调整,最后的文件可以发布到你的项目中。
GreenSock的GSAP与一组小的JavaScript文件一起工作,使动画在所有主要的浏览器中看起来很好。它能顺利地将多个动画属性连接起来,并消除浏览器的错误。
GSAP的动作包括在Canvas上创建动画,以及为场景中的任何对象制作动画。还可以逐步揭示、变形或沿路径移动任何对象。为此,它与一堆软件应用一起工作,如SVGPlugins、PixiPlugin、WebGL、Adobe Animate和EaseJS。它的模块化结构有助于你选择你需要的功能。拥有800万用户和10K+颗星的 GitHub上有800万用户和10K多颗星,这个强大的库有很多优点。
6. AniJS
在这个列表中的JavaScript库中,AniJS有些独特。它允许你在一个简单的 "句子 "结构中为元素添加动画,这对刚接触动画的人来说是很好的。更重要的是,它的非特定性质使得几乎每个人都可以在日常的用户体验设计中使用它。
上 GitHub,AniJS的评分超过了3.5K星。它不依赖任何第三方库,通常有助于加快开发速度。它在安卓和iOS上都能很好地工作。 Android and iOS,也可以在所有流行的浏览器中使用。
7. Mo.js
运动图形在动画中起着很大的作用,Mo.js是一个可以让你产生影响的选择。由于有大量的教程和演示帮助,初学者可能不会发现创建几何形状和时间动画的难度。
这些API可能看起来很简单,但你可以用它们做很多事情。在这个工具包中,你会发现一个曲线编辑器和时间线编辑器来帮助你建立你的动画,以及一个播放器来控制你的动画。有不同的模块用于交错、缓和、时间线和更多。所有这些为Mo.js赢得了接近16K星的评价。
8. Vivus.js
如果你想在屏幕上实时地模仿钢笔画,你会用Vivus达到目的。它可以让你对SVG进行动画处理,给人以被绘制的感觉。由于它没有任何依赖性,所以它是快速和轻便的。
你可以选择任何一种可用的动画 - 延迟、同步或OneByOne。否则,你也可以创建一个自定义脚本来绘制你的SVG。为了提高灵活性,你可以用一个简单的JavaScript函数来覆盖每个路径的动画。超过1.3万名用户对这个库竖起了大拇指。
9. ScrollReveal JS
如果你希望在你的网页元素滚动进入视图时为它们制作动画,ScrollReveal不会让你失望。这个简单易学的动画库没有任何依赖性,在GitHub上有18.5K多颗星。
ScrollReveal支持不同类型的效果,在网络和移动浏览器上运行良好。它故意用一个裸露的配置来工作,所以你可以把它作为你的创造力的画布。为了使动画的效果最大化,创作者建议你少用它。
10. Typed.js
Typed.js是一个简单的库(更像是一个插件,真的),用于在你的屏幕上对打字进行动画处理。一旦你输入任何字符串,访问者就可以看到它以设定的速度被打出来。不仅如此,你还可以操作退格按钮,以及开始一个新的句子。如果你希望让禁用JS的访问者也能看到,你只需要在页面上放置一个HTML div。这样一来,机器人和搜索引擎也能查看输入的文字。
该库在GitHub的评分为9.5K+星,强大的用户包括Slack和Envato。
11. Lottie by AirBnB
Lottie是一种轻量级的动画图形格式,平衡了高质量的图形和渲染成本。它使应用程序更小,并包括动态功能。它可以用于网络、安卓、iOS和物联网,不需要额外的软件。
Lottie可以在任何支持JavaScript的浏览器上运行。动画是以纯文本形式存储的,是人类可读的。由于文本数据是以JSON格式存储的,它很容易被任何JavaScript环境同化。这使得它成为一种流行的动画图形格式,以增强移动前端。仅仅是安卓版本就有接近3万颗星。
生javascript实现带动画的提示型弹窗,常用于网站弹层的弹窗也有很多,一般用插件比较多,所以今天就来写一写该功能,如有错误之处请指出!
弹出跟消失都有放大缩小动画在里面!
实现方法:
html:
可以自己输入内容,再点击弹出即可看到弹窗效果
css:
javascript:
上个周写了一篇大屏开发经验总结,引来了不少朋友围观,还未浏览的朋友可以直接跳转:juejin.cn/post/736541…
很多前端在开发大屏的时候,一般都会涉及很多动画效果开发,但我发现大部分前端动画开发能力薄弱。
今天,我给大家介绍一下我常用到的一些比较好用的动画开发库,基本上能够满足99.9%的业务开发需求,让产品经理和UI小姐姐看完后给你狂竖大拇指,记得收藏点赞噢~
做前端动画,我强推这个框架,真的很好用!
GSAP(GreenSock Animation Platform)是一个用于创建高性能、跨浏览器的动画的JavaScript库。它提供了许多强大而灵活的API,允许开发者创建各种复杂的动画效果。
使用起来非常简单,我们实现一个动画,将.box这个元素在x轴方向向右移动200px,耗时2秒
gsap.to(".box", {
x: 200,
duration: 2
});
当然,这只是gsap功能的冰山一角,它还有很多可以让我们高效工作的能力:
GSAP的一个关键特点是它对性能的优化,它使用优化的算法和浏览器的请求动画帧(requestAnimationFrame)API来实现流畅的动画效果。
此外,GSAP的API设计得非常人性化,易于学习和使用,同时它还提供了大量的文档和示例来帮助开发者快速上手。
gsap官方地址:gsap.com
Lottie 是一个由爱彼迎(Airbnb)开发的开源动画库,主要用法就是UI设计通过专业动画软件(如After Effects)设计好之后,输出json文件,然后通过 Lottie 将这些动画无缝地集成到移动app和网页中。
lottie.loadAnimation({
container: element, // the dom element that will contain the animation
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json' // the path to the animation json
});
Lottie优势:
Lottie 的使用场景非常广泛,从简单的加载指示器到复杂的交互式动画,都可以用 Lottie 来实现。
Lottie官方地址:airbnb.io/lottie/#/we…
React Spring:react开发者的福音,这款框架是基于React的动画库,它使用基于物理的动画,可以创建非常自然和流畅的动画效果。
初始化一个简单的动画,让div从左向右移动:
import { useSpring, animated } from '@react-spring/web'
export default function MyComponent() {
const springs=useSpring({
from: { x: 0 },
to: { x: 100 },
})
return (
<animated.div
style={{
width: 80,
height: 80,
background: '#ff6d6d',
borderRadius: 8,
...springs,
}}
/>
)
}
React Spring官方地址:www.react-spring.dev/docs/gettin…
Anime.js:一个轻量级的JavaScript动画库,它使用CSS属性和SVG,可以创建平滑的CSS和SVG动画
初始化一个简单的动画:
anime({
targets: '.css-prop-demo .el',
left: '240px',
backgroundColor: '#FFF',
borderRadius: ['0%', '50%'],
easing: 'easeInOutQuad'
});
说实话,看api,有点类似于gsap动画库,也不知道它倆是怎么个关系~
Anime.js官方地址:animejs.com/documentati…
还有很多其他的动画库,但是作者本人还没用过,如果有用过的小伙伴也可以在评论区发表一下使用体验或者看法。
目前笔者用的比较多的是gsap和lottie,特别是在threejs项目中,用gsap做动画再合适不过,而lottie大部分时间我是用来展示一些复杂的无交互的动画开发。
作者:攻城师不浪
链接:https://juejin.cn/post/7367696432935419944
*请认真填写需求信息,我们会在24小时内与您取得联系。