# yun-animation

Latest version **1.1.0** (published 2022-08-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install yun-animation
pnpm add yun-animation
yarn add yun-animation
bun add yun-animation
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-08-01 |
| First published | 2022-05-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 6.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | yipeidong |
| Maintainers | yipeidong |
| Keywords | animation, yun |

## Links

- npm: https://www.npmjs.com/package/yun-animation
- Repository: https://github.com/yun-desktop/yun-animation
- npm.io page: https://npm.io/package/yun-animation

## Dependencies (1)

- [csstype](https://npm.io/package/csstype.md) ^3.1.0

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2022-08-01
- 1.0.5 — 2022-08-01
- 1.0.4 — 2022-08-01
- 1.0.3 — 2022-07-31
- 1.0.2 — 2022-05-12
- 1.0.1 — 2022-05-12
- 0.0.2 — 2022-05-12

## README

# yun-animation

<p align="center">
  <a href="https://img.badgesize.io/https:/unpkg.com/yun-animation@0.0.2/packages/main.js?label=gzip%20size%3A%20JS&compression=gzip">
  	<img src="https://img.badgesize.io/https:/unpkg.com/yun-animation@0.0.2/packages/main.js?label=gzip%20size%3A%20JS&compression=gzip"/>
  </a>
  <a href="https://github.com/yun-desktop/yun-animation/blob/main/LICENSE">
    <img src="https://img.shields.io/badge/License-MIT-yellow.svg">
  </a>
</p>

>  A animation kit.

Provide only one method to apply animation to element.(only 0.89KB)

只提供一个函数来构建动画。（只有0.89KB）

## Install

```shell
npm install yun-animation -S
```

## Usage

It's easy to use.

很简单的就能使用。

```javascript
import defineAnimation from 'yun-animation';

var element1 = document.querySelector('#box1');
var element2 = document.querySelector('#box2');

/** define animation
 *	定义一个动画
 */
var animation = defineAnimation({
	left: '320px',
	transform: 'translate3d( -50%, -30%, 100px)',
  /** color: '#333'
  	Error: Color transformation is not supported！ 
  	错误：不支持颜色转换！*/
})

/** apply animation to element.(The element will stay at the end of the frame)
	* 将动画作用在元素上。（元素会停在最后1帧）
	*/
animation.to(element1)

/** animation complete callback.
  * 动画结束回调。
  */
animation.to(element2)
  .end(() => {
    // also use other animation.
    // 当然也可以使用其它动画续接。
    defineAnimation({left: '10px'}).to(element2)
	})

/** duration time.(default 2s)
  * 动画持续时间。(默认2秒)
  */
defineAnimation({top: '130px'}, 2).to(element2)
```

## Links🔗关联链接

> yun-desktop-ui
>
> https://www.npmjs.com/package/yun-animation
>
> A Component Library for Vue.js.（Developing...）
>
> 一个Vue组件库，专门用于构建云端桌面。(开发中...)

>yun-desktop（development....）
>
>https://bndiya.com/desktop#/login
>
>A desktop system By cloud.(Developing...)
>
>一个云端桌面形同。(开发中...)

---
_Source: https://npm.io/package/yun-animation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._