js做一个简单的特效 js特效制作教程 收藏 0

手把手教你用Javascript制作随机星星效果图

一、前言

在浏览一些图片网站的时候，经常会看到很多的漂亮的星空图，比如，下面的图片。其实这种星星图片的效果，也可以通过html+css样式和js的方式来实现。今天教大家如何实现星星图的效果。

二、项目准备

软件：Dreamweaver

三、实现的目标

每次刷新产生随机的星星个数。显示画布上。

四、项目实现1. 创建canvas画布2. 添加css样式。

给canva 画布加上边框，方便观察。

3.添加js样式3.1 设置canvas画布大小 ，定义需要变量。3.2 产生随机圆。3.3 定义draw()方法，通过画星星公式，将圆形转换成星星状 for 循环产生随机位置星星。

如何画星星？（公式解析）（图片来源百度）

星星有内切圆和外切圆，每两个点之间的角度是固定的，因此可得到星星的每个点的坐标，画出星星。

3.4 随机产生颜色。

Math函数随机产生0-225的RGB值。

3.5. 调用draw()方法实现功能。五、效果展示

1、点击f12运行到浏览器

2、每次刷新网页，随机产生不一样的星星和随机颜色。

六、总结

1. 本项目利用canvas画布，实现星星图的效果，以及在运用javascript产生星星效果时，遇到的一些难点进行了分析及提供解决方案。
2. 欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。
3. 代码很简单，希望对你有所启发。

想学习更多前端、Python爬虫、大数据等计算机知识，请前往：http://pdcfighting.com/

5行代码带你实现一个js的打字效果

有次看电影， 看到屏幕上一个个的文字蹦出来， 感觉像是有人在打字一样， 觉得挺有意思， 于是这里也用js实现了一个。

效果预览

最简单的打字效果

只要五行代码， 这里直接贴出来：

是不是超级简单， 现在只要执行这个函数， 你就能看到这样的效果了：

实现原理：

通过setTimeout设置一个时间的间隔， 每隔一定时间向dom中插入对应的数据， 并将index加1， 然后重新调用这个写函数。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

在字的后面加上模拟的闪烁光标

思路：

通过一个伪类after将光标定在dom的最后面， 并给一个显示隐藏的循环动画模拟光标的闪烁

通过css3的animation我们就实现了一个闪烁的光标效果。

实现：

我们可以把上面的代码放在一个class中， 然后我们执行writing时将这个class加到对应的dom中即可。

实现输入汉字加拼音

这里依赖一个插件pinyin， 大家可以通过npm安装

使用也很简单，我们只要把文本传入这个插件的方法中， 返回的就是每个汉字的拼音的数组。

然后我们通过模板字符串注入到对应的文字后面即可：

这样就实现了加拼音的简单效果了。

加动画

加动画的代码也很简单， 关键是思路。

我开始的想法是将每个文字用span标签包裹起来， 给每个span加动画即可。后来发现这样行不通， 因为每次dom中的innerHTML其实是重新渲染的， 那样的话， 之前的span也会一直有动画， 这不是我们想要的效果。

解决方案：

给每个span加个class实现动画， 但在下个span渲染时清除之前span的class， 这样就实现了只有当前的span有动画了.

我这里直接选择了正则匹配粗暴的将class去掉。大家也可以寻找一种更好的方式解决。

代码如下：

实现效果：

源自：https://juejin.im/post/5ddf55835188257313541581

Three.js 实现虎年春节3D创意页面

本文由dragonir授权发布，作者还有很多关于Three.js的作品，刚开始看到这个作品，觉得很有趣，虽然对Three.js完全不懂，哈哈，原文地址：https://segmentfault.com/a/1190000041261707，接下来分享这篇文章。

先看看效果：

