# tween-animate-library

**Repository Path**: duans/tween-animate-library

## Basic Information

- **Project Name**: tween-animate-library
- **Description**: tween.js动画函数库的使用演示
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-24
- **Last Updated**: 2023-06-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# tween.js 动画库

## 下载安装

```jsx
npm install @tweenjs/tween.js
```

## 导入

```jsx
// 导入
import * as TWEEN from '@tweenjs/tween.js'
```

## 使用

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js"></script>

<div id="box"></div>

<style>
	#box {
		background-color: deeppink;
		width: 100px;
		height: 100px;
	}
</style>

<script>
     // Get the element we want to animate: 获取响应用动画的元素
	const box = document.getElementById('box')
    // Start at (0, 0): 动画起始位置
	const coords = {x: 0, y: 0}
    // Create a new tween that modifies 'coords': 创建一个实例
	const tween = new TWEEN.Tween(coords, false)
		.to({x: 300, y: 200}, 1000) // Move to (300, 200) in 1 second: 设置终点位置
		.easing(TWEEN.Easing.Quadratic.InOut) // Use an easing function to make the animation smooth: 设置动画时间函数
		.onUpdate(() => {
			// Called after tween.js updates 'coords': 当动画中的位置发生变化的时候会执行此段代码
			// Move 'box' to the position described by 'coords' with a CSS translation: 在此处更新元素的位置信息
			box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)')
		})
		.start() // Start the tween immediately: 立即执行

	// Setup the animation loop.
	function animate(time) {
        // 每个16ms执行一次动画的更新方法, 触发onUpdate回调函数执行
		tween.update(time)
        // 启用requestAnimationFrame
		requestAnimationFrame(animate)
	}
    
	requestAnimationFrame(animate)
</script>

```
## 参考文档
- [tween.js参考文档](https://www.npmjs.com/package/@tweenjs/tween.js)
- [github仓库](https://github.com/tweenjs/tween.js/blob/HEAD/docs/user_guide.md)