Ola JavaScript 实时数据插入平滑动画库

Ola 是一个简单的 JavaScript 库，实时插入/插入（inbetweening/interpolating）数字的平滑动画库。

// Start tracking the valueconst pos = Ola({ y: 0 });// Set the value to update asyncpos.set({ y: 100 });// Read the evolution over timesetInterval(() => graph(pos.y), 5);

支持多值和多维度

const pos = Ola({ x: 0, y: 0 });window.addEventListener('click', e => {pos.set({ x: e.pageX, y: e.pageY });});setInterval(() => {ball.style.left = `${pos.x}px`;ball.style.top = `${pos.y}px`;}, 10);

支持很多独立的实例

// Generates 1000 instances seamlesslyconst dots = Ola(Array(1000).fill(0));// Everything updates every 600mssetInterval(() => dots.forEach((dot, i) => {dots[i] = Math.random();}), 600);// ... read + paint screen here

快速开始

使用 npm 安装

npm install ola

导入并使用

import Ola from "ola";const pos = Ola({ x: 0 });console.log(pos.x); // 0

可通过 CDN 方式使用

<script src="https://cdn.jsdelivr.net/npm/ola"></script><script type="text/javascript">  const pos = Ola({ x: 0 });  console.log(pos.x); // 0</script>