虎年 春节将至，本文使用 React + Three.js 技术栈，实现趣味 3D 创意页面。本文包含的知识点主要包括：ShadowMaterial、 MeshPhongMaterial 两种基本材质的使用、使用 LoadingManager 展示模型加载进度、OrbitControls 的缓动动画、TWEEN简单补间动画效果等。

在线预览，已适配移动端：https://dragonir.github.io/3d/#/lunar

其中 GLTFLoader、FBXLoader 用于加在模型、OrbitControls 用户镜头轨道控制、TWEEN 用于生成补间动画。

这部分内容主要用于初始化场景和参数，详细讲解可点击文章末尾链接阅读我之前的文章，本文不再赘述。

Fog 场景雾化

本例中，打开页面时模型由远及近加载，颜色由白色变为彩色的功能就是通过 Fog 实现的。Fog 类定义的是线性雾，雾的密度是随着距离线性增大的，即场景中物体雾化效果随着随距离线性变化。

构造函数：Fog(color, near, far)。

color 属性: 表示雾的颜色，比如设置为红色，场景中远处物体为黑色，场景中最近处距离物体是自身颜色，最远和最近之间的物体颜色是物体本身颜色和雾颜色的混合效果。near 属性：表示应用雾化效果的最小距离，距离活动摄像机长度小于 near 的物体将不会被雾所影响。far 属性：表示应用雾化效果的最大距离，距离活动摄像机长度大于 far 的物体将不会被雾所影响。

本例中使用了背景图，我需要一个既能呈现透明显示背景、又能产生阴影的材质生成地面，于是使用到 ShadowMaterial 材质。

ShadowMaterial 阴影材质

此材质可以接收阴影，但在其他方面完全透明。

构造函数：ShadowMaterial(parameters: Object)

parameters：（可选）用于定义材质外观的对象，具有一个或多个属性。

特殊属性：

.isShadowMaterial[Boolean]：用于检查此类或派生类是否为阴影材质。默认值为 true。因为其通常用在内部优化，所以不应该更改该属性值。.transparent[Boolean]：定义此材质是否透明。默认值为 true。

在老虎 底部地面创建一个炫酷的旋转自发光圆形魔法阵。

魔法阵的贴图：

MeshPhongMaterial 网格材质

一种用于具有镜面高光的光泽表面的材质。该材质使用非物理的 Blinn-Phong 模型来计算反射率。

构造函数：MeshPhongMaterial(parameters: Object)

parameters：（可选）用于定义材质外观的对象，具有一个或多个属性。

特殊属性：

.emissive[Color]：材质的放射（光）颜色，基本上是不受其他光照影响的固有颜色。默认为黑色。.emissiveMap[Texture]：设置放射（发光）贴图。默认值为 null。放射贴图颜色由放射颜色和强度所调节。如果你有一个放射贴图，请务必将放射颜色设置为黑色以外的其他颜色。.emissiveIntensity[Float]：放射光强度。调节发光颜色。默认为 1。.shininess[Float]：specular 高亮的程度，越高的值越闪亮。默认值为 30。.specular[Color]：材质的高光颜色。默认值为 0x111111 的颜色 Color。这定义了材质的光泽度和光泽的颜色。.specularMap[Texture]：镜面反射贴图值会影响镜面高光以及环境贴图对表面的影响程度。默认值为 null。

与 MeshLambertMaterial 中使用的 Lambertian 模型不同，该材质可以模拟具有镜面高光的光泽表面（例如涂漆木材）。使用 Phong 着色模型计算着色时，会计算每个像素的阴影，与 MeshLambertMaterial 使用的 Gouraud 模型相比，该模型的结果更准确，但代价是牺牲一些性能。

MeshStandardMaterial 和 MeshPhysicalMaterial 也使用这个着色模型。在 MeshStandardMaterial 或 MeshPhysicalMaterial 上使用此材质时，性能通常会更高 ，但会牺牲一些图形精度。

使用 FBXLoader 来加载恭喜发财，岁岁平安字样的 3D 文字模型。

