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

MIT
JavaScript
跨平台
2019-05-19
红薯

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>
的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

打造正能量的品牌 GoPro与多个公益组织合作

做为运动相机中的知名品牌,GoPro 帮人们捕捉了太多值得记录和分享的瞬间,但 GoPro 不满于此,它们想要做更多。基于公益的初衷,GoPro 创始人兼 CEO Nick Woodman 在最近的 TechCrunch Dis...

2018/12/20 16:42
1
0
小白的入门课ionic2.0入门

# 学习目标: 开发一个跨平台的App 重点:学习12个组件的用法 #ionic介绍 # ionic的发展、概念、可以开发的应用平台 发展 2013年1.0 2016年4月25 2.0 Beat6 ionic是一个比较成熟的,也是发展...

2016/11/18 22:07
24
0
苹果开辟印度路口导航功能外加用户叫车

根据外媒报导,苹果近日悄悄地更新了于印度地区的地图服务,加入路口(Turn-by-turn)导航功能,苹果地图服务在印度已经推出多年,但是过去一直少了这项关键的功能,该路口导航功能会提供开车...

01/14 16:23
0
0
*planchas ghd baratas

fe? Sr. Bloom levantó dos dedos dudoso a sus labios. Sus ojos dijeron. -- No aquí. Don' t lo considera. leapyear una vez en cuatro. Cobró un cheque para mí una vez. ?* ghd ...

2012/06/19 17:38
19
0
Icaros Desktop 1.3.2 发布

Icaros Desktop 1.3.2 现在可用!Icaros Desktop 是基本 AROS 发行版之一,现可立即使用在你的桌面之上——没有昂贵的 PowerPC 硬件要求(AmigaOS 和 MorphOS 就有要求)。我们把它跑起来! ...

2011/10/18 10:39
42
0
众说区块链:浅谈数字货币交易所

上期《众说区块链》讨论的主题是“区块链应用场景之Token”,近来区块链中的公链发币火热,但区块链还能赋能给哪些已有的业务,王文刚老师结合自身的发展,和大家一起探讨了我们耳熟能详的游...

2018/08/08 00:18
45
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部