# base-animation

**Repository Path**: lisa_zhu2012/base-animation

## Basic Information

- **Project Name**: base-animation
- **Description**: CSS3动画研发学习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-13
- **Last Updated**: 2023-08-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# base-animation

[学习视频](https://www.bilibili.com/video/BV1ma4y1s7A7?p=4&spm_id_from=pageDriver)
## 介绍
CSS3动画研发学习

哪些动画会产生效果？<strong style="color: #DD5145">有中间值</strong>，没有会直接变化。
> 不能产生效果：属性值：auto border-style: xxx

学习CSS3动画的意义
1. 开发周期短；
2. 增加浏览页面的趣味性（和用户交互，让用户有更好的体验）；
3. 增加用户视觉冲击力（更好的视觉效果和视觉体验，人是视觉动物）。

### 动画是什么？

动画片、漫画、视频、flash等等会动的画面都是动画；

颜色高度等属性的变化（过渡）也是动画；

我们css3对于动画的实现有过渡和帧动画。
> 电视播放标准是25帧每秒，人眼舒适放松时可视帧数是每秒24帧，集中精神时不超过30帧。眨眼时睁开眼瞬间可以捕捉到的帧数是30帧以上......

**CSS3动画包括transition和animation；**

**动画常常和transform属性常用；**

**值得注意的是，transform并不是动画属性，但是他在为我们动画的出现做出了杰出的贡献。**

transform 属性应用于元素的2D或3D转换。属于静态类

transform 主动开启浏览器的渲染加速，使动画更加细腻；该属性实现动画过程中不会改变文档流结构（不会触发重绘操作）；

### CSS3动画的发展和应用

#### CSS3动画的发展（效果）

IE10 2012-09-04
Chrome 4 2010-01-25 -webkit
FireFox 5 2011-01-25

#### CSS3动画的发展（事件）
> IE10 效果和事件不是同一时间支持

IE10 2012-10-17
Chrome 4 2010-01-25
FireFox 5 2011-01-25

#### CSS3动画的应用

CSS3动画做一些功能性的菜单按钮

宣传用的轮播图，各种页面效果的缓冲

页面间的切换过渡，网页小游戏

#### CSS3动画之基

vue-transition swiper svg animate.css

### 学习CSS3动画的目标和必备技能

#### 学习CSS3动画的目标

第一阶段：熟练使用 transition 和 animation 中的 name during

第二阶段：一法同，百法通。动画库拿来就用，通过观察其它动画有好的实现方案

第三阶段：复杂动画的开发和实现

#### 学习CSS3动画的必备基础

CSS3新属性和其它CSS3静态属性

Chrome浏览器调用工具

JS基本的API，例如属性选择、事件监听

## 前言

写动画前期一定要善于学习别人的思路

在借鉴前，最好先自己脑洞下自己的思路

善于对比和总结，因为这真的是一个学起来简单，做起来难的属性

## transition 基础写法&一些经验

### [transition 基础和写法](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)

* 属性名称（property）
* 过渡时长（duration）
* 时间函数（timing-function）
* 延迟时长（delay）

```
div {
  transition: <property> <duration> <timing-function> <delay>;
}
```

### transition 简单运用
> 1_transition.html
1. 过渡时间 延迟时间;
2. 时间函数改变动画的速度；

触发过渡

单纯的代码不会触发任何过渡操作，需要通过用户的行为（如点击，悬浮等）触发，
可触发的方式有：:hover :focus :checked 媒体查询触发 JavaScript触发

局限性

transition的优点在于简单易用，但是它有几个很大的局限：

（1）transition需要事件触发，所以没法在网页加载时自动发生（文档流属性发生变化，才会过渡，而且文档流一定要有个初始）。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

CSS Animation就是为了解决这些问题而提出的。

注意：
- display 不能和 transition 一起使用
> display: none;浏览器文档流预设好了，但不能读出这个属性值，display: block;后，transition读的是瞬间属性值，没有中间值，所以没有变化
- transition 后面尽量不要跟all
> 会把添加的所有属性看一遍，会造成GPU损耗，影响读取速度和页面流畅性
- 常见闪动 可以用 perspective和backface-visibility（等3D元素）

## animation 基础写法&一些经验

### [animation 基础写法](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation)

* 动画名称（name）-- @keyframes
* 过渡时长（duration）
* 时间函数（timing-function）
* 延迟时长（delay）

* 播放次数（iteration-count） 
  > iteration 迭代 
  infinite：无限循环播放动画；
  <number>：动画播放的次数；默认值为1。可以用小数定义循环，来播放动画周期的一部分：例如，0.5 将播放到动画周期的一半。不可为负值。

* 播放方向（direction）
  是否轮流播放和反向播放 normal | reverse | alternate（交替） | alternate-reverse
  
  > alternate 缓慢的恢复到初始
  
* 停止播放的状态（fill-mode） 
  none | forwards | backwards | both
  
  forwards：目标将保留由执行期间遇到的最后一个关键帧计算值。 最后一个关键帧取决于animation-direction和animation-iteration-count的值：
  > 结束时是最后一帧状态

  | animation-direction	| animation-iteration-count	| last keyframe encountered |
  | ---- | ---- | ---- |
  |normal|	even or odd	|100% or to|
  |reverse|	even or odd	| 0% or from|
  |alternate|	even|	0% or from|
  |alternate|	odd|	100% or to|
  |alternate-reverse|	even|	100% or to|
  |alternate-reverse|	odd|	0% or from|

  backwards：动画将在应用于目标时立即应用**第一个关键帧中定义的值**，并在animation-delay期间保留此值。 第一个关键帧取决于animation-direction的值：
  > 延迟前就是 第一帧状态
  
  | animation-direction	| first relevant keyframe |
  | ---- | ---- |
  |normal or alternate|	0% or from|
  |reverse or alternate-reverse|	100% or to|

* 是否暂停（play-state）
  running | paused

```css
animation: name duration timing-function delay iteration-count direction fill-mode;

/* 如果
animation-name: name1, name2, name3;
animation-iteration-count: infinite, 2; 
name3并没有对应的值，这样会从头开始； */
```

### animation 简单运用
> 1_animation.html
1. animation 适用场景 跑马灯，loading，帧动画...
2. animation 解决 transition display: none bug

## 时间函数与js监听

时间函数分线性和非线性

善于对比和总结，多看demo，在其中找到答案

### 时间函数

**animation-timing-function 是作用在每个 keyframe 关键帧上的**

#### 时间函数-线性

时间函数，管理着动画在单位帧内播放的速度曲线

它使用的是名为 三次贝塞尔函数的数学函数

预设值 linear ease ease-in ease-out ease-in-out

cubic-bezier(n,n,n,n)
> x1,y1,x2,y2

#### 时间函数-非线性

能够实现动画的阶跃式变化，不是线性的过渡

steps(1, start|end)

**steps作用的是每个关键帧，而不是整个时间**
> ps：0% 50%
> 帧——就是影像动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。 一帧就是一幅静止的画面，连续的帧就形成动画，如电视图象等。 我们通常说帧数，简单地说，就是在1秒钟时间里传输的图片的帧数，也可以理解为图形处理器每秒钟能够刷新几次，通常用fps（Frames Per Second）表示。每一帧都是静止的图象，快速连续地显示帧便形成了运动的假象。高的帧率可以得到更流畅、更逼真的动画。每秒钟帧数 (fps) 愈多，所显示的动作就会愈流畅。

### 过渡和动画在js中的监听

animationstart

animationend、transitionend

animationiteration

#### 监听的事件（兼容）

* 在360，safari和部分chrome下需要这样webkitAnimationEnd

* IE和firebox已经做了兼容可以直接写

## 其它

transform:translate3d(0,0,0)可以触发硬件加速，CSS3提供的3D效果，属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU。

色板：https://flatuicolors.com/

# SVG
SVG (Scalable Vector Graphics): 可缩放的矢量图形，使用XML格式定义图像。

* 优势：

  SVG是矢量图形文件，无限放大不失真。

  可以用CSS样式来自由定义图标颜色，比如颜色/尺寸等效果。

  所有的SVG可以全部在一个文件中，节省HTTP请求 。

  使用SMIL、CSS或者是javascript可以制作充满灵性的交互动画和滤镜效果。

  由于SVG也是一种XML节点的文件，所以可以使用gzip的方式把文件压缩到很小。

* 缺点：对CPU消耗比较，图片越大，绘制占用的CUP资源越多。官方建议不超过200dp*200dp

同样高清的质地，矢量图不畏惧放大，体积小。这里要说明一点就是，因为 SVG 中保存的是点、线、面的信息，与分辨率和图形大小无关，只是跟图像的复杂程度有关，所以图像文件所占的存储空间通常会比 png 小。

svg 插图：https://undraw.co/illustrations


实验中的功能：使用对象边界框作为参考盒子。
transform-box: fill-box;

SVGPathElement.getTotalLength() 该方法返回用户代理对路径总长度(以用户单位为单位)的计算值。

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
filter 滤镜的 hue-rotate 色调旋转

## 公众号SVG动画排版基础

visualstudio下载地址：https://code.visualstudio.com

事件穿透：pointer-events: none


### 自适应宽度伸长动画原理
> https://mp.weixin.qq.com/s/WhTd4T84iJIs2JeYdDvsSA
> https://mp.weixin.qq.com/s/lxh4U6NGrklTkap03ppZzQ

```
触发器SVG
<svg viewBox="0 0 750 800" style="width: 100%">
</svg>

viewBox 750x750  宽高比 750/800
```