Three.js（下面简称 Three） 作为一个 3D 库，不仅减少了我们学习 OpenGL 和 WebGL 的成本，还大大提升了前端在可视化上给用户带来更多的真实、沉浸式的体验。众所周知，Three 更多的是用 3D 模型 + 投影相机 + 用户交互的方式来构建一个「3D …

Three这个流行的库目前突破了56K Star，是创建一个易于使用，轻量级，3D库默认的WebGL渲染器。在示例中，该库还提供了画布2D、SVG和CSS3D渲染器。threejs可以将它理解成three + js，three表示3D的意思，js表示javascript的意思。…

当你拿到一个 H5 制作的需求的时候，你需要首先明确需求的目的是什么？按照目的大概可以分为活动营销，产品宣传，会议邀请，品牌推广，企业招聘等。不同类别的 H5 有其自身的特点，但找准业务方的目的，就能抓住主题而不会跑题了。 接下来就是围绕这个主题思考创意。创意很多是来自于营销策…

周报将 Web 动画大致分为三类：CSS 动画、SVG 动画 和 WebGL/Canvas 动画。所有的动画将按类别展示，方便读者有针对性的学习。 1. 《CSS 3D 变换》 作者：Neil McCallion 如此酷炫的幻影动画小编还是第一次见😂 其实原理很简单，就是画很…

【前言】在Web页面中，流畅的过渡动效可以增加用户体验的舒适度，让用户认知过程更为自然，同时恰当的动效也能够引导用户关注重要的信息。在WeGame大屏模式需求场景中，笔者利用这个契机，在开发前期与视觉及动画设计同学沟通，设定好产品过渡动效及实现方式，给用户在体验中营造“沉浸式”…

前两天在网易云听歌的时候，看到有个功能叫鲸鱼音效，点进去长下面这个样子。这是一个很常见的音乐律动动画，在音乐播放的过程中，CD 周围的曲线抖动，给听者带来一些听觉视觉上的双重冲击。 今天尝试用代码来实现一个【类似】的效果，着急的朋友可以跳过文章，直接查看最终效果。喜欢的朋友不要…

动画是前端工作中很重要的一部分，有趣的交互动画实现常常能让用户刚到惊艳，兴奋，并更愿意使用你的产品。熟练掌握动画是前端工程师的必备技能之一。这篇文章将从零开始介绍如何实现一个音量发射的动画。 前两天看到朋友圈有朋友分享了个链接——你见过最反人类的设计是什么？。里面列了很多反人类…

它有一个弹闪的过程，一大一小交替缩放就像一个弹簧在弹动一样，而不是以往那种简单的线性变大。 如果使用CSS的animation-timing-function只是改变运动的速度，不能改变运动的方向。 是没有这种弹性动感的。 因为要实现一个弹簧振动效果，需要有两个参数，一个是阻尼…

PS:为了简单也可以用视频，但除非动画的播放场景固定，不然移动端视频在不同app、不同机型、不同系统的播放显示都不太一样，容易踩不少坑。 不管采用什么方式来制作动画，最终呈现到前端页面的无非三种形式：canvas、div、SVG。 一般情况下，随着屏幕大小的增大，canvas将…