SVG - 动画不透明度

时间：2017-05-05 14:44:05

标签： animation svg opacity

你能帮我解决一下，如何创建SVG动画，它的行为会是这样的吗？ https://framer.cloud/aSUDY/

我尽我所能，但总是行为不端： - （

这是我的代码，其中我使用了6个动画来循环（3个动画从0.5到1不透明度，3个到动画反之亦然）

        <?xml version="1.0" encoding="UTF-8"?>
    <svg width="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #000085;">
        
        
        <defs>
            <ellipse id="CON11" fill="#FFFFFF" fill-opacity="0.5" cx="0.583333333" cy="1.5" rx="1" ry="1" >
                <animate 
                        id="anim1" 
                        attributeType="xml"
                        attributeName="fill-opacity" 
                        begin="0s;anim33.end"
                        from="0.5" 
                        to="1" 
                        dur="1s"
                        fill="freeze" 
                />
            </ellipse>
    
            <path id="CON22" fill="#FFFFFF" fill-opacity="0.5" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z">
                <animate 
                        id="anim2" 
                        attributeType="xml"
                        attributeName="fill-opacity" 
                        begin="anim1.end" 
                        from="0.5" 
                        to="1" 
                        dur="1s"
                        fill="freeze" 
                  />
            </path>
    
            <path id="CON33" fill="#FFFFFF" fill-opacity="1" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z">
                <animate 
                        id="anim3" 
                        attributeType="xml"
                        attributeName="fill-opacity" 
                        begin="anim2.end" 
                        from="0.5" 
                        to="1" 
                        dur="1s"
                        fill="freeze" 
                  />
            </path>
    
            <ellipse id="CON11" fill="#FFFFFF" fill-opacity="1" cx="0.583333333" cy="1.5" rx="1" ry="1" >
                <animate 
                        id="anim11" 
                        attributeType="xml"
                        attributeName="fill-opacity" 
                        begin="anim3.end"
                        from="1" 
                        to="0.5" 
                        dur="0.1"
                        fill="freeze" 
                />
            </ellipse>
    
            <path id="CON22" fill="#FFFFFF" fill-opacity="1" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z">
                <animate 
                        id="anim22" 
                        attributeType="xml"
                        attributeName="fill-opacity" 
                        begin="anim11.end"
                        from="1" 
                        to="0.5" 
                        dur="0.1"
                        fill="freeze" 
                />
            </path>
    
            <path id="CON33" fill="#FFFFFF" fill-opacity="0.5" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z">
                
                  <animate 
                        id="anim33" 
                        attributeType="xml"
                        attributeName="fill-opacity" 
                        begin="anim22.end"
                        from="1" 
                        to="0.5" 
                        dur="0.1"
                        fill="freeze" 
                />
            </path>
    
        </defs>
    
    
            
                <g id="ACFT" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-opacity="0.5">
                    <path d="M19,14 L19,12 L11,7 L11,1.5 C11,0.67 10.33,0 9.5,0 C8.67,0 8,0.67 8,1.5 L8,7 L0,12 L0,14 L8,11.5 L8,17 L6,18.5 L6,20 L9.5,19 L13,20 L13,18.5 L11,17 L11,11.5 L19,14 Z" id="Shape"></path>
                </g>
                <g id="CON3" transform="translate(18.000000, 2.000000)" >
                    <use xlink:href="#CON33" ></use>
                </g>
                <g id="CON2" transform="translate(16.000000, 4.000000)" >
                    <use xlink:href="#CON22" ></use>
                </g>
                <g id="CON1" transform="translate(15.000000, 5.000000)" >
                    <use xlink:href="#CON11" ></use>
                </g>
           
        
    </svg>

1 个答案:

答案 0 :(得分：0)

我已将动画更改为使用值，但实际上并不需要将它们链接起来。

我删除了复制和除了增加复杂性之外真正做任何其他事情的元素。

<svg width="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #000085;">

<g id="ACFT" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-opacity="0.5">
     <path d="M19,14 L19,12 L11,7 L11,1.5 C11,0.67 10.33,0 9.5,0 C8.67,0 8,0.67 8,1.5 L8,7 L0,12 L0,14 L8,11.5 L8,17 L6,18.5 L6,20 L9.5,19 L13,20 L13,18.5 L11,17 L11,11.5 L19,14 Z" id="Shape"></path>
 </g>
 <g id="CON3" transform="translate(18.000000, 2.000000)" >
    <path id="CON33" fill="#FFFFFF" fill-opacity="1" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z">
      <animate 
                        id="anim3" 
                        attributeType="xml"
                        attributeName="fill-opacity" 
                        begin="0s" 
                        values="0.5;0.5;0.5;0.5;1" 
                        dur="2s"
                        repeatCount="indefinite" 
                  />
  </path>
   </g>
   <g id="CON2" transform="translate(16.000000, 4.000000)" >
  <path id="CON22" fill="#FFFFFF" fill-opacity="0.5" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z">
     <animate 
                        id="anim2" 
                        attributeType="xml"
                        attributeName="fill-opacity" 
                        begin="0s" 
                        values="0.5;0.5;0.5;1;1" 
                        dur="2s"
                        repeatCount="indefinite" 
                  />
 </path>
   </g>
   <g id="CON1" transform="translate(15.000000, 5.000000)" >
   <ellipse id="CON11" fill="#FFFFFF" fill-opacity="0.5" cx="0.583333333" cy="1.5" rx="1" ry="1" >
      <animate 
                        id="anim1" 
                        attributeType="xml"
                        attributeName="fill-opacity" 
                        begin="0s"
                        values="0.5;0.5;1;1;1" 
                        dur="2s"
                        repeatCount="indefinite"  
                />
    </ellipse>
</g>
</svg>

相关问题
最新问题