当前位置:Gxlcms > html代码 > CSS组合动画实现弧形轨迹_html/css_WEB-ITnose

CSS组合动画实现弧形轨迹_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:363人阅读

CSS中的animations 以及 transitions都擅长实现从点A到点B的直线动画。无论你如何调整贝塞尔曲线,你都无法通过animation和transitions让元素沿着曲线运动。自定义线性方法可以产生弹性效果,但是X轴,Y轴上的相对运动还是相同的。

当然可以使用JavaScript来模拟动画,但其实有更简单的方式来绕过这个限制。

先看效果:

单纯对一个元素使用animation或者transition的话,那么计算机会自动选择从A点到B点之间最短的距离。那么如何实现我们想要的曲线效果呢?

拆分之后再组合

物理角度上分析,位移是矢量,我们把它分解成X方向和Y方向的运动。假设我们写了这样的动画:

@keyframes straightLine {  50% { transform: translate3D(100px, -100px, 0); }}.dot { animation: straightLine 2.5s infinite linear;}

从(0,0)移动到(-100, -100)的位置,拆分出来就是从(0,0)到(0, -100)与(0,0)到(-100, 0)的组合。

可能你的第一反应会跟我一样,这样写:

.dot { animation: xAxis 2.5s infinite linear, yAxis 2.5s infinite linear;}@keyframes xAxis {    50% { transform: translateX(100px); }}@keyframes yAxis {    50% { transform: translateY(-100px); }  }

拆分成x,y轴方向上的运动,然后在animation中组合,然而效果是最后声明的动画有效,因为transform属性不能重复定义。

如何组合?

你可以试试这种方式:同一元素上没办法做到,那就拆分成父元素和子元素的动画。

父元素执行从左到右,子元素执行从下到上的动画。

为了让代码看上去更简洁,我们使用伪元素。

接着就是解决两个方向上的同步问题,为了让动画更明显,Demo使用自定义贝塞尔曲线,你也可以使用ease-in, ease-out这类内置的时间性方法。

.demo-dot { animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);}.demo-dot::after { content: '';  display: block;  width: 20px;  height: 20px;  border-radius: 20px;  background-color: #fff;  animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);}@-webkit-keyframes yAxis {  50% { animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1); transform: translateY(-100px); }}@keyframes yAxis {  50% { animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1); transform: translateY(-100px); }}@-webkit-keyframes xAxis {  50% { animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64); transform: translateX(100px); }}@keyframes xAxis {  50% { animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64); transform: translateX(100px); }}

一波操作之后,你就能实现让设计师赞不绝口的动画。

这里使用都是keyframe的动画,你也可以使用transitions,通过left,bottom等属性来实现,但是注意这种方式会每次都触发redraw,你可以看这篇文章。 前端性能优化之更平滑的动画

ps:伪元素动画在低端android机子上可能会失效。

结尾

这篇文章 涂鸦码龙 已经翻译过,翻译得非常不错。重新整理一遍,一来是效果确实很不错,二则是为了加深理解,做了些自己的笔记,作为学习查阅之用。

人气教程排行