贝塞尔曲线 css 怎么计算 这个公式我看了半天没看懂这些参数

html-css010

贝塞尔曲线 css 怎么计算 这个公式我看了半天没看懂这些参数,第1张

CSS动画中使用的是三阶曲线,如下图所示,三阶曲线共有P0,P1,P2,P3四个节点,其中P0是起点、P3是终点,P1和P2是控制点。同时CSS中使用的曲线,有些特殊,它固定了起点P0(0,0)和终点P3(1,1),仅有控制点可以移动。移动控制点可以改变曲线的曲率(弯曲的程度),通过曲率的变化反映出速率的变化,应用于动画之中。

之后我们来看下曲率对应速率变化的规律。X轴和Y轴,我们理解为时间轴和距离变化轴,那么单位时间内,距离变化的多少,反应出来的就是速度的快慢。

下图中,X轴的切分是均等的,同时虚线矩形内,x1对应的y1、x2对应的y2,也是相等的,那么认为起点到终点是匀速变化的。

下图中,X轴的切分是均等的,同时虚线矩形内,x1对应的y1 大于 x2对应的y2,那么认为起点到终点的运动过程中,速度是先快后慢的。

这两种曲线反应到具体的动画之中的效果如下。

CSS动画中,使用贝塞尔曲线作为值的属性有两个,transition-timing-function,animation-timing-function,格式为cubic-bezier(P1x,P1y,P2x,P2y),实际应用中的代码实例 transition: all 3.0s cubic-bezier(0.75, 0.25, 0.25, 0.75)。

可能你大多看到的是,ease,linear,ease-in-out 这样的属性值,其实它们也是贝塞尔曲线值,只不过是官方预定义的,以简化明了的名称,替代了复杂的数值书写方式。

以下是一些预定义名称对应的曲线值:

ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)

linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)

ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)

ease-out: cubic-bezier(0, 0, 0.58, 1.0)

ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

可以x和y分开写动画,速度不一样,就形成曲率了

@keyframes anix {

0% {top: 0}

100% {top: 200px}

}

@keyframes aniy {

0% {left: 0}

100% {left: 100px}

}

一、实现CSS3无限循环动画代码示例。

代码如下:

CSS:

@-webkit-keyframes gogogo {

0%{

-webkit-transform: rotate(0deg)

border:5px solid red

}

50%{

-webkit-transform: rotate(180deg)

background:black

border:5px solid yellow

}

100%{

-webkit-transform: rotate(360deg)

background:white

border:5px solid red

}

}

.loading{

border:5px solid black

border-radius:40px

width: 28px

height: 188px

-webkit-animation:gogogo 2s infinite linear

margin:100px

}

扩展资料

实现动画无限循环所需要的CSS属性说明:

1、infinite

在animation后面加上infinite就可以无限循环,另外还可以做反向循环使用animation-direction

2、animation-name

规定需要绑定到选择器的 keyframe 名称。

3、animation-duration

规定完成动画所花费的时间,以秒或毫秒计。

4、animation-timing-function

规定动画的速度曲线。

5、animation-delay

规定在动画开始之前的延迟。

6、animation-iteration-count

规定动画应该播放的次数。

7、animation-direction

规定是否应该轮流反向播放动画。