前端深度学习总结

1,css动画

1，动画原理及2D变换

transform: 变换，用于描述物体的位置旋转缩放
translate: 平移
rotate 旋转 参数：可以是角度值 (deg) 也可以是弧度值 (rad) 弧度制的PI = 180° 沿轴进行顺时针旋转为正方向，0°代表竖直向上
scale 缩放 参数：比率 1 为原本大小
skew 倾斜
设置transform的原点:transform-origin

2，过渡动画

transition是过渡的意思，将会使元素从一个状态用动画形式过渡到另一个状态,当中应该包含
定义初始状态
指定css属性能够产生过度动画
动画播放的时长
动画播放的速度曲线
动画播放延迟

3，3d变换和animation动画

1，animation动画

动画animation必须包含 名称和时长两个属性才会进行播放

/* animation一下四个属性可以和 tansition一块儿进行记忆 */

            /* 动画名称 */
            animation-name: move;

            /* 动画播放时长 */
            animation-duration: 3s;

            /* 动画播放的速度曲线 */
            animation-timing-function: linear;

            /* 动画延迟 */
            /* animation-delay: 3s; */



            /* 以下属性为 animation 独有的属性 */

            /* 动画的迭代次数
                infinite 无限次
            */
            animation-iteration-count: 1;

            /* 动画播放方向
                待选项:
                normal: 顺向播放
                reverse: 反向播放
                alternate: 来回播放
                alternate-reverse: 反向来回播放
            */
            animation-direction: normal;

            /* 动画填充模式（动画播放结束后所保留的状态）
                forwards: 保留结束帧的状态
                backwards: 保留起始帧的状态
                both: 保留初始和结束时的状态
            */
            animation-fill-mode: both;


            /* 可以定义复合属性，取代上面的所有属性 */
            /* 赋值顺序，可以参考如下顺序 */
            /* duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
            /* duration | timing-function | delay | name */
            /* duration | name */
            /* animation: 2s move;
            animation: 2s linear 3s move; */

            animation: move 3s linear 2s forwards;
        }

        /* 动画帧序列 */
        @keyframes move {

            /* 起始帧 */
            from {
                /* 每一帧中描述该元素的状态 */
                transform: translateX(0px);
                opacity: 0;
            }

            /* 可以用百分比来代表动画的中间状态 */
            50% {
                transform: translateX(600px);
                opacity: 1;
            }

            /* 结束帧 */
            to {
                transform: translateX(300px);
            }
        }
        // animationPlayState 动画播放状态
        // paused 暂停
        // running 播放
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

2，3d变换

.scene {
            height: 100vh;

            /* 变换样式
                perserve-3d 代表将元素变成一个3D空间
            */
            transform-style: preserve-3d;

            /* 灭点到屏幕的距离 */
            /* 若三维场景中不添加 perspective 则三维场景是一个正交视图 */
            perspective: 300px;

            /* 透视原点（灭点所在的坐标）
                原点为 0 值时，所在位置是scene的左上角
            */
            /* perspective-origin: center center; */
            perspective-origin: 0 0;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3d变换 是让我们的元素看上去在三维空间中发生变换（平移 旋转 缩放 倾斜）

总结：
要使用3d变换需要依序执行以下步骤：
1. 搭建3d场景，在父元素上设置：transform-style: preserve-3d;
2. 在父元素上设置透视距离：perspective: 100px;
3. 给场景添加演员，给场景元素添加子元素
4. 在子元素上使用3d变换

4，渐变色分栏布局与响应式

1，渐变色

 /* 背景的渐变色实际上是设置的 background-image 而不是 background-color */

            /* 线性渐变 */
            /* 语法: linear-gradient(direction, color1, color2, color3 ... ) 
                direction: 渐变色的朝向 以 to 开头, 或者可以添加角度值; 默认值为 to top
                color1 color2 ...: 渐变的颜色序列
            */
            background-image: linear-gradient(30deg, #f00, #0f0, #00f);

            /* 颜色值后可以添加像素距离，该像素值代表着该颜色所处的位置，该位置颜色将到下一个位置的颜色之间进行渐变 */
            background-image: linear-gradient(to right, #f00, #f00 50px, #0f0 50px, #0f0 100px, #00f 200px);

            /* 重复线性渐变 */
            background-image: repeating-linear-gradient(to right, #f00, #f00 50px, #00f 50px, #00f 100px);

            /* 径向渐变 */
            background-image: radial-gradient(#f00, orange, #0f0, #ff0, #f0f);
            background-image: radial-gradient(#f00, #f00 50px, #00f 50px, #00f 100px, #0f0 100px, #0f0 200px);

            /* 重复径向渐变 */
            background-image: repeating-radial-gradient(#f00, #f00 50px, #ff0 50px, #ff0 100px);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2，响应式布局

 /* 响应式是什么？
            当某个事情发生后，立即做出反应就叫响应式
            此处我们讨论的是页面的响应式
        */

        /* 什么是页面的响应式？
            页面的元素样式会根据页面的宽度做出变化
        */

        /* 为什么要使用页面响应式
            为了让同一个页面能够适配不同的设备
        */

        /* 如何实现响应式？ */
        /* 使用媒体查询，来实现响应式布局 */
        /* 媒体查询的作用：当媒体查询条件成立时，将应用花括号中代码块的样式 */

        /* 语法：@media media-type and (condition1) and (condition2) ... */

        /* 媒体类型 media-type：
            备选项
            all: 所有设备
            print：打印机的预览模式
            screen：显示屏
            speech：语音合成器
         */
        /* min-width: 屏幕最小宽度 */
        /* max-width: 屏幕最大宽度 */

        @media screen and (min-width: 600px) and (max-width: 900px) {
            .box {
                background-color: orange !important;
            }
        }

        @media screen and (min-width: 900px) {
            .sidebar {
                display: block !important;
            }
        }

        @media screen and (max-width: 900px) {
            .sidebar-mini {
                display: block !important;
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

2,jquery

使用 $() 函数获取一个 jQuery 对象
eq 读取对应索引位置的jquery对象
get 读取对应索引位置的dom对象

// 某个元素追加一个子节点
// $(document.body).append($box)

// 追加一个子节点到另一个元素中
// $box.appendTo($(document.body))

// 某个元素追加一个节点到头部
// $(document.body).prepend($box)

// 追加一个子节点到另一个元素的头部
// $box.prependTo($(document.body))
// 某个元素的前面追加一个元素
// $box2.before($box)

// 某个元素被添加到另一个元素的前面
// $box.insertBefore($box2)

// 某个元素的后面添加一个元素
// $box2.after($box)

// 某个元素被添加到另一个元素的后面
// $box.insertAfter($box2)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

index 遍历的数组成员的索引
value 对应索引元素的样式值

    // 添加类
    $box.addClass('active')

    // 判断是否存在某个类名
    $box.hasClass('active')

    // 删除类
    $box.removeClass('active')
    // 读取属性
    let clazz = $box.attr('class')
    console.log(clazz);

    // 赋值属性
    $box.attr('my-data', 'hello world')

    // 删除属性
    $box.removeAttr('class')
    // 相当于dom对象的innerText
    $p.text('hello world')

    // 相当于dom对象的innerHTML
    $p.html('hello world')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3,canvas画布

使用canvas的步骤
1. 创建canvas标签
2. 给canvas标签设置 width height 属性
3. 通过js 获取canvas标签
4. 通过canvas标签获取context画布上下文（画布对象）
5. 通过context绘制画布

// 绘制实心矩形(rectangle)
// ctx.fillRect(x, y, w, h)
// x: 水平坐标
// y: 竖直坐标
// 坐标原点在canvas左上角
// w: 宽度



// 绘制实心文字
// 语法：ctx.fillText(text, x, y, max-width)
// text: 要渲染的文本
// x,y: 文本渲染的坐标位置
// max-width: 文本最大宽度，当大于该宽度，文本字体将自动缩小以自适应宽度
// ctx.fillText('祖国万岁!!', 200, 100, 100)




    // 设置颜色和线宽
    ctx.strokeStyle = '#ff0'
    ctx.lineWidth = 15

    // 画线分两个步骤:
    // 1. 描点（设置路径）
    // 2. 画线（将所描的点连接起来）

    // 步骤一
    // 使用 beginPath 开启路径
    ctx.beginPath()
    // 移动笔头但不会记录路径上的线条
    ctx.moveTo(400, 100)
    // 用线绘制到下一个点
    ctx.lineTo(200, 200)
    ctx.lineTo(600, 200)
    ctx.lineTo(400, 100)

    // 将路径封闭
    ctx.closePath()


	// 步骤二
    // 为了显示图形需要调用以下函数
    // 将路径所包围的图形用纯色来填充
    // ctx.fill()
    // 将路径用镂空线条进行绘制
    ctx.stroke()


	绘制图片
	// 语法:
    // ctx.drawImage(image, dx, dy);
    // ctx.drawImage(image, dx, dy, dWidth, dHeight);
    // ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
    // image: img 标签的 dom 对象
    // dx dy: 图片在canvas中的坐标
    // dWidth dHeight: 图片在canvas中的宽高
    // sx, sy: 参考图片源，截图的坐标
    // sWidth, sHeight: 截图的宽高
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

4,多媒体标签

属性
width 标签宽度
height 标签高度
controls 控制面板
muted 静音
autoplay 自动播放
src 媒体源
preload 预载模式
loop 循环
poster 海报
详细讲解在我的上一篇博客这里传送门

5,微信小程序

微信小程序和前端学习差不多，差别不大

1，基础

1，底部选项卡

在 app.json 中 增加 tabBar 配置就能添加选项卡