Question

我希望动画能像https://codepen.io/shshaw/pen/Hjyio一样工作，就像从头开始绘制图像一样。但是我的动画首先要做的是擦除图片，然后再次绘制。

<soapenv:Body>

    <ns2:getInputResponse xmlns:ns2="http://docs.oasisopen.org/ns/bpel4people/ws-humantask/api/200803">

        <ns2:taskData xmlns:s186="http://www.w3.org/2001/XMLSchema-instance" xmlns:s187="http://www.w3.org/2001/XMLSchema" s186:type="s187:string">&lt;?xml version="1.0" encoding="UTF-8"?>

&lt;SubscriptionApprovalData xmlns="http://workflow.subscription.apimgt.carbon.wso2.org" xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/">

     &lt;apiName>Auto_Approval&lt;/apiName>

     &lt;apiVersion>v1&lt;/apiVersion>

     &lt;apiContext>/test/lambda/v1&lt;/apiContext>

     &lt;apiProvider>admin&lt;/apiProvider>

     &lt;subscriber>regtest&lt;/subscriber>

     &lt;applicationName>newApp&lt;/applicationName>

     &lt;tierName>Gold&lt;/tierName>

     &lt;workflowExternalRef&gt;23d30bd8-51e3-4afe-aae0-3fa159d85a6b&lt;/workflowExternalRef>

     &lt;callBackURL>https://apistore-dev-dev-a878-14-ams10-nonp.qcpaws.qantas.com.au/services/WorkflowCallbackService&lt;/callBackURL>
  &lt;/SubscriptionApprovalData></ns2:taskData>

    </ns2:getInputResponse>

</soapenv:Body>

path {
  fill: #FFF;
  stroke: #000;
  animation: my_animation 3s linear forwards;
  stroke-dasharray: 400;
}

@keyframes my_animation {
  0% {
    stroke-dashoffset: 0; 
  }
  50% {
    stroke-dashoffset: 400;
  }
  100% {
    stroke-dashoffset: 0; 
  }
}

有任何帮助或建议，因此它仅开始绘制而不是首先擦除它，还最后如何填充颜色？

Answer 1

将起始关键帧设置为以stroke-dashoffset: 400开头，或者将其添加到path规则中，并使用单独的animation进行填充< / em>：

path { fill: #fff; stroke: #000; animation: my_animation 3s linear forwards, filling .5s linear 3s forwards; stroke-dasharray: 400; /* need to ... */ stroke-dashoffset: 400; /* ... match */ } @keyframes my_animation { to {stroke-dashoffset: 0} } @keyframes filling { to {fill: #000} }

<?xml version="1.0" encoding="iso-8859-1"?>  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 89.999 89.999" style="enable-background:new 0 0 89.999 89.999;" xml:space="preserve" width="512px" height="512px"> <g> <path d="M89.551,24.201c-5.029,28.863-33.127,53.301-41.577,58.883c-8.454,5.582-16.163-2.236-18.96-8.148 c-3.201-6.738-12.793-43.285-15.307-46.311C11.195,25.596,3.656,31.65,3.656,31.65L0,26.768c0,0,15.307-18.623,26.957-20.951 c12.35-2.469,12.332,19.318,15.301,31.416c2.873,11.701,4.807,18.398,7.312,18.398c2.514,0,7.311-6.525,12.562-16.531 c5.264-10.016-0.225-18.857-10.505-12.568C55.738,1.395,94.578-4.65,89.551,24.201z" fill="#ff0043"/> </g> </svg>

SVG线条动画先擦除然后画图

1 个答案: