animate-viewport

描述

随鼠标移动而移动的组件编辑器，你可以在组件中添加图片，视频，gif图片等元素，鼠标移动的时候可以组件中的元素实现动画效果，例如移动，旋转，大小变化。你可以参考b站首页的banner效果。

特性

1. 支持图片，视频，svg，gif图片的添加。
2. 动画效果支持移动，大小变化，旋转。
3. 支持元素层级变化。
4. 动画有三种状态，不移动时，鼠标移动到最左端和鼠标移动到最右端。
5. 支持预览。
6. 支持生成组件代码。
7. 支持react

如何使用

1. 如何添加元素：直接拖动文件进入画布。
2. 当需要添加动画时，关闭元素的keep it fixed开关，定制最左，默认，最右的状态，中间动画会自动生成。
3. 需要改变图片层级时，右边的overview用鼠标拖动元素即可移动层级，越上方层级越低。
4. 需要改变组件大小时，点击resize viewport即可。

安装

1. npm install animate-viewport
2. 开启编辑器编辑后使用右上角的生成代码即可。