OlaJavaScript 实时数据插入平滑动画库
Ola 是一个简单的 JavaScript 库,实时插入/插入(inbetweening / interpolating )数字的平滑动画库。
// Start tracking the value const pos = Ola({ y: 0 }); // Set the value to update async pos.set({ y: 100 }); // Read the evolution over time setInterval(() => 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 seamlessly const dots = Ola(Array(1000).fill(0)); // Everything updates every 600ms setInterval(() => 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>
评论
Velocity.js 动画效果库JavaScript动画库
Velocity.js可用于加速JavaScript的动画效果。类似jQuery的$.animate()方法,但无需依赖jQuery。速度非常快,而且提供一些很酷的动画效果,支持SVG和滚动。示例代码
Velocity.js 动画效果库JavaScript动画库
0
Velocity.js 动画效果库JavaScript动画库
Velocity.js 可用于加速 JavaScript 的动画效果。类似 jQuery 的 $.a
Velocity.js 动画效果库JavaScript动画库
0
Cquence.jsJavaScript 动画库
Cquence是一个非常小的JavaScript动画库,用于banner和广告的展示。最基本的使用方法:var render = null; // Define the render object s
Cquence.jsJavaScript 动画库
0
AsciiMorphascii 动画库
AsciiMorph是一个可在两个ascii图像之间动画过渡的库。演示使用用dom元素渲染ascii<!-- Pre elements are perfect for this. -->&
AsciiMorphascii 动画库
0
NineOldAndroidsAndroid 动画库
NineOldAndroids是一个可以让你在Android1.0以上版本使用Honeycomb动画API的Android库。
NineOldAndroidsAndroid 动画库
0