您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

动效的设计与实现-贝塞尔曲线动画的插值法

原创文章 分类: 教程 版权:
5792 116 45 10
更新于:2018-11-08
0.0
普通推荐

很多动效还是需要设计师制作效果视频,交给研发宝宝手动去做,本文主要简单讲一下贝塞尔曲线在动效设计与实现中的作用。

查看更多可关注我的博客:viggoz.com 或者看我的 dribbble 


上篇文章 简单总结了一下网页和移动App中借助bodymovin实现动画的方法,但是此方法并不是适用实际项目中的所有动效,很多动效还是需要设计师制作效果视频,交给研发宝宝手动去做,本文主要简单讲一下贝塞尔曲线在动效设计与实现中的作用。


1. 关于


首先介绍最重要的两个概念:

动画(Animation)

某个界面控件在一段时间内的变化即产生动画。产生动画的维度可以是它的形状、位置、大小、颜色、透明度等,抑或是它们的叠加。

下面这个是我做的一个非常简单的应用开屏引导动画,滑动时候是元素位移透明度变化。

Image title



过渡(Transition)

那这个控件在两个状态之间是如何变化的呢?定义这个变化的概念即是过渡。不同的过渡曲线会产生截然不同的效果。通常被提到的有ease in、ease out、bounce等,当然Axure也提供这些效果。以位置为例,一个矩形由下至上移动300px,不同的运动曲线所对应的动效之间有非常明显的区别。


下面借助 Google的MD规范动画解释过渡的作用。

Image title




一个动画一般有这些参数 —— 动画时间、属性变化量、以及贝塞尔插值曲线。在动效标注的时候,也只需要标注这些参数就可以完整的给UI研发写动效了。一个动效所涉及的元素属性变化,也就是'动画'在设计输出的效果视频中就可以很明确的表述,而'过渡'使用贝塞尔插值和函数来描述可以说是最有效最直观的方法了。


一个动画一般有这些参数 —— 动画时间、属性变化量、以及贝塞尔插值曲线。在动效标注的时候,也只需要标注这些参数就可以完整的给UI研发写动效了。一个动效所涉及的元素属性变化,也就是'动画'在设计输出的效果视频中就可以很明确的表述,而'过渡'使用贝塞尔插值和函数来描述可以说是最有效最直观的方法了。


2. 贝塞尔曲线


一阶贝塞尔曲线(两点),绘制成一条直线

Image title




二阶贝塞尔曲线(三点)

Image title





三阶贝塞尔曲线(四点)

Image title




四阶贝塞尔曲线(五点)

Image title





五阶贝塞尔曲线(六点)


Image title




贝塞尔的原理可以通过 这个视频 来学习

也可以看看这个 贝塞尔曲线扫盲


3. 贝塞尔函数曲线怎么用


设计师怎么用

动画的曲线实现问题是使用感觉和动画体验的核心。往往设计者给到研发的动效预览视频是不能让研发准确知道动画中元素的运动曲线规则(这个深有体会,研发大哥有可能做出的动画全部是线性运动,实现的动画显得非常生硬)。在主流的动画设计中(After Effect、Origami、Principle、FramerJS),由于动画引擎不同的缘故,导致同样的设计效果不同。不过,其中的贝塞尔插值和函数在开发过程中具有相当的借鉴意义。也能很好的兼容Android/iOS/Web多平台动效的实现。

**设计师** 做好动效之后,只需要把在制作动画时使用的贝塞尔插值曲线参数值交给研发宝宝就可以。我在标注动效的时候会标注不同元素在不同时间所对应的动画运动曲线参数。

Image title





这里是开源的一些 常用缓动曲线,前端同学可以直接拿来用,在一些网页动画中可以直接加入这些**缓动函数**。动画效果在执行时的速度,使其看起来更加真实。

Image title




下面这个是我做的一个简单的动画,渐变效果加上缓动函数看上去会自然很多。

Image title




上面的开屏引导动画使用principle做的,基本使用默认的贝塞尔的缓入缓出曲线(25,.1,.25,1),看上去才会非常自然。

Image title




在这里我们主要利用贝塞尔曲线描述某元素的缓动效果。设计师在动效制作软件中获取想要的曲线数值 ✿ cubic\-bezier\.com


研发宝宝怎么用


Android开发者

可以使用 EaseCubicInterpolator 这个开源插值器实现;我司研发宝宝亲测可用;

findViewById(R.id.imageView).setY(1200);findViewById(R.id.imageView).animate().setInterpolator(new android.view.animation.EaseCubicInterpolator(0f,1.5f,0.53f,0.02f)).yBy(-900).setDuration(500).start();


前端开发者

可以参考google:自定义缓动  \|  Web  \|  Google Developers

如何让你的动画更自然 腾讯ISUX写的这篇文章主要讲述的是前端使用曲线的方法,写的过于繁琐,全篇不用细看,只需要参考使用js、css实现曲线动画效果部分就可以,


如果不想重复造轮子的话,可以使用动画曲线实现库 jstween 和 GreenSock 。两个库都是挺容易上手使用的,而且还扩展了很多功能,例如按运动曲线同时改变多个属性、动画播放时或完成时执行回调函数等。

可以用这个在线生成工具也是可以用的 CSS cubic\-bezier Builder

示例代码:

div {  -webkit-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);  transition:         all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }


iOS开发者

可以利用 Core Animation 中的代码来实现动画的还原,本人没有仔细研究,请左转百度右转 Google 搜索;

下一篇文章我会写关于设计师怎么产出一份 动效标注文档 ,方便研发宝宝更直观的理解设计师做的动画。


本文参考:

Bezier Curves and Picasso \| Math ∩ Programming

如何把AE的动效DEMO准确表达给软件工程师? \- 知乎

贝塞尔曲线之购物车动画效果 \- 简书

MartinRGB/MTGuideline: Some Design Guideline I made


注:

本文转载请注明原文地址:http://blog.viggoz.com/2017/08/15/2017-08-18-Bezier/


查看更多可关注我的博客:viggoz.com 或者看我的 dribbble 

ViggoZ

www.viggoz.com 微信:Gift_Wei

731粉丝/21关注

小有名气首页新秀原创小生
2017年度作品集-viggo设计师怎样学习网站开发
0
乐羊羊

求Principle的中文包文件

精彩!

扫描二维码
去手机端查看海报

ViggoZ

TA已经获得3枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN