Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/xg4/motion

:cyclone: Motion
https://github.com/xg4/motion

animation motion

Last synced: about 1 month ago
JSON representation

:cyclone: Motion

Host: GitHub
URL: https://github.com/xg4/motion
Owner: xg4
License: mit
Created: 2018-12-17T12:21:40.000Z (almost 6 years ago)
Default Branch: master
Last Pushed: 2023-01-03T23:22:34.000Z (almost 2 years ago)
Last Synced: 2024-09-30T08:22:41.075Z (about 2 months ago)
Topics: animation, motion
Language: TypeScript
Homepage: https://xg4.github.io/motion/
Size: 3.02 MB
Stars: 2
Watchers: 2
Forks: 0
Open Issues: 30
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # Motion

[![Build Status](https://www.travis-ci.com/xg4/motion.svg?branch=master)](https://www.travis-ci.com/xg4/motion)

[![codecov](https://img.shields.io/codecov/c/github/xg4/motion.svg)](https://codecov.io/gh/xg4/motion)

[![npm](https://img.shields.io/npm/v/@xg4/motion.svg)](https://www.npmjs.com/package/@xg4/motion)

[![npm](https://img.shields.io/npm/l/@xg4/motion.svg)](https://www.npmjs.com/package/@xg4/motion)

## Installation

### Install with npm or Yarn

```bash

# npm

$ npm install @xg4/motion --save

```

```bash

# yarn

$ yarn add @xg4/motion

```

## Usage

```js

import { move, easeInOutCubic } from '@xg4/motion'

function handler(value) {

  // value (0~100)

  console.log(value)

}

move(handler, {

  start: 0,

  end: 100,

  duration: 3000,

  ease: easeInOutCubic

})

```

### Move Options

| name     | type     | default        | description |

| -------- | -------- | -------------- | ----------- |

| start    | number   | 0              | 起始值      |

| end      | number   | 0              | 结束值      |

| duration | number   | 450            | 持续时间    |

| ease     | function | easeInOutCubic | 缓动函数    |

| count    | number   | 1              | 运动次数    |

| loop     | boolean  | false          | 循环运动    |

### ease function

| name    | in            | out            | in-out           |

| ------- | ------------- | -------------- | ---------------- |

| back    | easeInBack    | easeOutBack    | easeInOutBack    |

| bounce  | easeInBounce  | easeOutBounce  | easeInOutBounce  |

| circ    | easeInCirc    | easeOutCirc    | easeInOutCirc    |

| cubic   | easeInCubic   | easeOutCubic   | easeInOutCubic   |

| elastic | easeInElastic | easeOutElastic | easeInOutElastic |

| expo    | easeInExpo    | easeOutExpo    | easeInOutExpo    |

| quad    | easeInQuad    | easeOutQuad    | easeInOutQuad    |

| quart   | easeInQuart   | easeOutQuart   | easeInOutQuart   |

| quint   | easeInQuint   | easeOutQuint   | easeInOutQuint   |

| sine    | easeInSine    | easeOutSine    | easeInOutSine    |

## Contributing

Welcome

- Fork it

- Submit pull request

## LICENSE

MIT