lax.js超轻量级JS动画库
简介
lax.js是一个超轻量级（ 压缩时小于4kb）的vanilla JS 库，当向下和向上滚动时，它为元素提供了20多个很棒的动画。
（下载的附件中附有DEMO）
Lax.js 2.0 已推出，它完全重新编写，注重模块化和灵活性，为您提供了更多的工具来创建最棒的动画效果。
——新的javascript动画语法，允许更高级的效果组合
——使用任何值来驱动动画，例如鼠标位置、一天中的时间等等，当然还有滚动！
——滚动时可以赋予动画惯性
——创建自定义CSS绑定
——创建动画更轻松
使用
1. 引入
npm 或 yarn 安装和引入
# https://www.npmjs.com/package/lax.js
npm install lax.js
yarn add lax.js
import lax from 'lax.js'html 引入
<script src="path-to-lax.min.js"></script>
<!-- 或者使用CDN -->
<script src="https://cdn.jsdelivr.net/npm/lax.js" ></script>2. HTML
<div class="section">hello,lax.js</div>3. 基本用法
NPM设置要实现lax，您需要至少创建一个驱动程序，为动画以及元素动画绑定提供值。下面是一个简单的例子：
<!-- JS -->
<script>
window.onload = function () {
lax.init()
// 添加用于控制动画的驱动程序
lax.addDriver('scrollY', function () {
return window.scrollY
})
// 将添加的动画绑定到元素上
lax.addElements('.section', {
scrollY: {
translateX: [
["elInY", "elCenterY", "elOutY"],
[0, 'screenWidth/2', 'screenWidth'],
]
}
})
}
</script>最简单的入门方法是通过html类使用预设。例如：
<div class="lax lax_preset_fadeIn:50:100 lax_preset_spin"></div>使用 data_lax_preset 属性将一个或多个动画应用于元素。所有可能的动画包括：
fadeIn //淡入
fadeOut //淡出
fadeInOut //淡入淡出
scaleIn //缩放入
scaleOut //缩放出
scaleInOut //缩放入出
slideX //横向滑动
slideY //纵向滑动
jiggle //抖动
seesaw //跷跷板
zigzag //z形运动
hueRotate //色调旋转
spin //快速旋转
flipX //横向翻转
flipY //纵向翻转
blurIn //模糊进
blurOur //模糊出
blurInOut //模糊进出用法示例
<div class="lax lax_preset_fadeIn-50:100 lax_preset_spin">
Laxxx Example
</div>4. 在前端框架中使用lax.js
为了提高性能，lax.js对加载页面时要设置动画的元素列表进行索引。如果你使用的是React、Vue或EmberJS等前端框架，很可能是在初始 window.onload 之后添加元素。因此，当你向要设置动画的DOM添加组件时，你需要调用 lax.addElements 添加，当组件卸载时，需要调用 lax.removeElements 来销毁。👉 [ React ] 示例。
5. 为其他方式驱动动画添加驱动程序
如果使用其他的值来驱动动画，那么需要为这个驱动动画的值设置一个驱动程序，只需调用 lax.addDriver ，它有一个名称和一个返回数字的函数。该方法在每帧调用一次以计算动画，因此使该方法在计算上尽可能轻。下面的例子将是lax最常见的用例，它返回窗口的 scrollY 位置。
lax.addDriver(
'scrollY', // 驱动名称
function(laxFrame) {
return window.scrollY // Value method
},
{
inertiaEnabled: false
frameStep: 1
} // 配置项
)驱动配置项
inertiaEnabled: boolean = false
如果为true，驱动将计算其值变化的速度。用于向使用惯性配置的元素添加运动惯性。
👉 [ 示例 ]
frameStep: number = 1
默认情况下，每个驱动程序在每个动画帧更新其值，大约每秒更新60次。您可以使用 frameStep 来降低驱动程序值更新的频率。例如，值为2时每秒只更新约30次，值为60时每秒只会更新约一次。
6. 使用 addElements 方法添加动画元素
您可以使用 addElements 方法将lax动画轻松添加到元素中：
lax.addElements(
'.section', // 元素选择器
{ // 动画数据
scrollY: {
opacity: [
[0, 100],
[1, 0]
]
}
},
{
style: {} // 元素样式配置项
}
)元素样式配置项
style: StyleObject
为每个元素添加静态CSS，例如：
{
transform: '200ms scale ease-in-out';
}elements: Array<DOM nodes>
传递对原始DOM元素的引用，以实现更灵活的选择模式。在这种情况下，唯一的选择器仍然必须作为第一个参数传递，但它不需要是有效的DOM选择器。这允许库标记元素，以便以后删除。示例：
const myDomElements = $('.section')
{
elements: myDomElements
}onUpdate: (driverValues: Object, domElement: DomElement) => void
一个方法调用了具有当前driverValues和domElement的每个帧。这可以用于切换元素上的类或设置innerHTML。
👉 [ 示例 ]
驱动程序值的格式如下：
{
scrollY: [ // 驱动名称
100, // 驱动值
0 // 驱动惯性
]
}进阶
1. 自定义动画
使用一个对象来定义自定义动画：
// 动画数据
{
scrollY: { // 驱动名称
translateX: [ // CSS 属性
['elInY', 'elOutY'], // 驱动值 map
[0, 'screenWidth'], // 动画值 map
{
inertia: 10 // 配置项
}
],
opacity: [
// etc
]
}
}驱动程序名称 Driver name
要用作映射到动画的源值的驱动程序的名称，例如文档的scrollY位置。添加驱动程序的方法请查看上文 👆 。
CSS属性
要设置动画的CSS属性的名称，例如不透明度或旋转。下面是这些属性的列表。
不透明度 opacity
规划X scaleX
比例Y scaleY
规划 scale
倾斜X skewX
倾斜Y skewY
倾斜 skew
旋转X rotateX
旋转Y rotateY
旋转 rotate
翻转X translateX
翻转Y translateY
翻转Z translateZ
含糊 blur
色彩旋转 hue-rotate
亮度 brightness一些CSS属性，例如box shadow，需要一个自定义函数来构建样式字符串。要执行此操作，请使用 cssFn 元素选项。
值映射 Value maps
值映射是用于按照驱动值之间的差值比例（线性）来输出CSS属性的值。例如：
[0, 200, 800] // Driver value map 驱动值映射
[0, 10, 20] // Animation value map 动画值映射
// Result
| In | Out |
| --- | --- |
| 0 | 0 |
| 100 | 5 |
| 200 | 10 |
| 500 | 15 |
| 800 | 20 |在映射中，可以将字符串用于简单公式，也可以使用特殊值。例如：
['elInY', 'elCenterY-200', 'elCenterY',特殊值
screenWidth 屏幕当时的宽度
screenHeight 屏幕当时的高度
pageWidth 文档的宽度
pageHeight 文档的高度
elWidth 元素的宽度
elHeight 元素的高度
elInY 当元素出现在屏幕底部时的窗口 scrollY 方位
elOutY 当元素消失在屏幕顶部时的窗口 scrollY 方位
elCenterY 当元素垂直居中于屏幕时的窗口 scrollY 方位
elInX 当元素出现在屏幕右侧时的窗口 scrollX 方位
elOutX 当元素消失在屏幕左侧时的窗口 scrollX 方位
elCenterX 当元素水平居中于屏幕时的窗口 scrollX 方位
index 运用 lax.addElements 增加元素时的元素索引您还可以在驱动程序值映射和动画映射中使用移动断点，以获得更大的灵活性。
scrollY: {
translateX: [
['elInY', 'elCenterY', 'elOutY'],
{
500: [10, 20, 50], // Screen width < 500
900: [30, 40, 60], // Screen width > 500 and < 900
1400: [30, 40, 60], // Screen width > 900
},
];
}配置项
modValue: number | undefined
将此选项设置为对驱动程序的值进行模数运算，例如，如果希望在驱动程序值继续增加时循环动画值。
frameStep: number = 1
默认情况下，每个动画在每个动画帧更新其值，大约每秒更新60次。可以使用frameStep来降低动画更新的频率。例如，值为2时每秒只更新约30次，值为60时每秒只会更新约一次。
inertia: number
用于为动画添加惯性。与 inertiaEnabled 驱动程序选项结合使用。
👉 [ 示例 ]
cssUnit: string = " "
定义要附加到值末尾的单位，例如px deg。
cssFn: (value: number, domElement: DomElement) => number | string
某些CSS属性需要更复杂的字符串作为值。例如，长方体阴影具有多个值，这些值可以通过 lax 动画进行修改。
// Box-shadow example
(val) => {
return `${val}px ${val}px ${val}px rgba(0,0,0,0.5)`;
};easing: string
可以使用值的列表：
easeInQuad 开端时动画缓慢，然后逐步加快。
easeOutQuad 开端时动画快速，然后逐步减速。
easeInOutQuad 开端时动画缓慢，然后加快，再减速完毕。
easeInCubic 开端时动画缓慢，然后逐步加快。
easeOutCubic 开端时动画快速，然后逐步减速。
easeInOutCubic 开端时动画缓慢，然后加快，再减速完毕。
easeInQuart 开端时动画缓慢，然后逐步加快。
easeOutQuart 开端时动画快速，然后逐步减速
easeInOutQuart 开端时动画缓慢，然后加快，再减速完毕。
easeInQuint 开端时动画缓慢，然后逐步加快。
easeOutQuint 开端时动画快速，然后逐步减速。
easeInOutQuint 开端时动画缓慢，然后加快，再减速完毕。
easeOutBounce 动画完毕时会反弹回来，类似于绷簧的作用。
easeInBounce 开端时动画缓慢，然后快速反弹，再逐步减速到终点。
easeOutBack 动画完毕时会超越终点一些间隔，然后返回终点。
easeInBack 开端时动画缓慢，然后超越起点一些间隔，然后返回起点。2. 优化性能
💡 Lax.js 具有良好都性能表现，但在创建网站时，有一些事情还需要牢记。
较小的元素性能更好。
Postion固定元素和绝对元素的性能最好，因为它们在更新时不会触发布局更改。
屏幕外元素不需要更新，因此在创建动画值贴图时请考虑这一点。
css属性模糊、色调旋转和亮度都是图形密集型的，运行起来不如其他可用属性流畅。
相关链接
GitHub 地址： https://github.com/alexfoxy/lax.js
npm 地址 ： https://www.npmjs.com/package/lax.js
文档 ： https://www.tkcnn.com/github/alexfoxy/lax.js.html
易助科技网效果演示地址1 ： http://demo.easyzone.net.cn/plugin/lax/index.html
易助科技网效果演示地址 2 ： http://demo.easyzone.net.cn/plugin/lax/preset-explorer.html