Easings.co

Easings是什么？

Easings.co是一个可视化缓动曲线生成器，你可以在这里预览常用的 easing 效果、制作自己的 cubic-bezier 曲线，还能一键复制 CSS 动画代码，帮助开发者与设计师轻松实现流畅自然的网页动效。

Easings官网地址：https://easings.co/

主要功能特点

• 缓动函数展示：：把不同的缓动函数显示出来，比如直线式的 Linear（Linear 慢慢结束），缓慢开始的 Ease-in、缓慢结束的 Ease-out、平滑过渡的 Ease-in-out…… 点击一个缓动函数，在右边的预览处就会显示出来了。
• 可视化工具：鼠标指到某地改变参数数值，用手轻轻拉动来制作自己心仪的缓动函数；在实时预览栏能看到更改过之后的值对应着什么效果。
• 代码生成：写一些常见的 CSS、Java 语句与大家一起分享，并且可以自己新建立一段代码把自己的缓动函数放入代码里面去，让自己的动画效果更加棒！
  
• 示例库：网站中有一个示例库页面，有很多不同风格的缓动函数和动画图样。我们在上面就可以找到自己喜欢的样子，做灵感启发用。
• 社区互动：网站可能还提供了社区功能，在网站下端随便留下自己的感想问题互相探讨等等，也可以提出自己的疑惑或者和别人交流学习。

使用场景

• 网页设计：设计师可以利用缓动函数可以让网页 (webpage) 中的各种元素缓缓滚动、渐渐淡化/浮入/飘出等等，给人感觉很真实、很好感。
• 应用开发：应用程序开发人员可以用缓动函数在其手机或者电脑类的应用产品上加入相应的过度动画，显得比较好看和有感染力一点。
• 游戏开发：很多需要编写代码的游戏都可以用到缓动方法，在游戏中调用这个缓动方法来做人的不同动作行为、和其他的不同交互以及与周围的环境交换等等。

使用方法

1. 打开网站：访问 Easings.co 官网，无需注册即可使用。
2. 选择缓动函数：页面展示了常见的缓动曲线（如 easeInOut, easeIn, easeOut 等），点击即可看到动画效果与 Bezier 曲线；
3. 自定义贝塞尔曲线：点击页面中曲线图，就可以拖拽曲线控制点定制属于自己的 cubic-bezier 曲线，并实时预览最终的节奏结果。（适合对自定节奏有需求的朋友。）
4. 复制CSS代码：页面每一个缓动曲线下方都可以看到对应的 CSS 类型 code （例如：transition: all 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);）。点击复制到你的网页、App 中即可使用啦
5. 应用到项目中：将复制的 cubic-bezier 函数粘贴到CSS的 transition 或 animation-timing-function 属性中，即可实现自定义缓动效果。