我们都遇到过如何跟开发讲清楚动效设计的问题。最近在优化云音乐Android平台的动效，Material Design风格下的动效变得更为丰富而有层次，为了更清楚地向开发传达设计细节，我希望将做好的动效在Axure文档里表现为视频而非gif的形式，开发可以在看的过程中随时暂停/播放/来回拖动进度，以便更清楚地观察动效在每个阶段的状态。
在Axure导入动效视频，最简单的做法是使用软件自带的Inline Frame控件，具体操作如下：
1. 将Inline Frame控件拖到工作区
2. 将其属性设置为“video”，控件会变为如下形态，拖动控件四角可改变视频显示区域的大小
3. 将动效视频上传至第三方视频网站，比如优酷。双击控件，在输入框中填写视频的url。
这样在生成的交互文档里，可以查看来自第三方网站的视频，视频嵌套的是该网站的播放控制器。
但是将视频上传到第三方网站毕竟有点麻烦，而且还避免不了来自第三方的广告。
重点来了，如果不想逼疯开发大哥们，教大家一种导入本地视频的方法，具体操作如下：
5. 使用记事本创建一个html文件，比如命名为“gridToPage.html”。贴如下代码：
<html>
<head>
<style>html,body,div,video{margin:0;padding:0;}</style>
</head>
<body>
<video loop width="360" height="640" controls autoplay>
//loop控制是否循环播放，width和height为视频的尺寸，controls控制是否使用播放控制条，autoplay控制是否自动播放
<source alt="在Axure文档中导入动效视频" src="此处写视频的标题.mov">
</video>
</body>
</html>
若视频标题为中文，则在保存时需将编码改为UTF-8。
6. 将视频文件、“gridToPage.html”和Axure生成的html文件放在同一个文件夹下
7. 在Inline Frame的链接属性中，关联刚才创建的html文件而非视频文件，因为“gridToPage.html”已经放在同一个文件夹下，所以直接填写文件名即可。
这样在生成的交互文档上，可以控制视频播放了。鼠标在视频上悬浮时会出现如下播放控制条。
云音乐交互设计组
