前端动画实现

六、前端动画实现

动画的基本原理

1. 什么是动画？

• 动画是通过快速连续排列彼此差异极小的连续图像来制造运动错觉*和变化错觉的过程

2. 动画的历史

• 常见的前端动画技术

  Sprite动画、CSS动画、JS动画、SVG动画和WebGL动画

• 按应用分类

  UI动画、基于Web的游戏动画和动画数据可视化

3. 计算机动画原理

• 计算机图形学:

计算机视觉的基础，涵盖点、线、面、体、场的数学构造方法。

(1) 几何和图形数据的输入、存储和压缩。

(2) 描述纹理、曲线、光影等算法。

(3) 物体图形的数据输出(图形接口、动画技术)，硬件和图形的交互技术。

(4) 图形开发软件的相关技术标准。

• 计算机动画:

计算机图形学的分支，主要包含2D、3D动画。

前端动画分类

1. CSS 动画

CSS 中 animation 是常见的CSS动画实现方式

animation 属性是由 animation-name , animation- duration , animation-timing-function ，animation-delay , animation-iteration-count ，animation-direction , animation-fill- mode 和 animation-play-state 属性的一个简写属性形式。

(1). animation-name: none | ldent: 属性指定应用的一系列动画，每个名称代表一个由 @keyframes 定义的动画序列。

• none：无动画
• ldent：标识动画的字符串，由大小写敏感的字母a-z、数字0-9、下划线(_)和/或横线(-)组成。第一个非横线字符必须是字母，数字不能在字母前面，不允许两个横线出现在开始位置。

(2). animation-duration: 属性指定一个动画周期的时长。（默认值为0s，表示无动画)

animation-duration