animate-timing-function属性的cubic-bezier() 函数比较贝塞尔曲线的快慢

今天前端笔试遇到了一个题考察动画animate-timing-function属性的cubic-bezier() 函数,比较贝塞尔曲线的快慢。
如题:
【问题】下面使用Animate-timing-function定义的贝塞尔曲线,哪一个是先快后慢的(A)

A. animation-timing-function :cubic-bezier(.22,1.23,.97,.89)

B. animation-timing-function :cubic-bezier(1.23,…22,97,.89)

C. animation-timing-function :cubic-bezier(1.23,.97,.89,.22)

D. animation-timing-function :cubic-bezier(.22,.97,.89,1.23)

解析:
A.k1=5.59,k2=0.91 先快后慢
B.k1=0.17,k2=0.009 慢
C.k1=0.78,k2=0.24 慢
D.k1=0.22,k2=1.38 先慢后快
在这里插入图片描述
在这里插入图片描述
【知识点:Animate-timing-function定义的贝塞尔曲线】

①transition-timing-function属性

transition-timing-function属性指定切换效果的速度。

此属性允许一个过渡效果,以改变其持续时间的速度。

语法:transition-timing-function: cubic-bezier(n,n,n,n);

https://www.runoob.com/cssref/css3-pr-transition-timing-function.html

②cubic-bezier() 函数

cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。

贝塞尔曲线由四个点 P0,P1,P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是(0,0)并且表示初始时间和初始状态,P3是(1,1)并且表示最终时间和最终状态。
在这里插入图片描述我们需要关注的是 P1 和 P2 两点的取值,而其中 X 轴的取值范围是 0 到 1,当取值超出范围时 cubic-bezier 将失效;Y 轴的取值没有规定,当然也毋须过大。

最直接的理解是,将以一条直线放在范围只有 1 的坐标轴中,并从中间拿出两个点来拉扯(X 轴的取值区间是 [0, 1],Y 轴任意),最后形成的曲线就是动画的速度曲线。

cubic-bezier() 可用于 animation-timing-function 和 transition-timing-function 属性。

语法:cubic-bezier(x1,y1,x2,y2)

https://www.runoob.com/cssref/func-cubic-bezier.html

③贝塞尔曲线的快慢

cubic-bezier(x1,y1,x2,y2)

快慢由斜率k决定,k1=y1/x1,k2=y2/x2,k>1 则为快,k<1则为慢

图解 https://cubic-bezier.com/#.17,.67,.83,.67
在这里插入图片描述

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序媛夏天

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值