2024年前端最新【Anime，面试题目与答案

最新推荐文章于 2024-07-23 14:51:29 发布
最新推荐文章于 2024-07-23 14:51:29 发布
阅读量538 收藏 26
点赞数 23
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84434331/article/details/138817510
版权

TCP协议

  • TCP 和 UDP 的区别？
  • TCP 三次握手的过程？
  • 为什么是三次而不是两次、四次？
  • 三次握手过程中可以携带数据么？
  • 说说 TCP 四次挥手的过程
  • 为什么是四次挥手而不是三次？
  • 半连接队列和 SYN Flood 攻击的关系
  • 如何应对 SYN Flood 攻击？
  • 介绍一下 TCP 报文头部的字段
  • TCP 快速打开的原理(TFO)
  • 说说TCP报文中时间戳的作用？
  • TCP 的超时重传时间是如何计算的？
  • TCP 的流量控制
  • TCP 的拥塞控制
  • 说说 Nagle 算法和延迟确认？
  • 如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇
  • 浏览器缓存?
  • 说一说浏览器的本地存储？各自优劣如何？
  • 说一说从输入URL到页面呈现发生了什么？
  • 谈谈你对重绘和回流的理解
  • XSS攻击
  • CSRF攻击
  • HTTPS为什么让数据传输更安全？
  • 实现事件的防抖和节流？
  • 实现图片懒加载？

变为：

4、DOM属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <input class="text-output" value="0">
    <script src="../node_modules/animejs/lib//anime.min.js"></script>
    <script>
        var domAttributes = anime({
            targets: 'input',
            value: 1000, // value变化为1000
            round: 100, //表示小数，把1分成了100份，也就是展示两位小数点
            easing: 'easeInOutExpo'
        });
    </script>
</body>

</html>

5、给每个属性单独设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div></div>
    <script src="../node_modules/animejs/lib//anime.min.js"></script>
    <script>
        anime({
                targets: 'div',
                translateX: {
                    value: 250,//通过value来设置值
                    duration: 800 //表示延长动画效果的时间
                },
                rotate: {
                    value: 360,
                    duration: 1800,
                    easing: 'easeInOutSine'
                },
                scale: {
                    value: 2,
                    duration: 1600,
                    delay: 800,
                    easing: 'easeInOutQuart'
                },
                delay: 250 // All properties except 'scale' inherit 250ms delay
            });
    </script>
</body>
</html>

6、属性参数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }
    </style>
</head>

<body>
    <div></div>
    <script src="../node_modules/animejs/lib//anime.min.js"></script>
    <script>
        anime({
            targets: 'div',
            translateX: 270,
            direction: 'alternate',
            loop: true,
            // 接收三个参数：
            // el：表示当前目标元素
            // i: 表示当前目标元素下标
            // l：表示目标元素的总长度
            delay: function (el, i, l) {
                return i * 100;
            },
            endDelay: function (el, i, l) {
                return (l - i) * 100;
            }

        });
    </script>
</body>

</html>

三、anime.stagger——交错动画

1、

anime.stagger(value, options)
//它针对多个元素。
//第一个参数接收：Number, String, Array
//第二个参数接收：Object

anime({
  targets: '.basic-staggering-demo .el',
  translateX: 270,
  delay: anime.stagger(100) // increase delay by 100ms for each elements.
});

效果：

2、

anime.stagger(value, {start: startValue}) //在value后面添加对象属性


anime({
  targets: '.staggering-start-value-demo .el',
  translateX: 270,
  delay: anime.stagger(100, {start: 500}) // delay starts at 500ms then increase by 100ms for each elements.
});

3、

anime.stagger([startValue, endValue]) //作为rotate旋转的属性值

anime({
  targets: '.range-value-staggering-demo .el',
  translateX: 270,
  rotate: anime.stagger([-360, 360]), // rotation will be distributed from -360deg to 360deg evenly between all elements
  easing: 'easeInOutQuad'
});

4、

anime.stagger(value, {from: startingPosition}) //从哪个位置依次延迟

anime({
  targets: '.staggering-from-demo .el',
  translateX: 270,
  delay: anime.stagger(100, {from: 'center'})
});

5、

anime.stagger(value, {direction: 'reverse'}) //反向延迟

anime({
  targets: '.staggering-direction-demo .el',
  translateX: 270,
  delay: anime.stagger(100, {direction: 'reverse'})
});

6、

anime.stagger(value, {grid: [rows, columns]})

anime({
  targets: '.staggering-grid-demo .el',
  scale: [
    {value: .1, easing: 'easeOutSine', duration: 500},
    {value: 1, easing: 'easeInOutQuad', duration: 1200}
  ],
    //grid: [14, 5]表示14行5列
    //from 表示从哪里开始
  delay: anime.stagger(200, {grid: [14, 5], from: 'center'})
});

7、

anime.stagger(value, {grid: [rows, columns], axis: 'x'})
//axis设置为x，表示将一整行设置为整体
//设为y，会将一整列设置为整体

anime({
  targets: '.staggering-axis-grid-demo .el',
  translateX: anime.stagger(10, {grid: [14, 5], axis: 'x'})
})

 

四、timeline——时间轴

接下来学习官网的时间轴模块。

这个模块告诉我们可以创建一个时间轴，在这个时间轴上可以创建多个动画，并且添加在时间轴上的每一个动画都会在上一个动画结束之后开始执行。

1、创建时间轴

创建一个时间轴：

//调用该方法：
var myTimeline = anime.timeline(parameters);

如何通过这个时间轴调用对象：

myTimeline.add(parameters, offset);
//parameters 动画相关的参数
//offset 时间偏移量

实例：

// 创建了一个时间轴对象
var tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750  // 持续时间是750ms
});

// 时间轴上分别创建了三个动画
tl
.add({
  targets: '.basic-timeline-demo .el.square', //方形
  translateX: 250,   // 平移250px
})
.add({
  targets: '.basic-timeline-demo .el.circle', //圆形
  translateX: 250,
})
.add({
  targets: '.basic-timeline-demo .el.triangle', //三角形
  translateX: 250,
});

会等到上一个方块执行完，才会执行圆。

2、时间偏移量

时间偏移量是我们创建时间轴的第二个参数。

默认情况下，每一个动画都会在上一个动画结束之后开始执行，通过时间偏移量就可以改变每个动画开始执行的时间。

如下图可以看到，时间偏移量可以有两种数据类型：String字符串、Number数字

字符串是相对于上一个动画的设置的，比如：

'+=200’表示：是上一个动画执行结束完200ms后再执行当前的动画

'-=200’表示：是上一个动画执行结束前200ms后执行当前的动画

数字偏移量是相对于整个时间轴的绝对偏移量。

200表示：当前时间轴开始200ms后执行。

// Create a timeline with default parameters
var tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

tl
.add({
  targets: '.offsets-demo .el.square',
  translateX: 250,
})
.add({
  targets: '.offsets-demo .el.circle',
  translateX: 250,
}, '-=600') // 相对偏移量————字符创
.add({
  targets: '.offsets-demo .el.triangle',
  translateX: 250,
}, 400); // 绝对偏移量————数字

3、参数继承

| 添加在时间轴中的动画，都可以继承表格里的这些属性 |
| targets |
| easing |
| duration |
| delay |
| endDelay |
| round |

注意：

direction 和 loop 是不可以被继承的。

演示：（继承targets属性）

五、控制、回调与助手

一、控制

页面中需要的元素：

1、动画上的属性

animation.play(); //开始

animation.pause(); //暂停

animation.restart(); //重新开始

animation.reverse(); //反向移动

// seek 当前元素显示在具体时间的某一帧
// timeStamp:跳到具体的时间
animation.seek(timeStamp); 

// 通过滚动条来控制动画
// scrollPercent / 100：求滚动条的百分比
// animation.duration：当前动画的时间
// (scrollPercent / 100) * animation.duration：具体跳到的时间值
animation.seek((scrollPercent / 100) * animation.duration);

 

2、时间轴上的属性

// 控制时间轴上的动画：
timeline.play();
timeline.pause();
timeline.restart();
timeline.seek(timeStamp);

二、回调

1、UPDATE：每更新一帧就会调用一次

var updates = 0;

anime({
  targets: '.update-demo .el',
  translateX: 270,
  delay: 1000,
  direction: 'alternate',
  loop: 3,
  easing: 'easeInOutCirc',
    // anim当前动画的实例
  update: function(anim) {
    updates++;
    // anim.progress 当前动画的进度
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
    updateLogEl.value = 'updates : '+updates;
  }
});

示例：

表示更新了58帧。

2、BEGIN & COMPLETE

BEGIN：动画开始执行前触发一次

COMPLETE：动画结束时触发一次

这两个属性是布尔类型

示例：

注意箭头处的写法是不一样的！！！

效果：

3、LOOPBEGIN & LOOPCOMPLETE

LOOPBEGIN：循环开始时就会触发一次

LOOPCOMPLETE：循环结束时就会触发一次

注意：动画一定是循环的动画

var loopBegan = 0;
var loopCompleted = 0;

anime({
  targets: '.loopBegin-loopComplete-demo .el',
  translateX: 240,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutCirc',
  loopBegin: function(anim) {
    loopBegan++;
    beginLogEl.value = 'loop began : ' + loopBegan;
  },
  loopComplete: function(anim) {
    loopCompleted++;
    completeLogEl.value = 'loop completed : ' + loopCompleted;
  }
});

4、CHANGE：动画元素每更新一次就调用一次

与update的区别：change在delay和endDelay期间是不更新的，update反之。

var changes = 0;

anime({
  targets: '.change-demo .el',
  translateX: 270,
  delay: 1000,
  endDelay: 1000,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutCirc',
  update: function(anim) {
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
  },
  change: function() {
    changes++;
    changeLogEl.value = 'changes : ' + changes;
  }
});

5、FINISHED PROMISE：每一个动画实例完成都会返回一个promise

// animation表示创建的动画实例
animation.finished.then(function() {
  // Do things...
});

var progressLogEl = document.querySelector('.promise-demo .progress-log');
var promiseEl = document.querySelector('.promise-demo .el');
var finishedLogEl = document.querySelector('.promise-demo .finished-log');
var demoPromiseResetTimeout;

function logFinished() {
  anime.set(finishedLogEl, {value: 'Promise resolved'});
  anime.set(promiseEl, {backgroundColor: '#18FF92'});
}

var animation = anime.timeline({
  targets: promiseEl,
  delay: 400,
  duration: 500,
  endDelay: 400,
  easing: 'easeInOutSine',
  update: function(anim) {
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
  }
}).add({
  translateX: 250
}).add({
  scale: 2
}).add({
  translateX: 0
});

animation.finished.then(logFinished);
三、助手

1、anime.remove

// remove 将某个targets对象移出
anime.remove(targets);
animation.remove(targets);

var animation = anime({
  targets: '.remove-demo .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutQuad'
});

document.querySelector('.remove-el-button').addEventListener('click', function() {
  animation.remove('.remove-demo .line:nth-child(2) .el');
});

2、anime.get

// get 获取元素的信息
// target 获取的元素
// propertyName 获取的元素的属性
// unit 单位
anime.get(target, propertyName, unit);

var logEl = document.querySelector('.get-value-demo-log');
var el = document.querySelector('.get-value-demo .el');

logEl.innerHTML = '';
logEl.innerHTML += '".el" width is :<br>';
logEl.innerHTML += '"' + anime.get(el, 'width', 'px') + '"';
logEl.innerHTML += ' or "' + anime.get(el, 'width', 'rem') + 'rem"'

3、anime.set

// set 设置元素的属性值是什么
// {property: value} ：是一个对象，{属性：值}
// target(s) 类型是'string', var
// value 类型是object
anime.set(targets, {property: value});

anime.set('.set-value-demo .el', {
  translateX: function() { return anime.random(50, 250); },
  rotate: function() { return anime.random(0, 360); },
});

4、anime.random

// random 返回一个随机数
anime.random(minValue, maxValue);

function randomValues() {
  anime({
    targets: '.random-demo .el',
    translateX: function() {
      return anime.random(0, 270);
    },
    easing: 'easeInOutQuad',
    duration: 750,
    complete: randomValues
  });
}

randomValues();

5、anime.running

//running 表示动画实例，其长度代表动画个数
anime.running

var runninLogEl = document.querySelector('.running-log');

anime({
  targets: '.running-demo .square.el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'linear'
});

anime({
  targets: '.running-demo .circle.el',
  translateX: 270,


###  最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

![](https://img-blog.csdnimg.cn/img_convert/b41bd5577a8d82c8afc39ae2eec8ca47.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/17af112d2479f299f12519b24c2a258a.webp?x-oss-process=image/format,png)


**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

argets: '.random-demo .el',
    translateX: function() {
      return anime.random(0, 270);
    },
    easing: 'easeInOutQuad',
    duration: 750,
    complete: randomValues
  });
}

randomValues();

5、anime.running

//running 表示动画实例，其长度代表动画个数
anime.running

var runninLogEl = document.querySelector('.running-log');

anime({
  targets: '.running-demo .square.el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'linear'
});

anime({
  targets: '.running-demo .circle.el',
  translateX: 270,


###  最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

[外链图片转存中...(img-LFqYu6qL-1715601654677)]

[外链图片转存中...(img-vsSHZNvq-1715601654678)]


**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
2401_84434331
关注
  • 23
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mysql中的update（更新）与alter（更改）以及change和modify 的区别
kungFuApe的博客
08-09 3199
Mysql中 update、alter 以及 change 和 modify 的区别
MFC中消息框消息响应的EN_CHANGE和EN_UPDATE有什么区别
o396032767的博客
10-20 6250
  EN_CHANGE: 当编辑框中的文本被修改，新的文本显示之 “后” 发送此消息EN_UPDATE: 当编辑框中的文本被修改，新的文本显示之 “前” 发送此消息
增删改查总结insert/create/put/add/save/post、delete/drop/remove、update/modify/change、select/get/list/find
热门推荐
【小石头的茅坑】
02-15 40万+
11
mysql中change和modify 的区别
大曹的博客
03-10 2万+
这几天一直想不明白这个问题。本来准备不想，但是实在放不下，看了一晚上，看了好多博客，得出一点结论：大神勿喷！之前看过一篇博客，说是modify 是修改微小的操作，而change是 修改和原来幅度比较大的，我觉得很正确先举几个例子： 将        数据表   deptment   中   name字段的数据类型    由varchar(22)     修改成varchar(30):     al...
2024年前1000名动漫数据集 CSV（Top Anime Dataset）
05-07
该数据集提供了 2024 年热门动漫的全面概述，可用于构建推荐系统、可视化动漫受欢迎程度和分数趋势、预测分数和受欢迎程度等。 数据集包含 22 个特征： 得分：分配给每个动漫标题的评级或分数。 人气：衡量每部...
Web前端：2022年最佳Javascript动画库.pdf
03-16
JavaScript动画库在Web前端开发中扮演着至关重要的角色，它们为网页添加了视觉吸引力和交互性，提升用户体验。以下是对2022年最佳JavaScript动画库的详细解析： 1. **Velocity JS**：Velocity JS是一个高性能的动画...
selfie2anime数据集
06-05
selfie2anime数据集，适用于图像到图像转换。 selfie2anime数据集，适用于图像到图像转换。 selfie2anime数据集，适用于图像到图像转换。selfie2anime数据集，适用于图像到图像转换。selfie2anime数据集，适用于图像...
anime.min.js
04-07
www.animejs.cn 制作所有强大的动画的js 非常 6 推荐大家学习一下 强烈推荐！！！
Anime-Filler-Manager
03-28
动漫补白经理目录介绍这是给我的IB CS IA 根据令人惊奇的社区主导的 Anime Filler Manager是一个Java应用程序，可从搜索动漫，并找出该动漫的哪些情节是填充（无需观看）。 我应该把这个叫做MyFillerList建于编程...
5.CSS学习（浮动）
最新发布
ShawLee0925的博客
07-23 209
css浮动——float特点
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 943
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 98
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 81
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 744
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
【CTFWP】ctfshow-web42
LongL_GuYu的博客
07-23 582
CTFWP，ctfshow-web42
前端性能优化--懒加载
weixin_43799793的博客
07-19 189
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
Anime Studio Pro 9 中文版全面教程：从入门到精通
"Anime Studio Pro 9中文版使用手册是一份详尽的二维动画软件使用指南，专注于快速制作动画，特别是通过其骨骼系统。手册涵盖了从基本操作到高级特性的全面教程，包括绘画、骨骼设置、图像处理、动画制作、3D元素、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值