https://github.com/easonzero/animate
一个基于js的动画库，支持补间动画和奇奇怪怪的几个动画
https://github.com/easonzero/animate
Last synced: 3 months ago
JSON representation
一个基于js的动画库，支持补间动画和奇奇怪怪的几个动画
- Host: GitHub
- URL: https://github.com/easonzero/animate
- Owner: Easonzero
- Created: 2016-09-26T15:31:37.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-09-26T15:59:08.000Z (over 9 years ago)
- Last Synced: 2025-03-18T04:47:32.256Z (10 months ago)
- Language: JavaScript
- Size: 3.91 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Animate
一个基于js的动画库，支持补间动画和奇奇怪怪的几个动画
假期实习的时候使用pixi绘制了一个地图，当时闲的无聊就为这个地图写了几个开场动画，为元素写了一个补间动画库。写的时候为了方便随时去除动画（怕老板发现炒了我），所以进行了一定的封装，讲道理使用的话开场动画只需要3个步骤
1. 设置动画类型
2. 将场景里所有元素绑定到动画库
3. 在主渲染循环启动动画库
补间动画部分使用的话更简单，就把需要进行动画的元素的初始值、目标值、运动函数类型和渲染函数放入补间动画接口里就ok
具体怎么用我就不说了，反正直接跑肯定是跑不起来的（逃，主要是因为当时项目的框架是angular，渲染使用的pixi，所以多少还是对这俩框架有点依赖的，直接跑的话肯定报错～
### 补间动画
* 补间动画支持n种运动的线性曲线。
* 支持拐点功能，使用者可以通过设置拐点来进行折线运动。
* 可补间的属性仅限二维坐标和旋转值（讲道理应该是使用者自己设置补间属性的，其实也很容易，就是维护一个json而已，但是我懒！）
* 绘制函数由外部提供，数据与绘制的关系由使用者控制，所以补间动画对控制元素的影响是可控的。
### 奇奇怪怪的动画
1.放缩平移动画：只是每个元素按照不同的速度平移到目标位置，同时场景整体进行放缩。
2.翻转动画：一个使用2d绘图框架，绘制的3d翻转动画。