哔哩哔哩 3D 文字生成教程传送门：iBlender中文版插件 老外教你用汉字中文字体 Font 3D Chinese And Japanese Characters Blender 插件教程

老虎模型是 gltf 格式，在使用 GLTFLoader 加载模型的过程中，发现有 bug，loader 无法读取到模型体积的 total 值，于是使用通用加载器 LoadingManager 来管理模型加载进度。

LoadingManager 加载器管理器

它的功能是处理并跟踪已加载和待处理的数据。如果未手动设置加强管理器，则会为加载器创建和使用默认全局实例加载器管理器。一般来说，默认的加载管理器已足够使用了，但有时候也需要设置单独的加载器，比如，你想为对象和纹理显示单独的加载条时。

构造方法：LoadingManager(onLoad: Function, onProgress: Function, onError: Function)

onLoad：可选，所有加载器加载完成后，将调用此函数。onProgress：可选，当每个项目完成后，将调用此函数。onError：可选，当一个加载器遇到错误时，将调用此函数。

属性：

.onStart[Function]：加载开始时被调用。参数: url 被加载的项的url；itemsLoaded 目前已加载项的个数；itemsTotal 总共所需要加载项的个数。此方法默认未定义。.onLoad[Function]：所有的项加载完成后将调用此函数。默认情况下，此方法时未定义的，除非在构造函数中进行传递。.onProgress[Function]：此方法加载每一个项，加载完成时进行调用。参数：url 被加载的项的 url；itemsLoaded 目前已加载项的个数；itemsTotal 总共所需要加载项的个数。默认情况下，此方法时未定义的，除非在构造函数中进行传递。.onError[Function]：此方法将在任意项加载错误时调用。参数：url 所加载出错误的项的 url。默认情况下，此方法时未定义的，除非在构造函数中进行传递。

模型加载完成后，通过结合使用 TWEEN.js 实现相机 移动实现漫游，也就是打开页面时看到的模型由远及近逐渐变大的动画效果。

调用示例：

是一个补间动画库，可以实现很多动画效果。它使一个对象在一定时间内从一个状态缓动变化到另外一个状态。TWEEN.js 本质就是一系列缓动函数算法，结合Canvas、Three.js 很简单就能实现很多效果。

基本使用：

要让动画真正动起来，需要在 requestAnimationFrame 中调用 update 方法。

TWEEN.update()

缓动类型：

TWEEN.js 最强大的地方在于提供了很多常用的缓动动画类型，由 api easing() 指定。如示例中用到的：

tween.easing(TWEEN.Easing.Cubic.InOut);

链式调用：

TWEEN.js 支持链式调用，如在 动画A 结束后要执行 动画B，可以这样 tweenA.chain(tweenB) 利用链式调用创建往复来回循环的动画：

controls.enableDamping 设置为true 可以开启鼠标移动场景时的缓动效果，产生运动惯性，开启后 3D 更具真实感。

最后不要忘记添加窗口缩放适配方法和 requestAnimationFrame 更新方法。

3D 文字样式主要通过叠加多层 text-shadow 实现的。

最终实现效果如下图所示，大家感兴趣可在线预览，已适配移动端。

本文中主要涉及到的知识点包括：

• Fog 场景雾化
• ShadowMaterial 阴影材质
• MeshPhongMaterial 网格材质
• LoadingManager 加载器管理器
• TWEEN.js 补间动画
• THREE.OrbitControls 参数控制
• CSS 3D 文字样式

想了解场景初始化、光照、阴影及其他网格几何体的相关知识，可阅读我的其他文章。如果觉得文章对你有帮助，不要忘了 一键三连。

[1]. 使用Three.js实现炫酷的酸性风格3D页面[2]. Three.js 实现脸书元宇宙3D动态Logo[3]. Three.js 实现3D全景侦探小游戏[4]. 模型来源：sketchfab

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com