前端图片、动画基本知识

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Donspeng/article/details/77102613

一、最原生的方法实现图片或者动画
1、img
作用：展示一个图片
使用方法：

<img src="图片路径" alt="图片没有加载成功出现的内容" data-src="自定义属性，不属于html规范"></img>

注意：data-src:一般会用于懒加载（在瀑布流视图中经常用到，鼠标滚轮）

ps：懒加载和预加载的区别

懒加载：当需要用户看到内容的时候再去请求
优点：减轻服务器压力，减少用户流量
方法：设置data-src属性
预加载：提前加载图片等相关资源
优点：加载速度快，响应快
方法：
    1、提前把图片加载，放在屏幕外面
    2、创建html元素，但不插入dom文档流
    3、ajax异步加载
补充：
屏幕可视窗口大小：windows.innerHeight
滚动条的距离：windows.pagYoffset

2、svg
作用：展示图形
使用方法：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

特点：svg是可伸缩矢量图形的缩写；（svg本身，定义了一些图像的形状，滤镜等）；使用xml描述；放大或缩小，图片质量不会损失
3、canvas
作用：xml描述2D图形，通过像素进行渲染
特点：弱文本渲染；能够以png或者jpg存储；不支持事件处理
4、css动画
作用：@keyframes
简介：

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
一共有8个属性（很好记的）
animation：是所有属性的简写
animation-name：动画的名字
animation-duration：持续时间（必须）
animation-timing-funciton：速度曲线
animation-delay：何时开始
animation-iteration-count：播放次数，默认为1
animation-direction：下一个周期是否逆向播放
animation-play-state：是否正在播放
animation-fill-mode：动画之外时间的状态

5、Js动画
理解：这个很好理解了，通过js改变dom元素的位置，实现动画效果
二、外部库函数
1、three.js
3D模型库
github地址
2、WebGL
MDN介绍：

WebGL (Web图形库) 是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API，可以在HTML5 <canvas> 元素中使用。