ry928330
ry928330
```ts // 你的答案 type First = T extends [infer FirstEle, ...infer RestEle] ? FirstEle : never; ```
```ts // 你的答案 type MyReadOnly = { readonly [Key in keyof T]: T[Key] extends object ? MyReadOnly : T[Key] } ```
有节奏的音乐跳动
### 写在最前:  最近在做一些新技术的调研,不巧在掘金上看到有人分享系列关于h5技术的运用,主要包括一些音频,媒体流,用户位置,环境光等H5核心设备接口的运用,所以自己准备照着那个目录动手做一番。这篇就是关于音频对象AudioContext做的小小DEMO,当然看了下别人的DEMO了,希望各位读者喜欢~  照例,贴下[我的博客](https://github.com/ry928330/blog)地址,别忘了去点赞哈~ ### 成果展示: ![audio](https://user-images.githubusercontent.com/10793210/34406821-e9b30d94-ebf5-11e7-8462-4c3e00e865e1.gif) ### Git地址: https://github.com/ry928330/web-audio.git ### 功能说明: 1.根据你在页面载入的音乐,以可视化的方式展示音乐的律动; 2.点击模式切换,以时域波形的方式展示当前音乐的节奏。 ### 实现细节:  整个DEMO其实比较简单,主要就是熟悉一些跟[Web Audio](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API)相关的API,所以讲解的时候我会介绍下本次DEMO用到的一些API的使用方式。还有,本次DEMO的一个难点就是你看到的条形图上顶部小方块儿的下落特效,这个我也会做下解释。页面中所看到的动画都是基于canvas绘制,这个我就不多说了。接下来,进入主题。 > 创建基于audio的语音环境,代码如下: ``` window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext; var audioContext...
### 写在最前:  对于移动端页面的开发自己很早就想做下简单的总结了,但是来感觉不知道该从何说起,知道有一天看了两篇网上一位作者的文章(后面资源里面会给出链接),觉得写得真的是很好,但是还有一些问题我不是很清楚,所以自己也查阅了相关的文献,结合前面那位作者的一些思路,写下了这篇总结。当然,有说的不对的地方,还望指出,谢谢。 ### 准备工作:  照例,贴下[我的博客](https://github.com/ry928330/blog)地址,别忘了去点赞哈~ > 两个像素:设备像素+css像素 - 设备像素:绝对单位,设备像素即设备的物理像素,对于每个设备来说,其设备像素是固定的,它是每个设备能控制显示的最小单位。通常我们所说的1920x1080像素分别率就用的是设备像素。 - css像素:适用于web编程,是前端开发在描述css样式时经常用到的像素单位。比如,设置某个div的宽度为width:200px,这个就是css像素,是一种抽象概念,实际上并不存在。 > 页面的缩放: - 当用户放大或者缩小页面时,改变的是css像素,而设备像素不会发生改变。如:页面中一个div,它的宽度是200px,当用户操作页面,放大两倍,此时一个css像素的面变成了4个设备像素的面积:宽放大2倍x高放大两倍 - 页面缩放比例(zoom level)= screen.width / window.innerWidth (一般情况下可以这么计算) > 设备像素比(DPR): - 在页面缩放比为1的情况下,设备像素比(DPR) = 设备像素个数 /...
# 简单的立体旋转特效DEMO实现 ### 写在最前:  前两天我们这边接到公司做教育那块的一个活儿,要做一个比较炫酷的3D旋转特效,拿到网页一看,别人是用Three.js去实现的,确实比较狂拽。但是我对这个只是了解一点点,还不到能用它做出成熟DEMO的地步(学习的道路任重而道远啊...)。所以老大建议用css transform特性加上perspective试试。嗯,活儿都来了,上呗。所以有了这边分享的诞生,但是我的实现肯定比不了Three那么炫酷,将就着看吧,里面有很多数学方面的推导是我请教部门清华的同事完成的,再次感谢他,下面我们来看看吧。  对了,惯例,[我的博客](https://github.com/ry928330/blog)点赞哈~ ### 成果展示: ![](https://user-gold-cdn.xitu.io/2017/11/4/f6f7e4b4c2e44442d25852373ccef21c) ### Git地址: https://github.com/ry928330/transformConversion.git ### 功能说明: 1. 以屏幕中心为球心,屏幕横向为X轴,纵向为Y轴,垂直屏幕为Z轴,横向滑动屏幕,页面中的图标会绕着Y轴旋转。纵向滑动,图标会绕着X轴旋转,斜着滑,图标就会斜着转。 2. 点击页面中任意一个图标,被点中的图标会旋转到页面的中间(受perspective属性的影响,这个中间是一个近似的中间的位置) ### 实现细节:  按照功能我们从两个方面讲解DEMO的实现,一个是滑动屏幕,图标相应的滚动,另一个是点击图标,旋转到某一正确的位置。 > 滑屏转动图标:  因为画图比较麻烦,所以我借助草稿一起来分析下图标的转动,如下图所示: ![](https://user-gold-cdn.xitu.io/2017/11/4/3d74f68af7efb7c87e471b1ac7221157) 从图中我们可以清楚的得到绕X、Y轴分别旋转后所在位置的X、Y、Z坐标,但是我要想要斜着滑动,的话就存在空间中的点同时绕X和Y轴的旋转,此时我们只需要要讲两个旋转矩阵相乘即可,即AB或者BA,如果是前者,表示先绕X轴旋转,然后再绕Y轴旋转,如果是后者则表示先绕Y轴旋转,再绕X轴旋转。因为每转动一个很小的角度我们都计算一下空间点的位置,所以你看不出先后顺序,给人的感觉是同时进行的。这里给出代码如下: ``` /** *...
# canvas之自定义头像功能实现 ### 写在最前:   前两天老大跟我说老虎官网上那个自定义头像的功能是flash实现的,没有安装过的还得手动去“允许”falsh的运行。所以让我用canvas实现一个一样的功能,嘿嘿,刚好最近也在研究canvas,所以欣然答应(其实,你没研究过难道就不答应么,哈哈哈哈哈~)   对了,大佬们记得给[我的博客](https://github.com/ry928330/blog.git)点赞,要星星哦~ ### 成果展示: ![](https://user-gold-cdn.xitu.io/2017/9/28/0ccac6cf73d1ad2ea6e4712a000a011a) http://note.youdao.com/noteshare?id=74f38b8133da50a221345f3cdcf33782 ### Git地址: https://github.com/ry928330/portraitDIY.git ### 功能说明: 1. 拖拽左侧小方框,或者是鼠标放在小方框右下角,点击拉伸方框,方框覆盖部分的图片被自动截取下来,然后再在右侧的多个容器里面重绘。 2. 输入宽高,自定义你需要订制的头像大小,目前只支持宽高相同的头像图片。 ### 实现细节:   因为你要对图片所在的区域进行截图,所以你得制作一张canvas,盖在图片所在的区域。这里,我们给出了一个函数,根据传入的DOM里面元素的类名创建相同位置的canvas,盖在原来的DOM元素上面: ``` function createCanvasByClassName(tag) { var canvasInitialWidth = $('.'...
# canvas系列三之烟花效果实现 ### 写在最前:   唉,时间过得真是快啊,距离上次写demo已经是半个月前了,原来想得是每周写一篇的,但是前段时间工作微忙,所以就没有demo产出(嘿嘿,偷偷的给自己找了个借口,还不知道以后能不能坚持产出呢......)。这次写的还是canvas的东西,利用canvas写了一个燃放烟花的demo。感觉差不多再写一两个demo我就会对这个东西做一下最后的总结吧,毕竟老写demo也不是个事儿,总得总结下canvas这个东东。好了,废话不多说,我们直入主题   对了,大佬们记得给[我的博客赞](https://github.com/ry928330/blog.git)点赞,要星星哦~ ### 成果展示 ![](https://user-gold-cdn.xitu.io/2017/9/22/e01fbe91605047ef763eb908df9fd2f3) http://note.youdao.com/noteshare?id=3e61d6236fd43a06cd47a62796901ca6 ### Git地址: ### 实现思路:   照例,我们还是用一种抛出问题的方式给出该次烟花demo的实现过程,小伙伴们在阅读的时候也可以通过这些问题自己想象可以怎么实现。 - 烟花的产生与消失,主要就是怎么来实现那种流星划过般的拖尾效果? - 烟花消失后,如何产生爆炸后四散的效果? - 四散的花火如何产生那种受"重力"影响而降落的效果以及花火的消失?   基本上,你做到了上述的三步,你的烟花效果就算是做出来了,哈哈,很简单吧。下面,我们逐个来解决。 ### 详细说明: > 烟花的产生于消失:   看过我之前[canvas系列之一](https://github.com/ry928330/screenShot.git)的伙伴们,或者对canvas动画有了解的同学肯定知道在canvas里面绘制的一个元素它是如何动起来的吧。我们是不是不断利用clearReact函数去帮助我们清除前一帧的动画。其实,我们如果不完全清除前一帧的动画,而是用一个比较透明的颜色去“盖住”呢?哈哈哈,是不是很简单,其实就一句代码: ``` ctx.fillStyle =...
```ts type MyOmit = {[Key in keyof T as Key extends K ? never : Key]: T[Key]} ```