📌  相关文章
📜  动画反应原生 npm - Javascript (1)

📅  最后修改于: 2023-12-03 15:22:47.184000             🧑  作者: Mango

动画反应原生 npm - Javascript

简介

动画反应原生 (Native Animation) 是一个基于原生动画 API 的简洁、灵活、易用的 JavaScript 动画库，可以帮助开发者轻松地让动画效果更加流畅自然。

演示 & 特点
  • 动画反应原生 npm 基于原生 API 实现，执行效率更高。
  • 简洁明了的 API，只需几行代码就可以实现各种动态效果。
  • 完全支持异步和 chainable 编程方式。
  • 支持设备方向和屏幕切换（如转屏）等常见场景。

下面是一个简单的演示，当鼠标移到一个元素上时，该元素会从透明度为 0 到透明度为 1 的过渡效果：

import { Anim } from 'n-animation';

let anim = new Anim(element, { opacity: [0, 1] }, { duration: 300 });
element.addEventListener('mouseover', () => anim.start());
安装

你可以通过 npm 进行安装：

npm install n-animation --save

或通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/n-animation/dist/bundle.js"></script>
快速上手
基本用法

在浏览器中，你可以使用 nAnimation() 方法创建一个新的动画对象：

import { nAnimation } from 'n-animation';

const el = document.querySelector('#element');
const anim = nAnimation(el, { opacity: [0, 1] }, { duration: 400 });
anim.start();

以上代码创建了一个新的动画对象，并让该动画在 400 毫秒内逐渐从透明度为 0 到透明度为 1。

Chaining

你可以串连多个动画方法来实现更加复杂的动画效果：

import { nAnimation } from 'n-animation';

const el = document.querySelector('#element');
nAnimation(el, { opacity: 0 })
    .fadeOut(2000)
    .stretch('x', 1.2)
    .fadeOut(1000)
    .stretch('y', 1.2)
    .fadeOut(1000)
    .stretch('xy', 1)
    .fadeIn(2000);

以上代码依次执行了以下步骤：

  1. 初始设定元素的透明度为 0。
  2. 在 2 秒的时间内，逐渐淡出元素。
  3. 在 x 轴方向上，使元素的大小增加到原来的 1.2 倍，逐渐淡出元素。
  4. 在 y 轴方向上，使元素的大小增加到原来的 1.2 倍，逐渐淡出元素。
  5. 在 x 和 y 轴方向上，使元素的大小还原到原来的大小，逐渐淡入元素。
高级用法

你也可以使用 nAnimator() 方法创建更加复杂的动画，支持事件回调、自行计算动画进度等。

import { nAnimator } from 'n-animation';

let anim = nAnimator({
    duration: 2000,
    easing: 'outElastic',
    onStart: () => console.log('动画开始'),
    onUpdate: progress => console.log(`当前动画进度：${progress}`),
    onEnd: () => console.log('动画结束')
});

anim.animate(
    { x: [0, 200], y: [0, 100] },
    ({ x, y }) => element.style.transform = `translate(${x}px, ${y}px)`
);

以上代码利用 nAnimator() 方法创建了一个动画对象，包含如下属性：

  • duration 属性定义动画的持续时间，以毫秒为单位。
  • easing 属性定义该动画的缓动函数，可支持 CSS3 标准的缓动函数。
  • onStart 属性定义动画开始时的回调函数。
  • onUpdate 属性定义动画进度更新时的回调函数。
  • onEnd 属性定义动画结束时的回调函数。

然后通过 animate() 方法传递动画信息和动画逐帧更新时的回调函数，实现自定义动画效果。

API 文档

以下是本库提供的主要类和方法。

nAnimator(config)

nAnimator() 类是 n-animation 的高级动画类，可以自行计算动画进度和更新动画进度。

  • config (Object) 属性和相应的类型如下：

    | 名称 | 类型 | 默认值 | 说明 | | -------------- | ---------------- | -------------- | -------------------------- | | duration | number | 1000 | 动画持续时间（毫秒） | | easing | string | (t:number) => number | "easeOutQuad" | 缓动函数 | | onStart | () => void | null | 动画开始时的回调函数 | | onEnd | () => void | null | 动画结束时的回调函数 | | onUpdate | (progress:number) => void | null | 动画更新时的回调函数 |

Anim(element, properties, options)

Anim() 类是 n-animation 的主要动画类，可以方便地创建新的动画。

  • element (HTMLElement) 显示动画的目标元素。

  • properties (Object[]) 动画的属性和值（起始值和结束值）。

  • options (Object) 动画的可选项，如动画持续时间等。

    | 名称 | 类型 | 默认值 | 说明 | | --------------- | -------- | ------ | ------------------------------- | | duration | number | 300 | 动画持续时间（毫秒） | | easing | string | "linear" | 缓动函数 | | fill | string | "auto" | CSS 的 animation-fill-mode | | direction | string | "normal" | CSS 的 animation-direction | | delay | number | 0 | 延迟时间（毫秒） | | endDelay | number | 0 | 结束延迟时间（毫秒） | | iteration | number | 1 | 循环迭代次数，Infinity 表示无限循环 | | playState | string | "running" | CSS 的 animation-play-state| | property | string | "all" | CSS 的 animation-property | | timingFunction| string | "linear" | CSS 的 animation-timing-function|

