最近微信更新了8.0，其中之一最好玩的莫过于表情包的更新了，大家都在群里纷纷玩起了表情包大战。 作为一个前端程序员，这就勾起了我的好奇心，虽然我从来没有实现过这样的动画，但是我还是忍不住想要去实现，最终我花了2天时间去看一些库的源码到我自己实现一个类似的效果，在这里我总结一下，…

SpriteJS是一款由360奇舞团开源的跨终端canvas绘图库，可以基于canvas快速绘制结构化UI、动画和交互效果，并发布到任何拥有canvas环境的平台上（比如浏览器、小程序和node）。 Sprite为图形创建类似于DOM的对象模型，因此我们可以像创建DOM元素一样…

最近看了一些文章，知道了实现引导动画的基本原理，所以决定来自己亲手做一个通用的引导动画类。 通过维护一个Modal实例，使用Modal的mask来隐藏掉页面的其他元素。 根据用户传入的需要引导的元素列表，依次来展示元素。展示元素的原理：通过cloneNode来复制一个当前要展示…

Canvas 是 HTML5 提供的一个用于展示绘图效果的标签. Canvas 原意为画布, 在 HTML 页面中用于展示绘图效果. 最早 Canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现。 canvas 本身不能绘图. 是使用 JavaScript 来完成绘…

前两天在浏览 苹果 16寸 营销页面 的时候，发现了几个比较有意思的交互，心里想着自己虽然是一个穷逼，但是知识是无界限的呀，于是便研究了一波。 一个是屏幕慢慢打开的效果，在屏幕打开的过程中，电脑图片 是在屏幕中固定不动的，直到打开完毕或者关闭完毕的时候再让 电脑图片 随着滚动条…

不知道你看到后有没有觉得很复杂，为了完成它，我大约用了一个小时左右。 本文会详细介绍一下实现的具体原理，研究明白后，动画的运动学基础应该也算是过关了吧。 1. 运动学一般原理 首先从运动动画的基本原理说起。 我们知道，根据 requestAnimationFrame 实时更新小…

两年前，我曾徒手写过一个运行在 Web 端的小游戏，就是用 Canvas 来实现的，之后便几乎从未与 Canvas 打交道，这两天偶然接触到一本书《TypeScript图形渲染实战：2D架构设计与实现》，又再次让我对这方面产生了兴趣，同时这本书采用的 TypeScript 实现…

看过复仇者联盟的都知道，灭霸作为计划生育政策的坚定支持者和执行者，一个响指清除了宇宙中二分之一的生命。电影中被清除的生命灰飞烟灭的镜头很是酷炫，所以在复联4上映后，那个不存在的网站google，推出了一个彩蛋，如果在搜索框搜索灭霸，会出现一个手套的按钮，点击后会让网页搜索结果消…

界面写得丑，忘轻喷。。。 这样我们基本就完成了游戏的大概了。 然后我们就能实现下一关的操作，重新再绘制游戏网格，重新生成新的颜色和位置了。 通过这个小游戏，可以学习到，canvas点击事件的监听和实现，因为canvas只是一张画布是一个状态机，没法通过dom一样直接操作，但是通…