最近师兄做毕业设计，有需要完善页面展示，也踩了不少坑，到底还是自己没啥做动画的经验，记下来。
前言
师兄的动画使用Animate cc做的，直接将flash转化成网页。长动画极其巨大，整个页面15m大小左右。demo在这里！
而且需要我帮忙做的是，响应式横屏，进度条，优化bgm，调整细节。
响应式横屏
要求是手机强制横屏，当然，这个暂时似乎是没有api的，直接提示又很蠢。而关于横屏css只有一个检测的。
// portrait：
// 指定输出设备中的页面可见区域高度大于或等于宽度
// landscape：
// 除portrait值情况外，都是landscape
@media screen and (orientation:portrait){ … }
所以办法是，父元素div整体旋转！
#parent {
width: 100vh;
height: 100vw;
left: calc((100vw - 100vh) / 2);
transform-origin: 50% 50%;
transform: rotate(90deg);
}
这么做的确是可以达到目的，而且完美响应式适配所有界面。但是，动画的点击事件并没有正常触发，点击的按钮换成了竖屏等比例的地方，大概是这样的（红色圈子为原来应该点击的位置，蓝色是实际上点击的位置）。
仔细看animate生成的js代码中，是有自动适配的函数的，不过不能响应式旋屏达到需求。自己观察可以发现，animate动画是基于create.js实现的。
其中有个专门的类stage，利用stage坐标在canvas范围里挂载图像和对应事件的，而旋转父元素并没有旋转stage坐标系，我的理解，他应该是直接获取当前界面的坐标，而不是跟随canvas旋转，他只是监听canvas的空间。
因此我们应该做的就是父元素直接等于界面大小，使stage旋转。
// 部分代码实现
if (window.innerWidth < window.innerHeight) {
// 旋转后整个界面是空白的，因为镜头在坐标regX，rexY（0，0）上
// 因此需要整个坐标上移
stage.rotation = 90;
stage.regY = lib.properties.width;
}
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
sRatio = Math.min(xRatio, yRatio);
// 自带按比例适配函数，注意旋转后画布的宽高应该等于界面的高宽
if (window.innerWidth < window.innerHeight) {
canvas.width = h*pRatio*sRatio;
canvas.height = w*pRatio*sRatio;
canvas.style.height = dom_overlay_container.style.width = w*sRatio+'px';
canvas.style.width = dom_overlay_container.style.height = h*sRatio+'px';
}
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
进度条
这个没什么说的，就是看他loader类的属性，计算出百分比，动态绑定显示或者画图就行了
优化bgm
这个本来没什么说的，软件也生成了自带的audio属性写好了，preload，loop，autoplay.
文件加载完再play？ok，关闭自动播放，监听loader的complete事件，写入play事件.
问题出现是因为一个测试的同学说，她的iphone5听不到声音。这下问题就出现了。
于是，我调整了一下，audio.oncanplay= audio.play这样写比较科学毕竟加载完成会播放。
但实际上这是不合理的，因为15m左右的图片加载时间，音乐早就加载完了，而加载完的音乐很显然不会在响应新添加的canplay事件。
解决方案也很简单呢，把preload关了，在完成文件后写load()再监听，pc端实现完全ojbk，但iphone还是没有音乐，所以不是加载代码的问题。
查了一下才知道iphone不能自动播放，audio.play和autoplay都没用
对于不能自动播放时触发的事件因系统版本不同而不同
iPhone5 iOS 7.0.6 loadstart
iPhone6s iOS 9.1 loadstart -> loadedmetadata -> loadeddata -> canplay
简单意思是之后的版本，iphone上，你就必须要交互一下才能播放了。
ok，我们为canvas加个click（或者touchstart，touch，whatever..）事件，点一下就播放。
然而这样写的话，每点一次都会重新播放一次，因此需要加个paused判定状态，当然你还可以用readystate判定资源加载情况（不能监听canplay等事件，加载完了不会再响应的，记住！）。
调整细节
移动端注意加meta获取界面大小否则无法识别（这也太基础了吧，好吧刚开始我就忘了，animate自动生成的网页也不会给你加这个meta...）
还有关闭touch高亮否则...;
* {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
还有就是当你用响应式定位的时候，部分参数也可以用vw或者vh帮助定位和改变大小，效果还可以。
// 因为要对齐的元素是依据viewwidth的，所以也跟着用vw了。
#_preload_per_ {
font-size: 4vw;
text-align: center;
left: 8vw;
top: 10vw;
}
最后15m的巨大软件级别页面，用户体验当然是靠带宽和CDN啦，掏腰包吧～
欢迎来点评找bug～