nAnimation(element, properties, options)

nAnimation() 是一个全局方法，方便地创建单次动画。与 Anim() 不同，nAnimation() 会返回一个 Promise 对象，对于动画执行错误，可以通过 Promise.reject() 返回错误信息。

  • element (HTMLElement) 显示动画的目标元素。

  • properties (Object[]) 动画的属性和值（起始值和结束值）。

  • options (Object) 动画的可选项，如动画持续时间等。

    | 名称 | 类型 | 默认值 | 说明 | | ----------------- | -------- | ------ | ------ | | duration | number | 300 | 动画持续时间（毫秒）| | easing | string | "linear" | 缓动函数| | fill | string | "auto" | CSS 的 animation-fill-mode | | direction | string | "normal" | CSS 的 animation-direction | | delay | number | 0 | 延迟时间（毫秒）| | endDelay | number | 0 | 结束延迟时间（毫秒）| | iteration | number | 1 | 循环迭代次数，Infinity 表示无限循环 | | playState | string | "running" | CSS 的 animation-play-state| | property | string | "all" | CSS 的 animation-property | | timingFunction | string | "linear" | CSS 的 animation-timing-function|

在 Promise 任务返回成功时, 返回动画对象的实例 anim ，并且可以通过 return anim 方式重复利用它们, 从而实现多次利用或者后续操作函数等。

let anim = await nAnimation(element, { opacity: 0 }, { duration: 2000 });
anim.fadeIn(1000);
简单动画效果

以下是常见动画效果的实现方式：

淡入（fadeIn）和淡出（fadeOut）

import { nAnimator } from 'n-animation';

let el = document.getElementById('element');
let anim1 = nAnimator({ duration: 2000 });
let anim2 = nAnimator({ duration: 2000 });

anim1.animate({ opacity: [0, 1] }, ({opacity}) => el.style.opacity = opacity);
anim2.animate({ opacity: [1, 0] }, ({opacity}) => el.style.opacity = opacity);

el.addEventListener('click', () => {
    anim1.start();
    anim2.start();
});

以上代码使用了两个 Animator 对象，一个用于淡入动画，另一个用于淡出动画。当用户单击目标元素时，会同时播放这两个动画效果。

主体类名称标记动画 （name）

name 属性指定 CSS 规则集的名称，内容可以包括 @keyframes 规则集信息，可以参考 CSS3 的规范，具体见 MDN 文档，将关键帧规则集命名传递给动画对象时，可以使用该对象的 name 属性，将其指定为属性值。

import { Anim } from 'n-animation';

let el = document.getElementById('element');
let anim = new Anim(element, { opacity: [0, 1] }, { duration: 2000, name: 'fadeIn' });
anim.onEnd(() => el.classList.remove('fadeIn'));

el.classList.add('fadeIn');
anim.start();

以上代码通过添加和删除名称类 fadeIn 来实现该动画效果。

缓动函数

下面是动画库支持的缓动函数列表：

  • ease
  • easeIn
  • easeOut
  • easeInOut
  • linear
  • elasticIn
  • elasticOut
  • elasticInOut
  • bounceIn
  • bounceOut
  • bounceInOut
  • backIn
  • backOut
  • backInOut

可以在 Animator 构造函数和 Anim 类的 options 参数中使用这些缓动函数，如：

import { nAnimation } from 'n-animation';

nAnimation(element, { translateX: ['0px', '100px'] }, { duration: 1000, easing: 'bounceInOut'});
Looping（循环）

通过配置 iteration 为 Infinity 可以把动画变成一个无限循环：

import { nAnimation } from 'n-animation';

nAnimation(element, { translateY: ['0px', '100px'] }, { duration: 1000, iteration: Infinity});
完整Animate API

Animate API 共支持四个方法：

动画开始：start()

执行动画的方法 start()：

let anim = new Anim(element, {x: '-100px'});
anim.start();

动画结束：stop()

使用 stop() 可以自动停止动画并清理样式：

let anim = new Anim(element, {
  opacity: {from: 0, to: 1},
  width: '100px'
}, {
  duration: 2000
});

setTimeout(() => anim.stop(), 500);

手动取消动画

使用 cancel() 可以取消动画并清理样式：

let anim = new Anim(element, {x: '-100px'});
anim.start();
setTimeout(() => anim.cancel(), 500);

更改动画的时间暂停时间和次数

用 change() 可以更改已经存在的动画的时间/暂停时间/次数，以创建优雅的淡出、延迟等效果。

let anim = new Anim(element, {x: '-100px'});
anim.start();
setTimeout(() => {
  anim.change({x: '-20px'}, 1000, 500, 2);
}, 500);
License

本代码库不受版权保护，您可以自由传播，复制和修改。要了解更多详情，请参阅 LICENSE 文件。