什么是 motio？
motio 是一个 JavaScript 库，用于实现 Web 上元素的动画效果。使用 motio 可以使页面元素产生各种动态效果，比如淡入淡出、滑动、旋转等。motio 的最大特点是轻量级和易用性，同时支持多种浏览器。
安装 motio
motio 是在 NPM 上发布的包，所以安装起来非常简单。在终端或命令行界面上输入以下命令：
npm install motio这样就可以下载并安装 motio 包了。
motio 基本使用
在 HTML 文件中引入 motio.js，然后在 JavaScript 中使用 motio() 函数即可创建动画效果。
-- -------------------- ---- ------- --------- ----- ----- ------------- ------ ----- ---------------- ------------ ------------ ------- -------------------------------- ------- ------ ---- ------------------ ------------ -------- --- ----- - ---------------------------------- ------------ - -- ------ --- - -- ---- -- --- -- --------- ---- --- --------- ------- -------展开代码
上述代码会使 my-div 元素在 1 秒内向右移动 100px，向下移动 200px。
motio 参数详解
motio() 函数接收两个参数：要进行动画的 DOM 元素和一个包含动画参数的对象。
动画参数
以下是可用的动画参数：
to：目标状态，可以使用 CSS 格式的样式属性。from：起始状态，也可以使用 CSS 格式的样式属性。如果不设置，则默认为元素当前状态。duration：动画时间，单位为毫秒（ms）。easing：缓动函数，可以是字符串或自定义函数。callback：动画完成后执行的回调函数。onStop：动画停止时执行的回调函数。
缓动函数
缓动函数是一个用于控制动画速度变化的函数。motio 内置了一些常见的缓动函数，也可以自定义缓动函数。
以下是内置的缓动函数：
linear：线性变化，匀速运动。easeIn：加速变化，开始慢后来越快。easeOut：减速变化，开始快后来越慢。easeInOut：先加速后减速变化，中间最快。
示例代码
以下是一个示例代码，演示如何使用 motio 来实现一个淡入淡出的效果：
-- -------------------- ---- ------- --------- ----- ----- ------------- ------ ----- ---------------- ------------ ------------ ------- -------------------------------- ------- ------- - --------- --------- ---- ---- ----- ---- ------ ------ ------- ------ ----------------- ----- -------- -- - -------- ------- ------ ---- ------------------ ------------ -------- --- ----- - ---------------------------------- ------------ - ----- - -------- - -- --- - -------- - -- --------- ----- ------- ----------- --- --------- ------- -------展开代码
上述代码会使 my-div 元素在 1 秒内淡入到不透明。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35851
