【转载】cubic-bezier贝塞尔曲线CSS3动画工具

最新推荐文章于 2021-08-03 19:15:02 发布
最新推荐文章于 2021-08-03 19:15:02 发布
阅读量373 收藏
点赞数 1
原文链接：https://blog.csdn.net/qq_25600055/article/details/51045163?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158958946519724835802697%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.57693%2522%257D&request_id=158958946519724835802697&b
版权

转载自：https://blog.csdn.net/qq_25600055/article/details/51045163?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158958946519724835802697%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.57693%2522%257D&request_id=158958946519724835802697&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allfirst_rank_v2~rank_v25-1-51045163.nonecase&utm_term=%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF+css

工具及应用

这里给出两个在线动画调试工具。

cubic-bezier还是比较少用到，PC端中，有浏览器不兼容。但是手机端中，可以使用并带来炫酷的动画及体验。

贝塞尔曲线

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋。

css3-transition

cubic-bezier即为贝塞尔曲线中的绘制方法。图上有四点，P0-3，其中P0、P3是默认的点，对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]。

而在CSS3中，常用的几个动画效果，用cubic-bezier表示分别为：

贝塞尔曲线进阶

1、线性曲线

1

线性贝塞尔曲线演示动画，t in [0,1]

2、二次曲线

为建构二次贝塞尔曲线，可以中介点Q0和Q1作为由0至1的t：

  • 由P0至P1的连续点Q0，描述一条线性贝塞尔曲线。
  • 由P1至P2的连续点Q1，描述一条线性贝塞尔曲线。
  • 由Q0至Q1的连续点B（t），描述一条二次贝塞尔曲线。

2

三次贝塞尔曲线的结构

 

2

二次贝塞尔曲线演示动画，t in [0,1]

3、高阶曲线

为建构高阶曲线，便需要相应更多的中介点。对于三次曲线，可由线性贝塞尔曲线描述的中介点Q0、Q1、Q2，和由二次曲线描述的点R0、R1所建构：

3

三次贝塞尔曲线的结构

 

3

三次贝塞尔曲线演示动画，t in [0,1]

 

对于四次曲线，可由线性贝塞尔曲线描述的中介点Q0、Q1、Q2、Q3，由二次贝塞尔曲线描述的点R0、R1、R2，和由三次贝塞尔曲线描述的点S0、S1所建构：

 

4

四次贝塞尔曲线的结构

 

4

四次贝塞尔曲线演示动画，t in [0,1]

使用方法

CSS3中，动画属性为transition，常用动画如下：

我们可以通过赋予transition-timing-function不同的值来更换不同的动画，结合cubic-bezier，我们可以做出更多表现的动画。

兼容方案

相比于兼容性不佳的PC端浏览器，一些动画只能用js来实现，而js也有相应的很熟悉的动画库jquery.easeing.js

下面的例子是分别用js及css3实现的效果：http://www.xuanfengge.com/demo/201505/easing/

实现起来也很简单

</head>
<body>
<div class=“demo demo1”>demo1</div>
<div class=“demo demo2”>demo2</div>

&lt;script&gt;
$(".demo1").animate({ left: '+=800px' }, 1200, 'easeInOutCirc', function(){
	console.log('end');
});

setTimeout(function(){
	$(".demo2").css({left: '800px'});
}, 100)
&lt;/script&gt;

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
< ! DOCTYPE html >
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title > Document < / title >
     <script src = "http://cdnjs.gtimg.com/cdnjs/libs/jquery/2.1.1/jquery.js" > </script>
     <script src = "js/jquery.easing.1.3.js" > </script>
     <style>
     * { padding : 0 ; margin : 0 ; }
     .demo {
         position : absolute ;
         width : 40px ;
         height : 40px ;
         background : #39c ;
         margin : 100px ;
         left : 0 ;
     }
     .demo1 {
         top : 10px ;
     }
 
     .demo2 {
         top : 100px ;
           -webkit-transition : all 600ms cubic-bezier ( 0.47, 0, 0.745, 0.715 ) ;
           transition :          all 600ms cubic-bezier ( 0.47, 0, 0.745, 0.715 ) ;
     }
     .demo2:hover {
         left : 800px ;
     }
     </style>
< / head >
< body >
     < div class = "demo demo1" > demo1 < / div >
     < div class = "demo demo2" > demo2 < / div >
 
     <script>
     $ ( ".demo1" ) . animate ( { left : '+=800px' } , 1200 , 'easeInOutCirc' , function ( ) {
         console . log ( 'end' ) ;
     } ) ;
 
     setTimeout ( function ( ) {
         $ ( ".demo2" ) . css ( { left : '800px' } ) ;
     } , 100 )
     </script>
