作为前端同学，或多或少都会接到动画需求。如果是有规律性的动画还是相对容易实现的，但如果是比较复杂的帧动画，我们用 CSS 实现的话，就非常容易造成如下情况，设计师是卖家秀，我们开发的是买家秀。 或许你会想到用 GIF 实现，但是 GIF 经常会有杂边，无法满足设计师对精致度的要…

Lottie 是一个复杂帧动画的解决方案，它提供了一套从设计师使用 AE（Adobe After Effects）到各端开发者实现动画的工具流。在设计师通过 AE 完成动画后，可以使用 AE 的扩展程序 Bodymovin 导出一份 JSON 格式的动画数据，然后开发同学可以通…

事情是这样的，前两天有学员问我轮播图无缝滚动的原理，说平时用框架习惯了，到自己手撸的时候不会了。 如果是几十张图片，那就直接做成一个3D的圆环，还是那句话，有解决思路最重要。 想看代码的，继续往后看，代码量其实很少，连着css一起也才一百多行而已，所以其实一点都不复杂，重点还是…

以上就是大概的实现思路了，有些地方还是略显粗糙的；另外从整体的描述来看，一些兼容的参考数值还是有点绕的，还是需要结合源码去跑一下，不然可能没有太直接的代入感；到最后也是希望能抛砖引玉了，探讨下多种实现方案，对比分析一些优缺点。

本文聊一聊线性渐变的凹面矩形过渡动效的难点和思路，主要介绍凹面矩形实现、给凹面矩形加线性渐变、线性渐变背景色的过渡。如果有更好的实现方案，欢迎在评论区和我讨论。 使用radial-gradient径向渐变来实现，将渐变的模糊距离缩小到0就能看到清晰的圆形界限。 径向渐变如果模糊…

今年Q1（2020年第一季度）参与了京喜事业部「京喜工厂」业务的前端开发。用户可以通过「京喜工厂」参与口罩、抽纸、大米等商品的“在线生产”，既能趣味造物，又能免费领奖品。目前可以通过「京喜」小程序首页访问该活动。 活动在上线一个月后，PV达到千万的量级，引人注目。有不少前端同学…

直播有一个很重要的互动：点赞。 点赞动画图片都是先放大再匀速运动。 快到顶部的时候，是渐渐消失。 收到大量的点赞请求的时候，点赞动画不扎堆，井然有序持续出现。 用 CSS3 实现动画，显然，我们想到的是用 animation 。 首先看下 animation 合并写法，具体含义…

https://moayuisuda.github.io/moa-line/. 噪声在我的理解中是“连续的随机”，比如你输入noise(0.01), noise(0.02), noise(0.03)......参数很接近，那么生成的结果值虽然随机，但也同样会很接近。如果想深入了…

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