翻转艺术
等级：中级
许多开发人员发现，在应用程序中添加动画是一种有效的技术，可以增强用户界面，使其更具吸引力，并解释复杂的主题内容。但是，作为开发者，您如何创建这些动画？您如何知道哪些图像制作有效的动画？
翻转艺术的目的是通过提供一种简单的方法来收集和安排一组图像，形成一个动画序列，可以重新播放和调整以达到所需的冲击力和效果。
要求与约束
开发人员不应依赖动画或图形库来实现此应用程序。相反，尝试使用纯Javascript、CSS和HTML。
用户故事
- [ ] 用户可以在应用程序窗口中看到以下主要组件：
- 包含用于定制动画过程的元素的配置面板。
- 操作按钮
- 动画显示面板
配置面板
- [ ] 用户可以看到八个缩略图，其中包含单独的动画帧
- [ ] 用户可以在每个缩略图的下方看到一个按钮 - '+'
- [ ] 用户可以通过点击 '+' 按钮向空的缩略图添加新图像
- [ ] 当点击 '+' 按钮时，用户可以看到一个文件打开对话框，以允许将
.jpg图像加载到缩略图中。 - [ ] 当缩略图加载后，用户可以看到 '+' 按钮标签更改为 '-'
- [ ] 用户可以点击 '-' 按钮删除或替换缩略图。
- [ ] 用户可以看到 '过渡速度' 滑块控件。
- [ ] 用户可以调整 '过渡速度' 滑块的从慢到快的滑块，以调整动画显示中缩略图之间的过渡时间。
操作按钮
- [ ] 用户可以看到两个按钮 - '清除配置' 和 '开始动画'
- [ ] 用户可以看到 '开始动画' 按钮在至少通过配置面板添加了一个缩略图之前是禁用的。
- [ ] 用户可以点击 '清除配置' 按钮从配置面板中清除所有缩略图。
- [ ] 用户可以点击 '开始动画' 按钮开始动画显示面板
- [ ] 当动画开始后，用户可以看到 '开始动画' 按钮标签更改为 '停止动画'。
- [ ] 用户可以点击 '停止动画' 按钮暂停动画显示中的动画
- [ ] 当动画停止后，用户可以看到 '停止动画' 按钮标签更改为 '开始动画'
动画显示面板
- [ ] 当点击 '开始动画' 按钮时，用户可以在配置面板中看到的缩略图被显示出来。
- [ ] 用户可以看到缩略图以 '过渡速度' 滑块定义的速率从一个过渡到下一个。
额外功能
- [ ] 当缩略图在动画显示面板中显示时，配置面板中该缩略图的边框会高亮显示。
- [ ] 用户可以动态添加任意数量的缩略图，而不仅仅是八种。
- [ ] 用户可以在配置面板中听到与修改缩略图相关的独特声音。
- [ ] 用户可以在配置面板中看到一个转换类型下拉菜单，以定义动画显示中缩略图之间的转换效果 - 缓动，缓入，缓出，缓入缓出
- [ ] 用户可以拖放缩略图以重新排序它们
- [ ] 用户可以将动画保存为
.gif文件。