@ntbl/animation

animation

animation，一个基于 anime.js 的动画库，更加便捷与实用。

在线 Dome

Installation

npm i @ntbl/animation --save

Usage

import animation from '@ntbl/animation'

animation 是对 anime.js 的二次包装，内置了一些便捷实用的动画类型、并支持动画联动、正反播放切换和隐藏 dom。关于 animation 的基础使用，请参考 anime.js

本文档，只会涉及到 animation 自己封装和设计的概念与功能。它用起来狠是简单。

动画类型

animation 提供了以下动画类型：

• sideLeft
• sideRight
• sideTop
• sideBottom
• fadeIn
• fadeOut

通过 type 属性指定需要使用的动画即可。

animation({
    targets: '#box',
    type: 'sideLeft'
  })

另外，不同类型的动画还可以配合使用。（不同类型指的是 sideTop 和 fadeIn 是不同类型的，而 sideTop 和 sideLeft 是同类型）

animation({
    targets: '#box',
    type: ['sideLeft', 'fadeIn']
  })

动画控制

anime.js 实例的 seek() 方法，可用于精确控制动画进行，比如配合手势库，可以实现原生应用上抽屉导航与手指在同步屏幕上移动。参考

动画联动

anime.js 可以使用 timeline 实现时间轴动画，在此基础上 animation 简化和统一了用法，增加了联动。联动顾名思义就是同时进行二个或多个动画，并且可以配合动画控制，做出和原生应用一致的动画体验。

默认情况下，timeline 是按照动画先后顺序执行（即所谓时间轴动画），在 animation 中，通过设置 linkage=true 即可开启联动。

animation({
    // 开启联动
    linkage: true,
    // 在时间线上指定每个元素的动画
    timeline: [
      { targets: '#box1', type: 'sideLeft'},
      { targets: '#box2', type: 'sideTop'},
      { targets: '#box3', type: 'sideBottom'},
      { targets: '#box4', type: 'sideRight'},
    ],
  })

动画状态切换和 dom 移除

类似 vue.js 的 transition 组件，通过 v-show 可以轻松使用动画的正向反向状态的切换，并且在动画 enter 时和 leave 后移除和显式（调整 css 的 display 值） dom 元素。animation 也为你提供了类似的方法 toggle() 。

const ani = animation({
    // 开启 dom 的移除和显式
    dom: true,
    type: 'sideLeft'
})
  
// 将会正向反向互相进行动画  
ani.toggle()