最全的动效函数曲线

最全的动效函数曲线速查表,程序和设计实现无缝对接效果

动效的运用能对产品起到加分作用,流畅的动效不仅能引导用户使用产品,而且能带给用户在使用上的愉悦感。

随着AE在设计圈的普及,很多设计师,喜欢用AE去做一些交互类的动效展示。AE做出的动效很酷炫,过渡很自然。

但当给研发哥哥实现时,研发只能一遍一遍对着动效去揣测,这个动效的时间,缓动的参数值。

easings.net 把常用的缓动动效曲线整理出来,并对每个曲线加以解释说明,并配上CSS代码参数。可以说非常便捷了,无论是在AE中还是程序实现中都有了统一的参考标准,剩下的时间可以和程序员哥哥喝喝茶谈谈人生了….

(Arbnb设计部门推出的AE插件,也可以让设计效果和实现效果无缝对接。)

名称:easings

网址:www.easings.net

使用方法

一、打开站点后,就能看所有的曲线。鼠标移动到单个曲线上,右侧会有个小球展示当前曲线的动画效果。

二、点击进入查看当前曲线的详情。

可以查看到,CSS和PostCss动画应用的写法,也可以看到Gradient的渐变色应用的写法。

三、在右侧,有三个按钮分别是:“尺寸、位置、透明度“,点击可以看到当前曲线运用到实际案例中的真实效果。

是不是,很方便,赶快动手用起来吧~

这个站点收集了很多免费资源:Dsharing(www.jutro.cn)  可以关注收藏一下

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Sogou-UED / Aaron Cui : 本文主要讲述了,为什么做动效,好的动效设计的标准是什么,如何做动...
    叁拾差叁年阅读 2,622评论 3 30
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,712评论 1 45
  • 一直以来,大家对于动效设计的热情都是非常的高涨,也经常在Dribbble之类的设计社区里看到各种“狂拽炫酷”的UI...
    里米先生Limi阅读 13,037评论 7 172
  • 潘光旦先生 在潘光旦、胡寿文所译的达尔文《人类的由来》一书的结尾处,有费孝通先生所写的文章《潘、胡译〈人类的由来〉...
    爱渔爱语阅读 376评论 0 2
  • 卑鄙是卑鄙者的通行证, 高尚是高尚者的墓志铭。 看吧,在那镀金的天空中, 飘满了死者弯曲的倒影。 冰川纪过去了, ...
    meiyongjie阅读 426评论 0 0