最全的动效函数曲线

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

动效的运用能对产品起到加分作用,流畅的动效不仅能引导用户使用产品,而且能带给用户在使用上的愉悦感。
随着AE在设计圈的普及,很多设计师,喜欢用AE去做一些交互类的动效展示。AE做出的动效很酷炫,过渡很自然。
但当给研发哥哥实现时,研发只能一遍一遍对着动效去揣测,这个动效的时间,缓动的参数值。

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

名称:easings
网址:www.easings.net

-w1082

使用方法

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

-w525

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

-w1091

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

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

-w398

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

微信公众号:QIUQIU-DESIGN
获取更多的免费素材资源更新,设计资源站一个就够了!
12000人已关注
分享到:
赞(1) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)

请QIUQIU喝杯饮料吧~

支付宝扫一扫打赏

微信扫一扫打赏