NotionNext BLOG https://blog.ykxkykx.cn/ 这是一个由NotionNext生成的站点 Sun, 19 May 2024 20:29:30 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed zh-CN All rights reserved 2024, 游方 <![CDATA[简单的网页数字变更动画实现]]> https://blog.ykxkykx.cn/article/91657089 https://blog.ykxkykx.cn/article/91657089 Fri, 13 Dec 2019 00:00:00 GMT

分析拆解

数字变更的整个周期，主要分为三个状态。
  1. 数字的初始状态（即原始值
  1. 数字变化中的状态（原始值到新赋值之间的变动
  1. 数字的结束状态（即新赋值
状态的变化可能性
  1. 数字一次性由少变到多，或者由多变到少
  1. 数字变化状态中，多次改变结束状态的值
这里解释下两种变化可能性，第一种就是说，数字的变化从少到多或者从多到少，都是一次性变化，中间不会有任何干扰。而第二种，打个比方，初始值为1，新赋值为10，数字在从1到10的渐变中，还没有变化完全，仅仅变到了7的时候，就被用户再一次改变了新赋值为5或者20（即可能比第一个新赋值低，也可能高）。这个时候，应该顺应此时已经变化到的数值7，以7为起点，向着5或者20去渐增或者渐减。不然，重新以1为起点开始向5或者20进行变化，就会有违和感。而顺应已经变化到的值进行变化，即便中途进行了再多次数值变更，整体的变化仍是流畅自然的。

代码实现

注意事项

  1. 进行变化的数值变量，本身不能是一个单纯的基本变量，而应该存储在一个对象中。
  1. 此方法需要一个map来进行临时的计时器数据变量保存
 
]]> <![CDATA[cesium超速入门总结]]> https://blog.ykxkykx.cn/article/d8b922e0 https://blog.ykxkykx.cn/article/d8b922e0 Mon, 16 Dec 2019 00:00:00 GMT
由于工作原因，做了一些有关 cesium 的三维地图开发。基于我所用到的功能，于此做一个入门总结，并记录下曾踩下的坑。初学者可依照以下整个完整流程，复现功能内容。做此记录时，cesium 版本为 ^1.64.0
注：这里虽然利用了 npm 或 yarn 来快速安装 cesium ，但实际的demo只需直接引用文件，不需要打包

测试用demo路径结构描述

准备工作

开发环境

建议使用 VSCode 进行开发，并安装插件 Live Server，用于启动此 index.html 文件

安装cesium

index.html文件初始化

初始界面预览

notion image

常用初始化配置

以下内容不会给出完整代码，但会给出完整核心代码片段，读者对照初始化 index.html 自行增添或者更改即可运行，若出现误差，可尝试把 cesium 版本调整到 ^1.64.0。以下 js 代码均直接在 script 标签全局命名空间中出现。

隐藏界面小控件

通过初试配置，将界面上默认显示的控件隐藏，以便进行自定义
仅仅是如此设置，底部还剩一段图片加文字信息，这里可以通过 css 手动隐藏。在 style 中添加如下代码。
如此，一个干净完整的地球便出现了
notion image

去掉光圈

如果有人觉得地球外层的光圈太扎眼，可以通过以下方式去除
效果如下
notion image

聚焦框和信息框的隐藏

默认情况下，如果左键双击 cesium 地图上的实体内容，camera 视角会自动聚焦过去，并显示自带的聚焦框以及实体的信息框
 
默认不显示聚焦框和信息框
取消默认的左键双击实体效果，便于自定义其他交互

地形加载

初始化时默认加载地形
后期手动添加地形
坑：此方法加载地形时，加载的是 cesium 自己发布的地形服务。一旦 cesium 官方版本更新，则会导致地形加载失败（默认加载的底图也是如此）。浏览器控制台会报Token过期的错，但是实际上就算你更改了 Cesium.Ion.defaultAccessToken 的值仍然不能解决此问题。正确操作是，升级项目的 cesium 版本即可。最好的方法是，发布自己的地形以及底图服务，并加载。这样就不会受到 cesium 版本更新的影响。

底图服务加载

imageryProvider 除了下面示例的 ArcGisMapServerImageryProvider 以外，还有分别用于加载其他不同框架底图服务的构造函数，具体内容，可在官方文档中搜索 imageryProvider 查询。
初始化默认加载其他底图
后期手动添加底图
注：此坑与地形等同

视角转换

camera 相关的所有操作在此处查看

较为常用功能

以下内容，涉及到具体私人发布使用的服务部分，只给出最为核心的代码片段，如何实现。需要读者自行发布或寻找服务进行测试

geojson的加载使用

针对高精度倾斜摄影加载及显示效果优化

倾斜摄影数据以 3dtile 的形式加载出来，通常情况下，只需要有 url 就足够了。以下参数是由于倾斜摄影数据总数据太大，清晰度过高，从而调节参数进行性能优化。这不是一个通用的解决方案，但可以以此为参考。

限制camera高度的上下限

事件绑定

通过Cartesian2获得经纬度的方式

地图二三维转化

 
]]> <![CDATA[复制页面内容添加版权声明]]> https://blog.ykxkykx.cn/article/8181269a https://blog.ykxkykx.cn/article/8181269a Fri, 18 Jan 2019 00:00:00 GMT
现如今，如果你要直接复制简书、掘金、CSDN 等网站上文章的内容，当你粘贴的时候就会发现，复制的文字中多了几行版权信息。
通常是这样的内容：
作者：【作者名】 链接：【当前网页链接】 来源：【站点名】 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处
实现方式如下：
参考资料：
 
]]> <![CDATA[费曼技巧问答式总结]]> https://blog.ykxkykx.cn/article/92d2159c https://blog.ykxkykx.cn/article/92d2159c Wed, 16 Jan 2019 00:00:00 GMT

费曼技巧是什么？

费曼技巧，是一种通过模拟教育他人，来判断自己是否真的掌握了某项知识的学习技巧。

为什么费曼技巧有着这样的作用？

因为费曼技巧符合大脑的认知规律。

怎样具体应用费曼技巧？

notion image

实践费曼技巧后，掌握知识的表现是什么？

能够用极其简单具象的东西，来回答高度抽象的问题。

费曼技巧可以用来干什么？

学习任何知识，技能，深入理解其本质。
 
 
 
]]> <![CDATA[hexo博客实现url锚点与markdown分级标题同步]]> https://blog.ykxkykx.cn/article/a82e8cf8 https://blog.ykxkykx.cn/article/a82e8cf8 Tue, 19 Mar 2019 00:00:00 GMT

起因

有的网页页面，可以在页面滚动的时候，给 url 自动添加或者改变锚点，锚点内容即为当前页面正在显示的内容的分级标题。我希望自己的博客页面也能有这样的效果，这样的话，复制 url 的时候就可以带上锚点，打开后就能快速定位到需要查看的内容处。

分析

要实现这个功能，做到以下两点就可以了
  1. 判断位于当前浏览器视口顶部的元素属于哪一个分级标题的内容
  1. 将当前分级标题的 id 名作为锚点添加或修改到 url 尾部
打开控制台，可以看到，hexo next 的主题，通过 markdown 渲染出的内容，包含在 class 为 post-block 的元素中。
notion image
而所有的分级标题渲染出来后，会依次对应 html 的 h1 到 h6 标签，且 id 名与标题等同。（不过空格会被替换为 - )
notion image

实现

判断分级标题的内容

我们可以通过 Element.getBoundingClientRect().top 来获取一个 dom 元素的顶部与视口顶部的距离，如果得到一个负值，那么证明这个元素是在视口之上、或者正处于视口中。我们要的就是处于视口上的那个元素。获取它的 id 即可。

修改 URL，添加或者改变锚点内容

利用 HTML5 的历史记录 API，history.replaceState，它可以修改当前历史记录项，改变 url 信息，但却不会引起 url 跳转。

代码

]]>