从网易《初心》H5里学到的一些

这篇文章可以作为之前写的一篇《技能之H5》的补充知识。

1、拖放

HTML5 标准的组成部分。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

draggable属性默认是开启的，如果不想被拖放，需要设置draggable属性为false，以防拖动，比如这个h5是这么设置的：

2、图片素材

图片素材可以用拼成一整张，以减少服务器接口调用的次数

3、Gif的用处

很多效果可以借助gif来实现，播放gif来实现三维效果，而不用真的加载个模型，在threejs里操作。

4、glTF格式的文件

是一种可以减少3D格式中与渲染无关的冗余数据并且在更加适合OpenGL簇加载的一种3D文件格式。threejs可加载，gltf文件长这样：

5、“扯”的实现：

这个无码图是这样的：

下面这些就是可恶的拖不完的马赛克：

实现逻辑很简单：就是把上面这些小图片叠在无码图上。

6、光影特效

一些光影特效可以用透明的png图片来实现，比如下面这个素材：

7、一个按钮的实现：

用了几张图片素材，通过点击事件来控制图片的透明度、位置：opacity、top、left、width等。

8、“释怀”是一个canvas实现的：

9、拉链的特效

是一张张序列帧图片组成的：

以上为全文内容。

至今为止，已经更新的各项技能：

使用Echarts制作可视化图表

技能之谷歌Chrome爬虫

技能之H5

技能之AR技术入门

5个用法，关于Gif。

技能之用iMovie制作预告片

本号发布内容主要为设计&科技方面｜设计+科技=自在园实验室。