【总结】2017.02.06

2017.02.06

- 计划

• 月计划
• 剖析仿qqMusic小程序在音乐播放的控制

- 实际完成

• 小程序音频用audio组件的实现总结
• 剖析仿qqMusic小程序在音乐播放的控制
• 十三水代理后台的页面样式更改

- 总结

• qqMusic小程序音乐播放剖析，用音频控制的API实现。

- `animation: rotate 10s linear infinite;` 
    - [`animation`](http://www.w3school.com.cn/cssref/pr_animation.asp) 一定要用 `@keyframes` 定义的动画。
    - `animation-iteration-count: n|infinite; `动画次数无限,`infinite`为无限循环
- 旋转控制用 [animation-play-state](http://www.w3school.com.cn/cssref/pr_animation-play-state.asp) 属性控制运行/停止。
- 进度条用`position:absolute` + `transform: translateX(100%)`进行进度移动

.progress .time-bar .time-play {
    position:absolute;
    left:-16%;
    width:100%;
    height:100%;
    background:#31c27c;
    transition:all 1s linear;
}

    - 另：保留最后一帧[ animation-fill-mode](http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp)