zhix

本文不会讲太多四元数公式的推导过程，重点讲讲几个接口的使用和个人理解。 平滑插值。 (矩阵基本没有，欧拉角可以做插值，但可能遭遇万向锁的问题) 快速连接和角位移求逆。 能和矩阵快速转换。 仅用四个数。（矩阵9个，欧拉角3个） ~~难以理解，学会了看起来很牛逼。~~ 四元数可能不…

很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline...... 之前都是在SF上发的文章, 掘金是第一次。 所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节。 在我自己写完这篇文章的时候, 才觉得CSS确实能…

首先要给3D的元素准备一个“舞台”，因为页面本身是平面的，并不能展示出3D的效果。 通过设置透视距离，就相当于把这个区域变成了一个能表现出近大远小的“3D舞台”，在其内部就可以去做3D效果了。 舞台搭好，演员上场，在container中加入一个盒子用来做正方体。设置宽高并定位到…

文章首发自本人博客 hcysun.me。 前不久开源了一个插件化移动端运动效果库 finger-mover，说到运动效果，不得不提到CSS3的 transform，也就是变换。这篇文章概括了在实现 finger-mover 时对 transform 的理解与总结。 注：文中的图…

之前遇到过一个面试的机试题，就是用画布绘制形状，并且支持缩放、拖拽功能。现在有点时间就分享一下我是如何一步一步完成这个功能的。看这篇信息之前最好先去看一下canvas 的 api，canvas API 穿梭机。 这里写一个 名叫 chart 的类，在 构造器 construct…

实现一个 canvas 拖拽、缩放、旋转的效果，如下效果图。 统一使用 typescript 来编写，在面对状态操作复杂的流程， ts 提供了状态标注，类型提示等。便于我们维护和梳理流程思路。比如类型标注提供了类似注释的功能，将对象描述清楚的同时，在我们使用相关属性或方法都会有…