- 不可思议的纯 CSS 实现鼠标跟随效果
直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样: [图片] 通常而言,CSS 负责表现,JavaScript 负责行为。而鼠标跟随这种效果属于行为,要实现通常都需要借助 JS。 当然,本文的重点,就是介绍如何在不借助 JS 的情况下使用 CSS 来模拟实现一些鼠标跟随的行为动画效果。 原理 以上面的 Demo 为例子,要使用 CSS 实现鼠标跟随,最重要的一点就是: 如何实时监测到当前鼠标处于何处? OK,其实很多 CSS 效果,都离不开 障眼法 二字。要监测到当前鼠标处于何处,我们只需要在页面上铺满元素即可: 我们使用 100 个元素,将整个页面铺满,hover 的时,展示颜色,核心 SCSS 代码如下: [代码]<div class="g-container"> <div class="position"></div> <div class="position"></div> <div class="position"></div> <div class="position"></div> ... // 100个 </div> [代码] [代码].g-container { position: relative; width: 100vw; height: 100vh; } .position { position: absolute; width: 10vw; height: 10vh; } @for $i from 0 through 100 { $x: $i % 10; $y: ($i - $x) / 10; .position:nth-child(#{$i + 1}) { top: #{$y * 10}vh; left: #{$x * 10}vw; } .position:nth-child(#{$i + 1}):hover { background: rgba(255, 155, 10, .5) } } [代码] 可以得到这样的效果: [图片] 好的,如果把每个元素的 hover 效果去掉,那么这个时候操作页面,其实是没有任何效果的。但同时,通过 [代码]:hover[代码] 伪类,我们又是可以大概得知当前鼠标是处于页面上哪个区间的。 好继续,我们再给页面添加一个元素(圆形小球),将它绝对定位到页面中间: [代码]<div class="g-ball"></div> [代码] [代码].ball { position: absolute; top: 50%; left: 50%; width: 10vmax; height: 10vmax; border-radius: 50%; transform: translate(-50%, -50%); } [代码] 最后,我们借助 [代码]~[代码] 兄弟元素选择器,在 hover 页面的时候(其实是 hover 一百个隐藏的 div),通过当前 hover 到的 div,去控制小球元素的位置。 [代码]@for $i from 0 through 100{ $x: $i % 10; $y: ($i - $x) / 10; .position:nth-child(#{$i + 1}):hover ~ .ball { top: #{$y * 10}vh; left: #{$x * 10}vw; } } [代码] 至此,一个简单的纯 CSS 实现鼠标跟随的效果就实现了,方便大家理解,看看下面这张图就明白了: [图片] 完整的DEMO,你可以戳这里看看:CodePen Demo – CSS实现鼠标跟随 存在的问题 就上面的 Demo 来看,还是有很多瑕疵的,譬如 精度太差 只能控制元素运动到 div 所在空间,而不是精确的鼠标所在位置,针对这一点,我们可以通过增加隐藏的 div 的数量来优化。譬如将 100 个平铺 div 增加到 1000 个平铺 div。 运动不够丝滑 效果看起来不够丝滑,这个可能需要通过合理的缓动函数,适当的动画延时来优化。 燥起来吧 嗯。原理掌握了,下面我们来看看,使用这个技巧还能鼓捣出什么有意思的效果。 CSS鼠标跟随按钮效果 一开始,我在 CodePen 上看到了下面这个效果,使用了 [代码]SVG + CSS + JS[代码] 实现,我就想着,仅用 CSS,能不能 copy 一下: [图片] CodePen Demo – Gooey mouse follow 好吧,理想很丰满,现实很骨感。仅仅使用 CSS,还是有诸多限制。 但是我们还是可以使用上述介绍的方法实现鼠标跟随 利用 CSS 滤镜 [代码]filter: blur() contrast()[代码] 模拟元素融合,具体可以看看这篇文章:你所不知道的 CSS 滤镜技巧与细节 好,看看仅仅使用 CSS 的破产版模拟效果: [图片] 有点太太太奇怪了,可以稍微收敛点效果,通过调整颜色,滤镜强度(就是各种尝试…),得到一个稍微好一丢丢丢的类似效果: [图片] Demo 戳我,CodePen Demo – CSS鼠标跟随按钮效果 全屏鼠标跟随动画 OK,继续,下面来点更炫的。嗯,就是那种华而不实的。😅 如果我们控制的不止一个元素,而是多个元素。多个元素之间的动画效果再设定不同的 transition-delay ,顺序延迟运动。哇哦,想想就很激动。譬如这样: [图片] CodePen Demo – 鼠标跟随动画 PURE CSS MAGIC MIX 如果我们能更有想象力一点,那么可以再碰撞出多一点的火花: [图片] 这个效果是我非常喜欢的一位日本 CodePen 作者 Yusuke Nakaya 的作品,源代码: Demo – Only CSS: Water Surface 鼠标跟随指示 当然,不一定要指示元素运动。使用 div 铺满页面捕捉元素当前位置的技巧,还可以运用在其他一些效果上,譬如指示出鼠标运动轨迹: [图片] 默认的铺满背景的 div 的 [代码]transition-duration: 0.5s[代码] 当 hover 到元素背景 div 的时候,改变当前 hover 到的 div 的 [代码]transition-duration: 0s[代码],并且 hover 的时候赋予背景色,这样当前 hover 到的 div 会立即展示 当鼠标离开 div,div 的 [代码]transition-duration[代码] 变回默认状态,也就是 [代码]transition-duration: 0.5s[代码],同时背景色消失,这样被离开的 div 的背景色将慢慢过渡到透明,造成虚影的效果 CodePen Demo – cancle transition 最后 其实还有很多有意思的用法,感兴趣的同学可以自己动手,更多的去尝试,组合。 经常有人会问我,这些奇奇怪怪的用法实际业务中用得上吗?到底有用没用。额,我的看法是也许业务中真的用不上或者应用场景极为有限,但是多了解一些,能在遇到问题的时候多点选择,多一些思考的空间,更好的发散思维,至少是无害吧。 更多你可能想都想不到的有趣的 CSS 你可以来这里瞧瞧: CSS-Inspiration – CSS灵感 更多精彩 CSS 技术文章汇总在我的 Github – iCSS ,持续更新,欢迎点个 star 订阅收藏。 好了,本文到此结束,希望对你有帮助 😃 如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
2019-03-08 - 深入解析JS的异步机制
1. JavaScript定义 JavaScript 是一种单线程编程语言,这意味着同一时间只能完成一件事情。也就是说,JavaScript 引擎只能在单一线程中处理一次语句。 优点:单线程语言简化了代码编写,因为你不必担心并发问题,但这也意味着你无法在不阻塞主线程的情况下执行网络请求等长时间操作。 缺点:当从 API 中请求一些数据。根据情况,服务器可能需要一些时间来处理请求,同时阻塞主线程,让网页无法响应。 2. 异步运行机制 CallBack,setTimeOut,ajax 等都是通过**事件循环(event loop)**实现的。 2.1 什么是Event Loop? 主线程运行的时候,产生堆(heap)和栈(stack),栈中的代码调用各种外部API,它们在"任务队列"中加入各种事件(click,load,done)。只要栈中的代码执行完毕,主线程就会去读取"任务队列",依次执行那些事件所对应的回调函数。 2.2 流程整体示意图 [图片] 2.3 总结异步运行到整体机制 主线程在运行的时候,将产生堆(heap)和栈(stack),栈中的代码会调用各种外部API,它们将在"任务队列"中根据类型不同,分类加入到相关任务队列中,如各种事件等。只要栈中的代码执行完毕,主线程就会去读取"任务队列",根据任务队列的优先级依次执行那些事件所对应的回调函数。这就是整体的事件循环。 2.4 任务队列的优先级 微任务队列中的所有任务都将在宏队列中的任务之前执行。也就是说,事件循环将首先在执行宏队列中的任何回调之前清空微任务队列。 ** 举例: ** [代码] console.log('Script start'); setTimeout(() => { console.log("setTimeout 1"); }, 0); setTimeout(() => { console.log("setTimeout 2"); }, 0); new Promise ((resolve, reject) => { resolve("Promise 1 resolved"); }) .then(res => console.log(res)) .catch(err => console.log(err)); new Promise ((resolve, reject) => { resolve("Promise 2 resolved"); }) .then(res => console.log(res)) .catch(err => console.log(err)); console.log('Script end'); [代码] 运行结果是: Script start Script end Promise 1 Promise 2 setTimeout 1 setTimeout 2 通过上述例子可以看到无论宏队列的位置在何方,只要微队列尚未清空,一定会先清空微队列后,在去执行宏队列。下面介绍微队列任务中比较典型的几个API,通过相关举例,让你更深入理解JS的异步机制。 3. 微任务队列 3.1 Promise(ES6) Promise,就是一个对象,用来传递异步操作的消息。 3.1.1 基础用法: [代码] var promise = new Promise(function(resolve, reject) { //异步处理逻辑 //处理结束后,调用resolve返回正常内容或调用reject返回异常内容 }) promise.then(function(result){ //正常返回执行部分,result是resolve返回内容 }, function(err){ //异常返回执行部分,err是reject返回内容 }) .catch(function(reason){ //catch效果和写在then的第二个参数里面一样。另外一个作用:在执行resolve的回调时,如果抛出异常了(代码出错了),那么并不过报错卡死JS,而是会进入到这个catch方法中,所以一般用catch替代then的第二个参数 }); [代码] 缺点: 无法取消 Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。再次,当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。 优点: Promise能够简化层层回调的写法,Promise的精髓是“状态”,用维护状态、传递状态的方式来使得回调函数能够及时调用,它比传递callback函数要简单、灵活的多。 3.1.2 用法注意点 - 顺序: [代码] new Promise((resolve, reject) => { resolve(1); console.log(2); }).then(r => { console.log(r); }); [代码] 运行结果是: 2 1 说明: 立即 resolved 的 Promise 是在本轮事件循环的末尾执行,总是晚于本轮循环的同步任务。也就是resolve(1)和console.log(2)是属于同步任务,需要全部执行完同步任务后,再去循环到resolve的then中。 3.1.3 用法注意点 - 状态: [代码] const p1 = new Promise(function (resolve, reject) { setTimeout(() => reject(new Error('fail')), 3000); }); const p2 = new Promise(function (resolve, reject) { setTimeout(() => resolve(p1), 1000); }); const p3 = new Promise(function (resolve, reject) { setTimeout(() => resolve(new Error('fail')), 1000); }); p2 .then(result => console.log("1:", result)) .catch(error => console.log("2:",error)); p3 .then(result => console.log("3:", result)) .catch(error => console.log("4:",error)); [代码] 运行结果是: 3: Error: fail at setTimeout (async.htm:182) 2: Error: fail at setTimeout (async.htm:174) 说明: p1是一个 Promise,3 秒之后变为rejected。p2和p3的状态是在 1 秒之后改变,p2 resolve方法返回的是 p1, p3 resolve方法返回的是 抛出异常。但由于p2返回的是另一个 Promise,导致p2自己的状态无效了,由p1的状态决定p2的状态。所以后面的then语句都变成针对后者(p1)。又过了 2 秒,p1变为rejected,导致触发catch方法指定的回调函数。 而p3返回的是自身的resolve,所以触发then中指定的回调函数。 3.1.4 用法注意点 - then链的处理: [代码] var p1 = p2 = new Promise(function (resolve){ resolve(100); }); p1.then((value) => { return value*2; }).then((value) => { return value*2; }).then((value) => { console.log("p1的执行结果:",value) }) p2.then((value) => { return value*2; }) p2.then((value) => { return value*2; }) p2.then((value) => { console.log("p2的执行结果:",value) }) [代码] 运行结果是: p2的执行结果: 100 p1的执行结果: 400 说明: p2写法中的 then 调用几乎是在同时开始执行的,而且传给每个 then 方法的 value 值都是 100。而p1中写法则采用了方法链的方式将多个 then 方法调用串连在了一起,各函数也会严格按照 resolve → then → then → then 的顺序执行,并且传给每个 then 方法的 value 的值都是前一个promise对象通过 return 返回的值。 ###3.1.4 用法注意点 - catch的处理: [代码] var p1 = new Promise(function (resolve, reject){ reject("test"); //throw new Error("test"); 效果同reject("test"); //reject(new Error("test")); 效果同reject("test"); resolve("ok"); }); p1 .then(value => console.log("p1 then:", value)) .catch(error => console.log("p1 error:", error)); p2 = new Promise(function (resolve, reject){ resolve("ok"); reject("test"); }); p2 .then(value => console.log("p2 then:", value)) .catch(error => console.log("p2 error:", error)); [代码] 运行结果是: p2 then: ok p1 error: test 说明: Promise 的状态一旦改变,就永久保持该状态,不会再变了。不会即抛异常又会正常resolve。 3.2 async/await(ES7) 3.2.1 async基础用法: async 用于申明一个 function 是异步的,返回的是一个 Promise 对象。 [代码] async function testAsync() { return "hello async"; } var result = testAsync(); console.log("1:", result); testAsync().then(result => console.log("2:", result)); async function mytest() { //"hello async"; } var result1 = mytest(); console.log("3:", result1); [代码] 运行结果是: 1: Promise {<resolved>: “hello async”} 3: Promise {<resolved>: undefined} 2: hello async 说明: async返回的是一个Promise对象,可以用 then 来接收,如果没有返回值的情况下,它会返回 Promise.resolve(undefined),所以在没有 await 的情况下执行 async 函数,它会立即执行,并不会阻塞后面的语句。这和普通返回 Promise 对象的函数并无二致。 3.2.2 await基础用法: await 只能出现在 async 函数中,用于等待一个异步方法执行完成(实际等的是一个返回值,强调 await 不仅仅用于等 Promise 对象,它可以等任意表达式的结果)。 [代码] function getMyInfo() { return Promise.resolve("hello 2019!"); } async function testAsync() { return "hello async"; } async function mytest() { return Promise.reject("hello async"); } async function test() { try { const v1 = await getMyInfo(); console.log("getV1"); const v2 = await testAsync(); console.log("getV2"); const v3 = await mytest(); console.log(v1, v2, v3); } catch (error) { console.log("error:", error); } } test(); [代码] 运行结果是: getV1 getV2 error: hello async 说明: await等到的如果是一个 Promise 对象,await 就忙起来了,它会阻塞后面的代码,等着 Promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果。 放心,这就是 await 必须用在 async 函数中的原因。async 函数调用不会造成阻塞,它内部所有的阻塞都被封装在一个 Promise 对象中异步执行。 3.2.3 async/await的优势: 很多情况下,执行下一步操作是需要依赖上一步的返回结果的,如果当嵌套层次较多的时候,(举例3层的时候): [代码] const getRequest = () => { return promise1().then(result1 => { //do something return promise2(result1).then(result2 => { //do something return promise3(result1, result2) }) }) } [代码] 从上例可以看到嵌套内容太多。此时如果用async写法,可写成如下: [代码] const getRequest = async () => { const result1 = await promise1(); const result2 = await promise2(result1); return promise3(result1, result2); } [代码] 说明: async / await 使你的代码看起来像同步代码,它有效的消除then链,让你的代码更加简明,清晰。 总结:以上就是对JS的异步机制及相关应用的整体总结,如有需要欢迎交流~
2019-03-12