< / body >
< / html > 
        <div class="person-messagebox">
            <div class="left-message"><a href="https://blog.csdn.net/qq_25600055">
                <img src="https://profile.csdnimg.cn/4/4/2/3_qq_25600055" class="avatar_pic" username="qq_25600055">
            </a></div>
            <div class="middle-message">
                                    <div class="title"><span class="tit "><a href="https://blog.csdn.net/qq_25600055" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;}" target="_blank">173300598</a></span>
                    <!-- 等级，level -->
                                            <img class="identity-icon" src="https://csdnimg.cn/identity/blog7.png">                                            </div>
                <div class="text"><span>原创文章 21</span><span>获赞 83</span><span>访问量 95万+</span></div>
            </div>
                            <div class="right-message">
                                        <a class="btn btn-sm  bt-button personal-watch" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;extend1&quot;:&quot;个人信息未关注&quot;}">关注</a>
                                                            <a href="https://bbs.csdn.net/topics/395528783" target="_blank" class="btn btn-sm bt-button personal-messageboard">他的留言板
                    </a>
                                </div>
                        </div>
                    
    </div>
</article>
buruore
关注
css-缓动效果贝塞尔曲线-cubic-bezier
weixin_41993525的博客
05-28 792
css-缓动贝塞尔曲线-cubic-bezier cubic-bezier是控制变化的速度曲线。 贝塞尔曲线由至少两个控制点进行描述。WEB中使用的是三次贝塞尔曲线，即使用四个控制点[P0,P1,P2,P3]描述的曲线。 cubic-bezier(, , , ) 实际上可以理解为两个坐标点数据， X轴的取值范围是0-1，超出会失效；y轴的取值无限制，参考范围0-1，不宜过大。 ease - cubic-bezier(.25,.1,.25,1) linear - cubic-bezier(0,0,1,1
CSS3 三次贝塞尔曲线(cubic-bezier)
热门推荐
woollllll
10-24 3万+
最近在看animation模块，其中animation-timing-function 和 transition-timing-function两个属性来控制动画速度分别提供了ease，liner，ease-in，ease-out，ease-in-out几个预设速度，还可以同过cubic-bezier来自定义速度，想要深入了解CSS3动画，实现随心所欲的动画效果，还是有必要理解下其中的原理。
2次三次4次Bezier曲线演示程序(无源码)
06-17
2次三次4次Bezier曲线演示程序(无源码) QT4.6 VS2008编译
cubic-bezier
zzc1684的博客
03-29 516
  前言 本文将解释，何为贝塞尔曲线，及其如何运用在动画中。 工具及应用 这里给出两个在线动画调试工具。 cubic-bezier还是比较少用到，PC端中，有浏览器不兼容。但是手机端中，可以使用并带来炫酷的动画及体验。 缓动函数速查表： http://www.xuanfengge.com/easeing/easeing/ Ceaser： http://xuanfengge.co...
贝塞尔曲线工具css,贝塞尔曲线以及css动画 | Soo Smart!
weixin_39717367的博客
08-03 255
参考文档：http://www.cnblogs.com/dolphinX/p/4087817.htmlCSS3的动画：http://www.w3school.com.cn/css3/css3_animation.asp.cssstyle{animation: animation-name animation-duration animation-iteration-count;-webkit-an...
css3动画贝塞尔曲线cubic-bezier，css3动画的五种情况
reffrselom的博客
05-30 587
当大家开始做css3动画的时候，了解贝塞尔曲线就成了不可或缺的。“贝赛尔曲线”是由法国数学家Pierre Bézier所发明，由此为计算机矢量图形学奠定了基础。它的主要意义在于无论是直线或曲线都能在数学上予以描述。这里主要说贝塞尔曲线在css3中的运用，三次方公式，四个点确定 三阶贝塞尔曲线由四个点确定，那么css3的贝塞尔函数**cubic-bezier(x1,y1,x2,y2)**只有两个坐标...
jQuery沿贝兹曲线和弧线运动动画特效
06-11
这是一款工具类插件，提供了沿Bezier曲线和圆弧的动画方法的jQuery沿贝兹曲线和弧线运动动画特效。
web前端入门到实战：css3贝塞尔曲线(cubic-bezier)
软件开发-前端开发-IT
10-24 3197
css3 animation模块，其中animation-timing-function 和 transition-timing-function两个属性来控制动画速度分别提供了ease，liner，ease-in，ease-out，ease-in-out几个预设速度，还可以同过cubic-bezier来自定义速度，想要深入了解CSS3动画，实现随心所欲的动画效果，还是有必要理解下其中的原理。 C...
sassy-cubic-bezier:一个 Sass 函数，它扩展了 CSS cube-bezier() 符号以允许（预定义的）命名缓动函数
07-19
时髦的立方贝塞尔曲线 一个 Sass 函数，它扩展了 CSScubic-bezier() 符号以允许（预定义的）命名缓动函数。 一个简单的例子： .default { transition-timing-function : cubic-bezier ( ' easeOutSine ' ); } ....
前端2-6-11：animate-timing-function属性、cubic-bezier() 函数、贝塞尔曲线的快慢
Yummy的博客
06-11 1299
【问题】下面使用Animate-timing-function定义的贝塞尔曲线，哪一个是先快后慢的（） 正确答案: A 你的答案: B(错误) animation-timing-function : cubic-bezier(.22,1.23,.97,.89) animation-timing-function : cubic-bezier(1.23,..22,97,.89) animation-timing-function : cubic-bezier(1.23,.97,.89,.2...
python实现贝塞尔（Bezier）曲线画法
11-11
应用python实现贝塞尔曲线，并应用wx python图像显示功能展现所画曲线。使用时需安装wx（内付安装程序）
有界面（wxPython）的python贝塞尔曲线拟合多点的演示
07-04
和上一个版本的基本功能相似，区别在于这个版本将贝塞尔曲线的反算拟合功能封装为一个函数，直接import BezierTool 之后，调用makeBezier即可。 采用了互动选点的技术（这是从另外一个高分下载处得到的，他的功能只是通过控制点画线，缺少反算功能，但仍有其价值，故也保留）。 如果没装wxPython的，首先pip install wxPython才可以使用界面功能。
jQuery沿贝兹曲线和弧线运动特效.zip
07-03
jQuery沿贝兹曲线和弧线运动特效是一款工具类插件，提供了沿Bezier曲线和圆弧的动画方法。
python 贝塞尔曲线 反算控制点
10-14
贝塞尔曲线 反算控制点 偏移 镜像 旋转 缩放 拖动 裁剪 计算封闭面积 判断点是否在封闭曲线内部
贝塞尔曲线画法
04-28 210
[b]转载：[url]http://blog.csdn.net/xiaominghimi/article/details/6555828[/url][/b] 首先对于《赛贝尔曲线》不是很了解的童鞋，请自觉白度百科、google等等... 为了方便偷懒的童鞋，这里给个《贝赛尔曲线》百科地址，以及一段话简述《贝赛尔曲线》： 《贝赛尔曲线》白度百科快速地址：[url]http://...
分分钟提高效率的18个神仙网站，你都用过几个？
大鱼吃小鱼7的博客
03-07 2545
1.ipaddress - ip查询工具：https://www.ipaddress.com/ 不知道本机IP， 一进入网址就可以查到，还能查询到ip的详情信息， 追踪域名，端口信息。 2.json - 在线解析工具 https://www.json.cn/ 开发时看网络请求不清晰，直接把response里面的数据拷贝到json.cn， 完整的json格式看起来就很舒服， 也可以直接编辑，改成你想要的结果。 同时它也是一个在线编译器， 可以编译几十种语言， 另外它也可以是个计算工具， 不仅能当计算器，长度
canvas-js贝塞尔曲线代码在线生成工具
weixin_34128411的博客
04-17 3320
详细内容请点击 canvas贝塞尔曲线代码在线生成工具 可以快速生成二次、三次贝塞尔曲线的源码生成器，方便经常使用到canvas画图的同学使用，可以直接预览效果随意画出自己想要的图像。 生成源码效果预览： canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d") ctx.lin...
在Editor模式下编辑贝塞尔曲线
二哈
05-06 2307
贝塞尔曲线的原理以及具体实现方式在网上随处可见，这里不再赘述。实际上，在Unity的Editor模式下，系统已经提供了现成的接口，只需要简单的几行代码，便能实现可自由拖曳的贝塞尔曲线。 首先，创建一个Bezier.cs文件，具体代码如下： //将代码添加至任意GameObject即可 using UnityEngine; using System.Collections; public c
贝塞尔曲线的生成
wphkadn的博客
03-04 1331
贝塞尔曲线的公式 贝塞尔曲线的动态图 该网址包含了简单的一阶二阶三阶曲线的公式. 贝塞尔曲线可以表示如下: B(t)=∑i=0nCin(1−t)n−itiPi B(t) = \sum_{i=0}^{n}C_i^{n}(1-t)^{n-i}t^iP_iB(t)=i=0∑n​Cin​(1−t)n−itiPi​ 其中 Cin=n!i!(n−i)! C_i^n =\frac{n!}{i!(n-i)...
cubic-bezier怎么使用
最新发布
09-27
`cubic-bezier` 是一种用于定义 CSS 动画中贝塞尔曲线的关键帧动画的语法，它允许创建平滑的过渡效果。这种曲线通常用于控制元素位置、大小、透明度等属性的变化速度和形状。 它的基本格式是这样的： ```css property-name: cubic-bezier(x1, y1, x2, y2); ``` 其中： - `property-name` 是你要改变的CSS属性，如 `transform`, `opacity`, `background-color` 等。 - `(x1, y1)` 和 `(x2, y2)` 是两个点，分别决定了曲线的起始点(0%处)和结束点(100%处)，以及中间的拐点。x 值代表时间百分比(t)，y 值则对应了属性值的变化程度。 例如，下面的动画会使得元素从左到右平滑移动，并在中间有一个快速停止然后慢慢恢复的过程： ```css transition: transform 1s cubic-bezier(0, 0, 0.5, 1); transform: translateX(-100%); ``` 在这个例子中，`(0, 0)` 表示开始立即平移，`(0.5, 1)` 则表示在 50% 的时间点达到最大偏移，之后逐渐返回原位。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值