动画的基本原理 #

• 什么是动画
  • 快速
  • 连续排列
  • 彼此差异极小
  • 产生视觉错觉
• 基本概念
  • 帧
  • 帧率FPS
• 空白补全
  • 补间动画
    • 浏览器：keyframe、transition
  • 逐帧动画
    • CSS：step

前端动画分类 #

• CSS动画
  • 使用场景
    • H5活动/宣传页
  • 推荐库
    • animation.css
  • transition
    • 过渡动画
  • keyframe
    • 定义动画
    • transform-origin
      • 设置定点（接收x,y,z三个值）
      • center / top / bottom / left / right / 数值
    • transform
      • translate：移动
      • scale(x,y)：缩放
      • rotate(a)：围绕定点旋转
      • skew：倾斜
  • animation
    • animation-name：none | Ident
    • animation-duration：每个动画时长
    • animation-timing-function：每个动画节奏
    • animation-delay：每次动画延时进行
    • animation-iteration-time：循环播放
      • infinite 无限播放 / 整数 / 小数
    • animation-direction：动画的运行方式
    • animation-fill-mode：执行前执行后如何将样式应用于其目标
    • animation-play-state：定义动画是否运行或暂停，可以配合伪类使用
• SVG动画
  • SMIL：同步多媒体继承语言
  • JS
  • CSS
  • filter
    • CSS属性
      • blur高斯模糊
      • contrast对比度
      • xxx灰度
    • JS笔画
      • stroke-dasharray：
      • stroke-dashoffset：偏移量
  • 推荐库
    • snap.svg
    • anime.js
• JS动画

如何做选择 CSS：浏览器有优化，代码简单；控制不灵活，兼容性不佳， JS：使用灵活，实现复杂动画；调优不如CSS，需要做兼容 当您为U元素采用较小的独立状态时,使用CSS 在需要对动画进行矢量控制时,使用 JavaScript 在特定的场景下可以使用SVG,可以使用CSS或JS去操作SVG变化

实现前端动画 #

• JS动画封装

• 简单动画
• 复杂动画

开发实践 #

动画资源 #

• 动画代码示例
  • codepen
  • codesandbox.com
• 设计网站
  • dribbble.com
• SVG
  • Snap.svg
  • Svg.js
• JS
  • GSAP
  • `TweenJS
  • Velocity
• CSS
  • animate.css

工作实践 #

• Lottie格式

#

动画的优化 #