Popmotion轻量级动画（一）

导言

Popmotion是一款轻量级动画库，它在2017年火得一塌糊涂,so,开始我们的popmotion之旅吧，具体动画体验可以去官网demo，这里主要讲述popmotion方法和原理

Actions and reactions<行为操作和反应>

新手教程里面说到的tween方法，是作为一个action返回的

Popmotion是一个响应式的组件库，并且action是一个创建流的函数，这些action输出到一个reactions

在Popmotion中每个动画和输入都是一个action,在此博客中，我们将用实例讲解什么是action和reactions

Import

import { action } from ‘popmotion’;

创建一个action

action函数接受一个参数。它是一个初始化函数，每次通过它的start方法启动返回的操作时都会执行它。

这意味着我们可以定义一个操作，并多次启动它，从而导致该操作的多个实例。

初始化函数是由三个函数组成的对象：update,complete,error

action(({ update, complete, error }) => {})

让我们来定义一个叫做just的函数。它将返回一个操作，在启动时，该操作将用提供的值触发更新，然后完成：

const just = (v) => action(({ update, complete }) => {
  update(v);
  complete();
});

现在，当刚开始返回的操作开始时，它将发出提供的值

just(1).start(console.log);

console.log方法被当做了reactions，每当新操作实例用新值调用UPDATE时，它都会触发。

我们还定义了只在完成后才能启动。我们可以提供一个更新和完成函数的对象，而不是一个函数，作为我们的反应reactions

just(1).start({
  update: console.log,
  complete: () => console.log('complete!')
});

开始运行时，重新运行初始化函数，并返回活动的action新实例