# 响应式开发

利用视口单位适配布局

• 搭配vw和rem

# 滑屏动效开发

• swiper
• awesome-javascript
• 手势动作的插件 或zepto的touch模块
• hammer版本滑屏
• 无依赖实现翻屏

# 动效

• animate.css
• 3D
  • 翻书
  • 立体书翻书
  • 立体书翻书
  • css硬件加速好坏
  • 补间动画
    • 单个圆 - 苹果彩蛋
    • AE 动画导出为 Web 动画的插件或开源库
    • AE 动画导出为 Web 动画的插件或开源库
    • 京东海外招聘H5
  • 逐帧动画
    • CSS3 阶梯函数 steps(number_of_steps, direction)
      • 年货到家
    • canvas 将动画帧绘制到 Canvas 上，通过不断地重绘即可实现逐帧动画。CreateJS、Pixi.js 等库都提供了成熟的方案。
    • 逐帧动画抖动解决方案
      • 非逐帧动画部分，使用 rem 做单位
      • 逐帧动画部分，使用 px 做单位，再结合 JavaScript 对动画部分使用 scale 进行缩放
  • SVG动画：
    • 购物车loading

# 动效之‘效’

好比一个歌手拼命练习各种花式唱法 —— 高音、颤音、延音无所不能，但缺了情感就算不上伟大的歌手。动效开发也是一样的道理，「动」是招式是基本要求，而「效」才是真正的修炼之道。

• 弹性动效库bounce.js
• 贝塞尔曲线在线调试工具
• CSS Triggers查阅到各 CSS 属性及其影响的环节
• 60fps动画
• 移动Web触摸与运动解决方案AlloyTouch 如何提升动画的体验效果

css3动画做异步动画电影

-窃听风云3预告片效果

• 设计关键帧与时间轴
• 迪士尼动画12原则
• 所有案例

# React动画：

• 创造react5中方案
• React 中常见的动画实现方式
• react-smooth
• react-gsap-enhancer

# 酷炫动画库

• GSAP
• Velocity
• animation.css
• popmotion
• 弹性动效库bounce.js

# 滚动相关动画库

• scrollOut
• scrollMagic 延迟加载： Img-2 https://github.com/RevillWeb/img-2 预先显示模糊的图片 Lozad