前两天跟一个哥们唠嗑，讨论怎么实现uber, 滴滴的验证码输入的效果。 有打算一个input然后两条线段之间用白背景的线段遮住实现，用letter-spacing控制字间距。 但是控制数字间距吃力点，效果不佳便放弃。 这样就实现了 点击label触发 input焦点，调用键盘。…

1. 前言 近日，被安排做一个开场动画的任务。虽然RN提供了Animated来自定义动画，但是本次动画中的元素颇多，交互甚烦。。。在完成任务的同时，发现很多步骤其实是重复的，于是封装了一个小组件记录一下，分享给大家。 2. 初步尝试 分析一下：虽然这次的动画需求步骤挺多的，但是…

这篇文章我准备从实现一个非常简单的曲线动画效果入手，帮助大家彻底地弄懂什么是贝塞尔曲线，以及它有哪些特性，文章中有一点点数学公式，但是都非常简单:)。 在写代码之前，先了解一下什么是贝塞尔曲线吧。 贝塞尔曲线（Bezier curve）是计算机图形学中相当重要的参数曲线，它通过…

在月初的时候，发了CSS3热身实战--过渡与动画（实现炫酷下拉，手风琴，无缝滚动）。js的代码库也发过两次，两篇文章。之前也写了css3的热身实战，既然热身完了，是时候开始封装css3的代码库了，相比起js的代码库，css3的代码库的逻辑性就更加简单了！可以说只要打上注释和一张…

鞋厂的 App 有这么一个效果，而我的小伙伴刚好要做这样一个效果，于是就开始研究到底是怎么做的，Emmmm，大家都知道我平时糊设计图的功底为 0，所以好好研究了一下。： 首先布局用 flex 可以实现，而动画可以用 transform 或者 animation 实现。 这个布局…

一个跨浏览器的动效基础库，是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效，一应俱全。 文件大小：55.2 kB. 和其他的同类工具不同的地方在于，它不仅仅是一个库，而是有这用户可以直接操作的实际功能，它带有一个完整的网页构建器。Bounce.js 是为数不多的可以直…

所谓碰撞检测就是判断物体间是否发生重叠，这里我们假设讨论的碰撞体都是矩形物体。下面示例中我们将创建两个rect对象A和B(以下简称A,B)，其中A位置固定，B跟随鼠标移动，当A,B重叠时控制台将提示intercect！！ 这里我们新建Rect.js，建立Rect对象并为其添加原…

codepen是一个在线的前端代码编辑运行的网站，支持前端现今的众多技术，比如babel，coffeescript， typescript， scss，less，stylus。可以用于在线展示demo或者代码。 codepen目前项目众多，其中也不乏很多优秀的作品，本期周刊将把…

开工大吉，在开工第二天，送上每周一个动画系列的第三篇，新的一年先给自己一个大大的赞。闲话不说，开始我们的正文。 本文分析实现的某些效果，仅仅作为一个思路分享，仅仅作为学习素材使用。 可以看到鼠标在点击红心的时候，有些粒子效果，同时红心填充为红色，效果的确很赞。 我们应该记得在《…