css3动画——常用的贝塞尔曲线

  最近在做css3动画的时候感觉默认的几种动画缓动效果已经不足够满足要求了,所以想起整理一下贝塞尔常用的一些曲线,用于以后使用

  曲线参考:http://cubic-bezier.com/http://easings.net/zh-cn#

  常用的贝塞尔曲线如下:

  ps:并不是所有的缓动函数都有贝塞尔曲线,jquer 的easing的大部分是有的,但是变化比较剧烈的几种就没有了

  

$easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);

$easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);

$easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);

$easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);

$easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);

$easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);

$easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);

$easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);

$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);

$easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22);

$easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);

$easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);

$easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);

$easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);

$easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);

$easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);

$easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);

$easeInOutExpo: cubic-bezier(1, 0, 0, 1);

$easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);

$easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);

$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);

$easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);

$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);

$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);

暂时就这些,如果后期有用到其他的函数可能还会有补充

时间: 2024-11-07 20:00:08

css3动画——常用的贝塞尔曲线的相关文章

CSS3动画常用贝塞尔曲线-效果演示

CSS与贝塞尔曲线 CSS3动画常用贝塞尔曲线实现更加自然,物理感的动画. 列举了一些常见的贝塞尔曲线数值,用于做动画的存档. .a1{ animation: stretch 1s cubic-bezier(0.39, 0.575, 0.565, 1) infinite; } .a2{ animation: stretch 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite; } .a3{ animation: stretch 1s cubic-

把商品添加到购物车的动画效果(贝塞尔曲线)

如图: 参考: Android补间动画,属性动画实现购物车添加动画 思路: 确定动画的起终点 在起终点之间使用二次贝塞尔曲线填充起终点之间的点的轨迹 设置属性动画,ValueAnimator插值器,获取中间点的坐标 将执行动画的控件的x.y坐标设为上面得到的中间点坐标 开启属性动画 当动画结束时的操作 难点: PathMeasure的使用 - getLength() - boolean getPosTan(float distance, float[] pos, float[] tan) 的理解

JS模拟CSS3动画-贝塞尔曲线

一.什么是贝塞尔曲线 1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier),贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线.如今,贝赛尔曲线是计算机图形学中相当重要的一种曲线,它能过优雅地模拟人手绘画出的线.它通过控制曲线上的点(起始点.终止点以及多个参考点)来创造.编辑图形.其中起重要作用的是位于曲线中央的控制线.这条线是虚拟的,中间与贝塞尔曲线交叉,两端是控制端点.移动两端的端点时贝塞尔曲线改变曲线的曲率(弯曲的程度):移动中间点(也就是移动虚拟的控制线)时,贝塞尔

深度掌握SVG路径path的贝塞尔曲线指令

一.数字.公式.函数.变量,哦,NO! 又又一次说起贝塞尔曲线(英语:Bézier curve,维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完全不能承受富有创意的创作的,至少得有我当年追我老婆的脸皮厚才行. 然而,瞅瞅维基百科上的释义,或者其他一些相关的技术文章,总是离不开各种公式,一大堆变量……例如下面维基截图缩略图: 完全是数学爱好者的菜啊!我想,要是让UI设计师们去学习这些东西,估计还不如一刀来个痛快的! 这就是爱好领域与能力掌握的

cubic-bezier贝塞尔曲线css3动画工具

今天在一本叫<HTML5触摸界面设计与开发>上看到一个做弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速.是用cubic-bezier贝塞尔曲线来完成的.所以特地去学习了一下关于cubic-bezier贝塞尔曲线. cubic-bezier比较少用,因为PC端中,有浏览器不兼容.但是手机端中,可以使用并带来炫酷的动画及体验. 缓动函数:http://www.xuanfengge.com/easeing/easeing/ cubic-bezier:http://cubic-bezie

贝塞尔曲线与CSS3动画、SVG和canvas的应用

简介 贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果. 使用贝塞尔曲线常用的两个网址如下: 缓动函数:http://www.xuanfengge.com/easeing/easeing/ cubic-bezier:http://cubic-bezier.com/ 如何用贝塞尔曲线画曲线 一个标准的3次贝塞尔曲线需要4个点:起始点.终止点(也称锚点)以及两个相互分离的中间点. 无论SVG, Canvas还是CSS3动画,都牵扯到这4个

css3 贝塞尔曲线动画

上面图标初始加载的时候,呈:奇数从左上淡现,偶数车左下呈现. <div> <ul class="trantion" v-for="(item,index) in dataLI" @click="handelIdex(index)"> <li :class="'trantiones'+ (intx == index ? 'actives' : '')">{{item.name}}</li

浅谈贝塞尔曲线以及iOS中粘性动画的实现

关于贝塞尔曲线,网上相关的文章很多,这里我主要想用更简单的方法让大家理解贝塞尔曲线,当然,这仅仅是我个人的理解,如有错误的地方还请大家能够帮忙指出来,这样大家才能一起进步. 贝塞尔曲线,常用到的可分为如下几类,1阶曲线,2阶曲线(二次函数算是一种),3阶曲线,高阶曲线. 通用的方程为 这是由p0~pn这n+1个点组成的高阶方程. 但是光看这个方程的话或许大家会觉得不太理解,这东西到底能做什么? 我先逐渐的从1阶曲线讲起吧: 这里借鉴下这篇文章的几幅图片来描绘一下下列几个情况: 1阶曲线,是由两个

CSS3 贝塞尔曲线实现

cubic-bezier 曲线是 css3 动画的一个重要基石.另一个为 steps (ease 等都是 cubic-bezier 的特殊形式),css3 中的 cubic_bezier 曲线限制了首尾两控制点的位置,通过调整中间两控制点的位置可以灵活得到常用的动画效果,同时 canvas 也进行了相应的支持,也存在相应的工具可以根据想要的曲线得到对应 cubic bezier 曲线的控制点参数. 而 ie(6-9) 却没有相应的支持,为了能在各个平台得到一致的动画效果,则不可避免要在 ie 上