Skip to content

Instantly share code, notes, and snippets.

@defims

defims/animation.md

Last active August 31, 2015 06:52
Show Gist options
  • Save defims/563bc88f1dc6b9e2a9f3 to your computer and use it in GitHub Desktop.
Save defims/563bc88f1dc6b9e2a9f3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
animation.md

PS动画扩展

优势

  • 快速
  • psd集成
  • 成本低

逐帧动画

视频图层

  • 位图
  • 视频绘制
  • 单图层

视频组

  • 子图层对应帧
  • 可矢量
  • 可图层缩放、旋转、位移
  • 可结点动画

关键帧动画

  • 位置、透明度、样式、矢量蒙板位置及启用

操作提示

  • 显示时间轴
  • 新建空白视频层
  • 新建视频组
  • 时间轴快捷键
  • 剪刀工具快速新建单帧

参考

flash动画

转svg动画

  • 矢量
  • 渐进显示
  • 适合体积小

转序列帧雪碧图

  • 逐帧
  • 表现形式不限制
  • 体积看情况
  • css3或js

转canvas动画

  • 一键转换
  • 重交互部分需要重构学习成本
  • flash多媒体设计

参考

重构优化

svg

  • 路径尽量少
  • 结点数量一致可以缓动过渡
  • 基本transform动画
  • 透明度动画
  • 逐帧

css3

  • 基本transform动画
  • 透明度动画
  • 逐帧

canvas

  • fla源文件
  • 交互简单脱离
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment