努力学前端的素素
获得徽章 1
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
#青训营笔记创作活动#
今日学习：
引入 pixi-filters.js 库后，我们就可以用它实例化一个 ShockwaveFilter 类来完成波纹效果，具体来说，就是在点击屏幕容器的时候，会实例化ShockwaveFilter 类，其中可以随机传入振幅、波长、速度、半径等参数，目的是为了让每次点击水波效果都有些许差异。再将这个过滤器添加一个单独的数组中保存，同时还要添加到 filters 中，在 step 方法不停执行的时候，我们就要遍历这个 shockwaveFilters 数组，将它的 time 属性累加就会产生水波效果动画了。但是别忘了，它执行完之后还要记得移除掉，避免占用内存空间。
今日学习：
引入 pixi-filters.js 库后，我们就可以用它实例化一个 ShockwaveFilter 类来完成波纹效果，具体来说，就是在点击屏幕容器的时候，会实例化ShockwaveFilter 类，其中可以随机传入振幅、波长、速度、半径等参数，目的是为了让每次点击水波效果都有些许差异。再将这个过滤器添加一个单独的数组中保存，同时还要添加到 filters 中，在 step 方法不停执行的时候，我们就要遍历这个 shockwaveFilters 数组，将它的 time 属性累加就会产生水波效果动画了。但是别忘了，它执行完之后还要记得移除掉，避免占用内存空间。
展开
评论
点赞
#青训营笔记创作活动#
2.9 DAY39
今日学习：
background-clip：background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
而 background-clip: text 可以实现背景被裁剪成文字的前景色。使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
2.9 DAY39
今日学习：
background-clip：background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
而 background-clip: text 可以实现背景被裁剪成文字的前景色。使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
展开
评论
点赞
#青训营笔记创作活动#
2.8 DAY38
今日学习：
React Hooks 作为 React 库的重要补充，它使函数组件能够以新的方式编写、重用和共享 React 代码。。
随着 Hooks 开始改变开发人员编写 React 组件的方式，需要编写一套 React Hooks 的最佳实践，以便团队内成员更轻松地开发和协作。
2.8 DAY38
今日学习：
React Hooks 作为 React 库的重要补充，它使函数组件能够以新的方式编写、重用和共享 React 代码。。
随着 Hooks 开始改变开发人员编写 React 组件的方式，需要编写一套 React Hooks 的最佳实践，以便团队内成员更轻松地开发和协作。
展开
评论
点赞
#青训营笔记创作活动#
2.6 DAY37
实现图片预览/查看的关键点在于 CSS3 中的 transform 变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置 translate(x,y) 即可偏移元素位置，设置scale即可缩放元素，当然你也可以只设置 matrix 来完成上述所有操作，这涉及到矩阵变换的知识，本文使用的均是CSS提供的语法糖进行变换操作。
2.6 DAY37
实现图片预览/查看的关键点在于 CSS3 中的 transform 变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置 translate(x,y) 即可偏移元素位置，设置scale即可缩放元素，当然你也可以只设置 matrix 来完成上述所有操作，这涉及到矩阵变换的知识，本文使用的均是CSS提供的语法糖进行变换操作。
展开
评论
点赞
#青训营笔记创作活动#
2.5 DAY36
今日学习：
虚拟DOM结构就是一个对象而已，其中描述了每一层容器的特征。在beroreCreated执行的时候，DOM树并没有生成。
虚拟DOM存在的意义就是，减少真实DOM结构的操作，对于浏览器来说，减少开销，提高性能。
2.5 DAY36
今日学习：
虚拟DOM结构就是一个对象而已，其中描述了每一层容器的特征。在beroreCreated执行的时候，DOM树并没有生成。
虚拟DOM存在的意义就是，减少真实DOM结构的操作，对于浏览器来说，减少开销，提高性能。
展开
评论
点赞
#青训营笔记创作活动#
2.4 DAY:35
今日学习：
引导页核心功能其实就两点：
一是 高亮部分
二是 引导部分
而这两点其实真的不难实现，无非就是 引导部分 跟着 高亮部分 移动，并且添加一些简单的动画或过渡效果即可，也分为 蒙层引导 和 无蒙层引导，这里介绍相对比较复杂的 蒙层引导。
高亮部分 通过 el.cloneNode(true) 复制对应目标元素节点，并将克隆节点添加到蒙层上
通过 margin（或 tranlate、position 等）实现克隆节点的位置与目标节点重合
引导部分 通过 position: fixed 实现定位效果，并通过动态修改 left、top 属性实现引导弹窗跟随目标移动
过渡动画 通过 transition 实现位置的平滑移动
页面 位置/内容 发生变化时（如：resize、scroll 事件），需要重新计算位置信息
2.4 DAY:35
今日学习：
引导页核心功能其实就两点：
一是 高亮部分
二是 引导部分
而这两点其实真的不难实现，无非就是 引导部分 跟着 高亮部分 移动，并且添加一些简单的动画或过渡效果即可，也分为 蒙层引导 和 无蒙层引导，这里介绍相对比较复杂的 蒙层引导。
高亮部分 通过 el.cloneNode(true) 复制对应目标元素节点，并将克隆节点添加到蒙层上
通过 margin（或 tranlate、position 等）实现克隆节点的位置与目标节点重合
引导部分 通过 position: fixed 实现定位效果，并通过动态修改 left、top 属性实现引导弹窗跟随目标移动
过渡动画 通过 transition 实现位置的平滑移动
页面 位置/内容 发生变化时（如：resize、scroll 事件），需要重新计算位置信息
展开
评论
点赞
#青训营笔记创作活动#
2.3 DAY34
今日学习：
Javascript 的逻辑或 || 的短路运算有时候可以用来代替一些比较简单的 if else
逻辑或 || 的短路运算：若左边能转成true，返回左边式子的值，反之返回右边式子的值。
很多时候简单的一些判断我们都可以使用三元运算符去替代 if else，这里只推荐 一层 三元运算符，因为多层嵌套的三元运算符也不具备良好的可读性。
2.3 DAY34
今日学习：
Javascript 的逻辑或 || 的短路运算有时候可以用来代替一些比较简单的 if else
逻辑或 || 的短路运算：若左边能转成true，返回左边式子的值，反之返回右边式子的值。
很多时候简单的一些判断我们都可以使用三元运算符去替代 if else，这里只推荐 一层 三元运算符，因为多层嵌套的三元运算符也不具备良好的可读性。
展开
评论
点赞