animation - 将 svgator 动画 .svg 转换为步进动画...？

Question

我正在尝试将 svgator 作为 Lottie 的替代品来制作简单的 .svg 动画。效果很好，输出比 Lottie 更节省空间，但是我非常简单的逐帧动画显示了状态之间的淡入淡出，我所追求的是一个阶梯式动画，其中每个元素要么 100% 开启，要么 0% 关闭，中间什么都没有……

我想看看是否可以轻松地将（最终我的动画会更复杂）svgator 输出转换为步进/计算：离散类型的动画......

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 641 502" id="el_ilmpSLv-X"><style>@-webkit-keyframes kf_el_EjRrOdlIJo_an_Ti5zoWBvq{33.33%{opacity: 0;}36.67%{opacity: 1;}0%{opacity: 0;}100%{opacity: 1;}}@keyframes kf_el_EjRrOdlIJo_an_Ti5zoWBvq{33.33%{opacity: 0;}36.67%{opacity: 1;}0%{opacity: 0;}100%{opacity: 1;}}@-webkit-keyframes kf_el_pxtb1N0hIa_an_CNMulV32T{33.33%{opacity: 1;}36.67%{opacity: 0;}0%{opacity: 1;}100%{opacity: 0;}}@keyframes kf_el_pxtb1N0hIa_an_CNMulV32T{33.33%{opacity: 1;}36.67%{opacity: 0;}0%{opacity: 1;}100%{opacity: 0;}}#el_ilmpSLv-X *{-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);animation-timing-function: cubic-bezier(0, 0, 1, 1);}#el_nNxzkZk_8I{-webkit-transform: translate(-230.99px, -174.82px);transform: translate(-230.99px, -174.82px);}#el_92gwHkp6Dw{-webkit-transform: translate(-290.19px, -43.13px) rotate(-13.4deg);transform: translate(-290.19px, -43.13px) rotate(-13.4deg);}#el_CxIlCYRcl-{-webkit-transform: translate(-230.99px, -174.82px);transform: translate(-230.99px, -174.82px);}#el_nJSbOh9Iy4{-webkit-transform: translate(-289.5px, -45.31px) rotate(-13.19deg);transform: translate(-289.5px, -45.31px) rotate(-13.19deg);}#el_lbPqiFesmw{-webkit-transform: translate(-230.99px, -174.82px);transform: translate(-230.99px, -174.82px);}#el_iffZT5dPse{-webkit-transform: translate(-289.65px, -45.25px) rotate(-13.19deg);transform: translate(-289.65px, -45.25px) rotate(-13.19deg);}#el_A_6l2_vhIk{-webkit-transform: translate(-230.99px, -174.82px);transform: translate(-230.99px, -174.82px);}#el_OvlreNeNEJ{-webkit-transform: translate(-289.65px, -45.25px) rotate(-13.19deg);transform: translate(-289.65px, -45.25px) rotate(-13.19deg);}#el_I0gw6ENaS8{-webkit-transform: translate(-230.99px, -174.82px);transform: translate(-230.99px, -174.82px);}#el_BLsas1YGgr{-webkit-transform: translate(-289.65px, -45.25px) rotate(-13.19deg);transform: translate(-289.65px, -45.25px) rotate(-13.19deg);}#el_gT1_0tq2B1W{-webkit-transform: translate(-230.99px, -174.82px);transform: translate(-230.99px, -174.82px);}#el_oXzHc9EGd3-{-webkit-transform: translate(-289.65px, -45.25px) rotate(-13.19deg);transform: translate(-289.65px, -45.25px) rotate(-13.19deg);}#el_P-sV5PZm0YD{-webkit-transform: translate(-230.99px, -174.82px);transform: translate(-230.99px, -174.82px);}#el_gNEMNxP5-y8{-webkit-transform: translate(-265.33px, -104.64px) rotate(-6.93deg);transform: translate(-265.33px, -104.64px) rotate(-6.93deg);}#el_AXxFNbxG9oQ{-webkit-transform: translate(-230.99px, -174.82px);transform: translate(-230.99px, -174.82px);}#el_a-UZoypgSQP{-webkit-transform: translate(-268.97px, -89.09px) rotate(-7.88deg);transform: translate(-268.97px, -89.09px) rotate(-7.88deg);}#el_1aQzMExDvmj{-webkit-transform: translate(-230.99px, -174.82px);transform: translate(-230.99px, -174.82px);}#el_gwdfyZ4YTB4{-webkit-transform: translate(-290.35px, -51.36px) rotate(-13.19deg);transform: translate(-290.35px, -51.36px) rotate(-13.19deg);}#el_7KW-yU3Eysy{-webkit-transform: translate(-230.99px, -174.82px);transform: translate(-230.99px, -174.82px);}#el_NHylgBqgnWw{-webkit-transform: translate(-303.37px, -28.78px) rotate(-16.77deg);transform: translate(-303.37px, -28.78px) rotate(-16.77deg);}#el_bq1c8QFdu6R{-webkit-transform: translate(-230.99px, -174.82px);transform: translate(-230.99px, -174.82px);}#el_KqudRjYIS5k{-webkit-transform: translate(-268.97px, -89.09px) rotate(-7.88deg);transform: translate(-268.97px, -89.09px) rotate(-7.88deg);}#el_lz0MOgbcZnB{-webkit-transform: translate(-230.99px, -174.82px);transform: translate(-230.99px, -174.82px);}#el_Ge4Dsk3HHzq{-webkit-transform: translate(-268.97px, -89.09px) rotate(-7.88deg);transform: translate(-268.97px, -89.09px) rotate(-7.88deg);}#el_gLMxy-F6Bo{visibility: hidden;}#el_AnEa_QC8_j{visibility: hidden;}#el_2AvfH97ZDy{visibility: hidden;}#el_Esw-BxLaTXk{visibility: hidden;}#el_FFePyia9cPd{visibility: hidden;}#el_w33Wzt7EwmN{visibility: hidden;}#el_3VZE7jfwFnj{visibility: hidden;}#el_cPk2rY0Gan-{visibility: hidden;}#el_qtbY9iKcjwN{visibility: hidden;}#el_oeqpnshpnuh{visibility: hidden;}#el_pxtb1N0hIa{-webkit-animation-fill-mode: backwards;animation-fill-mode: backwards;opacity: 1;-webkit-animation-name: kf_el_pxtb1N0hIa_an_CNMulV32T;animation-name: kf_el_pxtb1N0hIa_an_CNMulV32T;-webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);}#el_EjRrOdlIJo{-webkit-animation-fill-mode: backwards;animation-fill-mode: backwards;opacity: 0;-webkit-animation-name: kf_el_EjRrOdlIJo_an_Ti5zoWBvq;animation-name: kf_el_EjRrOdlIJo_an_Ti5zoWBvq;-webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);}</style><title>blinkswivel_refix_Illout2</title><g id="el_pxtb1N0hIa"><path d="M720.74,472.13c33.89-5.12,61.38-25.58,79.29-49.87,16-22.39,25.57-55.63,25.57-94.63,0-45.4-10.87-78-33.89-101.66-30.05-32-81.84-51.15-161.12-51.15H231v501.9H401.7V499.62H557.06l124.68,177.1H872.27ZM531,384.43c-115.47,0-164.49-75.07-164.49-75.07s49-75.06,164.49-75.06,164.48,75.06,164.48,75.06S646.46,384.43,531,384.43Z" id="el_nNxzkZk_8I"/><circle cx="531" cy="317.87" r="48.83" id="el_92gwHkp6Dw"/></g><g id="el_EjRrOdlIJo"><path d="M720.74,472.13c33.89-5.12,61.38-25.58,79.29-49.87,16-22.39,25.57-55.63,25.57-94.63,0-45.4-10.87-78-33.89-101.66-30.05-32-81.84-51.15-161.12-51.15H231v501.9H401.7V499.62H557.06l124.68,177.1H872.27ZM531,384.43c-115.47,0-164.49-75.07-164.49-75.07s49.1-7.06,164.56-7.06,164.41,7.06,164.41,7.06S646.46,384.43,531,384.43Z" id="el_CxIlCYRcl-"/><circle cx="531" cy="317.87" r="48.83" id="el_nJSbOh9Iy4"/></g></svg>

我的目标是看到一个动画“r”，其中绘制的元素总是纯黑色。

标签： animationsvgsvg-animate