动效的实现技术

技术 兼容性 性能 灵活性
Movie C C C
gif A A C
javaScript A- B A+
CSS3 A- A+ B
Canvas A A+ A
SVG A A+ A

动效技术分析

  • Movie

    • 优点: 适合做高清电影, 动画, 体验好.
    • 缺点: 体积大, 视频格式多, 兼容差.

    • HTML5的<video>在网页上播放视频.

    • 视频格式: OGG, MP4, AVI, mpg, Webm等

    • 迅雷主页http://dl.xunlei.com/

  • GIF
    • 优点: 动态图, 兼容好
    • 缺点: 实现不了复杂, 交互的动画.

  • flash

    • 视频, 动画交互或游戏, 需要flash插件, 兼容好.
    • flash被浏览器淘汰.

  • VR虚拟现实动画

    • 3D电影, 3D游戏, 3D动画, 3D海族馆等.
    • 缺点是技术太新, 学习成本高, 没有广泛普及.
  • JavaScript
    • js是编程语言, 做动画灵活.
    • 原生js实现动画较复杂, 使用jQuery.
    • js动画对内存的损耗较大.
  • CSS3
    • CSS3动画的性能比js动画更好, 动画流畅.

  • Canvas和SVG

    • SVG绘制出的图是矢量图, Canvas是像素图.
    • 都使用JavaScript来进行操作的, 功能非常强大;
    • 有很多封装好的对象和方法.

视频优化常用技巧:

  1. 在视频加载前在播放器里放源视频的第一帧图片.
  2. 在video里设置多个格式和大小的视频源.
  3. 在加载或缓冲过程中使用进度条动画.
  4. 通知用户在非WiFi环境下是否加载视频.

思考

经过多种动效技术的比较, 思考如何选择合适的技术运用到合适的场景中? 列举三个场景应使用什么技术.

results matching ""

    No results matching ""