Moto.js —— 为动画而生-CSDN博客

一、什么是 Moto.js

在介绍Moto.js前，先说一下Popmotion。日常开发中Popmotion用起来可以说是很舒服了，直到有一天来了一个需求，大概要实现下面这样的效果：

最初打算接入物理引擎，这样效果逼真又省事。这就意味着，结果不可控。

最后，只能通过固定路径去实现了。路径点很容易确定，但是如何让小球沿着路径点平滑移动呢?

研究一下发现，Catmull Rom是个不错的选择。

Moto.js的雏形就此形成，封装了Catmull Rom，Bezier，Cubic Bezier同时支持tween，chain，composite。与Popmotion保持相同的调用方式。

二、如何使用

哎哟，不错的样子。怎么用呢？

安装

NPM 方式：

npm i @tuia/moto.js
复制代码

script 引入：

<script src="//unpkg.com/@tuia/moto.js/dist/moto.min.js"></script>
复制代码

开发

import {tween} from '@tuia/moto.js'

tween({
  from: 0,
  to: 100,
  duration: 1 // 单位: s
}).start(v => console.log(v))
复制代码

用过Popmotion的同学一定会觉得：咦~~，这和Popmotion有什么区别？就是duration的单位从ms变成了s。

曲线

当然不能只简单复制Popmotion的功能，毕竟初衷是简化开发过程中绘制曲线重复的工作量。所以上面的功能，只能算是额外的附赠品。

import {curve} from '@tuia/moto.js'

curve.catmullRom({
  points: [
    {x: 50, y: 50},
    {x: 100, y: 150},
    {x: 200, y: 100},
    {x: 300, y: 50},
    {x: 350, y: 150}
  ]
}).start(v => {
  // todo
})
复制代码

对，上面的代码稍加修饰一下，就是下面的样子。

三、总结

Moto.js一个支持曲线运动的动画库。持续开发中，欢迎各位添砖加瓦。

github