如何在不使用 js 或 css 的情况下创建 svg 动画 [关闭]

【问题标题】：how to create svg animations without using js or css [closed]如何在不使用 js 或 css 的情况下创建 svg 动画 [关闭]
【发布时间】：2019-06-27 22:14:04
【问题描述】：

不知道如何编码的设计师如何创建 svg 动画？尝试使用带有 Animate SVG Exporter 的 Adob​​e Animate CC，但是当 .fla 文件导出为 svg 时，它会丢失所有或大部分动画。

【问题讨论】：

标签： animation svg jquery-animate adobe open-source


【解决方案1】：

SVG 微笑动画

假设你有这个svg 

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="50%" height="50%" viewBox="0 0 47.4 47.7" style="enable-background:new 0 0 47.4 47.7;" xml:space="preserve">
<style type="text/css">
    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#FEC558;stroke-width:0.5;stroke-miterlimit:22.9256;}
    .st1{fill:#FFC656;}
</style>
<path class="st0"   d="M23.7,45.8c12.1,0,22-9.9,22-22c0-12.1-9.9-22-22-22c-12.1,0-22,9.9-22,22C1.7,35.9,11.6,45.8,23.7,45.8z"/>
    <g>
        <polygon class="st1"
		  points="14.1,17.9 14.1,20.2 14.1,22.2 14.1,23.4 14.1,24.7 14.1,27.6 32.7,35.2 32.7,32.5 32.7,30.7 
                32.7,29.7 32.7,28.5 32.7,25.2   "/>
        <polygon class="st1"
    		points="19.2,18.7 24.3,20.6 27.5,21.9 27.5,21.2 27.5,19.4 27.5,17.5 27.5,16.3 27.5,15.2 27.5,12.5       15.5,17.2 19.2,18.7"/>
    </g>
</svg>

  • 用JS判断对象的长度

    <script> function TotalLength(){ var path = document.querySelector('#circle'); var len = Math.round(path.getTotalLength() ); alert("path length - " + len); }; </script>

    路径长度：

    圈子 - 138px

    对于梯形 - 60px

    对于三角形 - 35px

    • 对象动画绘制命令

&lt;animate id="an_circle" attributeName="stroke-dashoffset" values="138;0" dur="2s" fill="freeze" /&gt;

&lt;animate id="an_trap" attributeName="stroke-dashoffset" values="60;0" dur="1s" fill="freeze" /&gt;

&lt;animate id="an_triangle" attributeName="stroke-dashoffset" begin="an_trap.end" values="35;0" dur="1s" fill="freeze" /&gt;

  • 绘制三角形的动画将在 梯形的绘制

    begin="an_trap.end"

  • 动画填充颜色梯形将在动画开始时开始 画完一个圆

    &lt;animate id="fill_trap" attributeName="fill" values="#33363D;#FEC558" begin="an_circle.end" dur="1s" fill="freeze" /&gt;

  • 三角形的颜色填充动画将在 梯形结束的填充动画

    &lt;animate id="fill_triangle" attributeName="fill" values="#33363D;#FEC558" begin="fill_trap.end-0.5s" dur="1s" fill="freeze" /&gt;

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30%" height="30%" viewBox="0 0 47.4 47.7" style="enable-background:new 0 0 47.4 47.7;" xml:space="preserve">
<style type="text/css">
    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#FEC558;stroke-width:0.5;stroke-miterlimit:22.9256;}
    .st1{fill:#FFC656;}
</style>
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%" >
         
            <stop offset="0%" stop-color="#33363D"/>
            <stop offset="100%" stop-color="#5B5D5A"/>
</lineargradient>
</defs> 
<rect width="100%" height="100%" fill="url(#grad)"/>

<path id="circle" class="st0" stroke-dashoffset="138" stroke-dasharray="138" d="M23.7,45.8c12.1,0,22-9.9,22-22c0-12.1-9.9-22-22-22c-12.1,0-22,9.9-22,22C1.7,35.9,11.6,45.8,23.7,45.8z">
<animate id="an_circle" attributeName="stroke-dashoffset" values="138;0" dur="2s" fill="freeze" />
</path>
    <g stroke-width="0.5">
       <path id="trap" class="st1" stroke-dashoffset="60" stroke-dasharray="60" style="fill:none; stroke:#FEC558;" d="M14.1,17.9 14.1,20.2 14.1,22.2 14.1,23.4 14.1,24.7 14.1,27.6 32.7,35.2 32.7,32.5 32.7,30.7  32.7,29.7 32.7,28.5 32.7,25.2z">
       	<animate id="an_trap" attributeName="stroke-dashoffset" values="60;0" dur="1s" fill="freeze" />
        <animate id="fill_trap" attributeName="fill" values="#33363D;#FEC558"  begin="an_circle.end" dur="1s" fill="freeze" />
	 </path>
        <path id="triangle" class="st1" stroke-dashoffset="35" stroke-dasharray="35" style="fill:none; stroke:#FEC558;"  d="M19.2,18.7 24.3,20.6 27.5,21.9 27.5,21.2 27.5,19.4 27.5,17.5 27.5,16.3 27.5,15.2 27.5,12.5 15.5,17.2 19.2,18.7">
		
		<animate id="an_triangle" attributeName="stroke-dashoffset" begin="an_trap.end" values="35;0" dur="1s" fill="freeze" />
		  <animate id="fill_triangle" attributeName="fill" values="#33363D;#FEC558"  begin="fill_trap.end-0.5s" dur="1s" fill="freeze" />
      </path>
    </g>
</svg>

CSS 解决方案

  • 使用 CSS 实现了绘制形状轮廓的动画 规则：

为了圈子 

.circle {
    fill:none;
    stroke:#FEC558;
    stroke-dashoffset:138.5;
    stroke-dasharray:138.5;
    animation: circle_stroke 2s ease-in forwards;
        } 

    @keyframes circle_stroke {
    0% {
    stroke-dashoffset: 138.5;
    }
    100% {
    stroke-dashoffset: 0;
      }
    }
  • 动画梯形轮廓图并用颜色填充它

代码如下

.trap {
    stroke-dashoffset:60;
    stroke-dasharray:60;
        animation:trap_stroke 2s ease-in-out forwards,  trap_fill  ease-in 3s forwards;

    }

    @keyframes trap_stroke {
    0% {
    stroke-dashoffset: 60.5;
    }

      100% {
    stroke-dashoffset: 0;
      }
    }  

    @keyframes trap_fill {
    0% {
    fill: none;
    }

      100% {
    fill: #FEC558;
      }
    }

完整的动画代码 

 .trap, .triangle {
   stroke:#FEC558;
   stroke-width:0.5;
	fill:none;
   }
	
	.circle {
	fill:none;
	stroke:#FEC558;
	stroke-dashoffset:138.5;
	stroke-dasharray:138.5;
	animation: circle_stroke 2s ease-in forwards;
		} 
	
	@keyframes circle_stroke {
	0% {
   	stroke-dashoffset: 138.5;
	}
	100% {
   	stroke-dashoffset: 0;
	  }
	}
	

	
	
	.trap {
	stroke-dashoffset:60;
	stroke-dasharray:60;
		animation:trap_stroke 2s ease-in-out forwards,  trap_fill  ease-in 3s forwards;
	
	}
	
	@keyframes trap_stroke {
	0% {
   	stroke-dashoffset: 60.5;
	}
		  
	  100% {
   	stroke-dashoffset: 0;
	  }
	}  
	
	@keyframes trap_fill {
	0% {
   	fill: none;
	}
		  
	  100% {
   	fill: #FEC558;
	  }
	}  


	.triangle {
	stroke-dashoffset:35.5;
	stroke-dasharray:35.5;
	
	animation: triangle_stroke 1s ease-in-out forwards, triangle_fill 3.5s ease-in forwards;
	}  
	
	@keyframes triangle_stroke {
	0% {
   	stroke-dashoffset: 35.5;
	}
	100% {
   	stroke-dashoffset: 0;
	  }
	}  
	
	@keyframes triangle_fill {
	0% {
   	fill: none;
	}
	100% {
   	fill: #FEC558;;
	  }
	}
	
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30%" height="30%" viewBox="0 0 47.4 47.7" style="enable-background:new 0 0 47.4 47.7;" xml:space="preserve">  

<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%" >
         
            <stop offset="0%" stop-color="#33363D"/>
            <stop offset="100%" stop-color="#5B5D5A"/>
</lineargradient>
</defs> 
<rect width="100%" height="100%" fill="url(#grad)"/>

<path class="circle" d="M23.7,45.8c12.1,0,22-9.9,22-22c0-12.1-9.9-22-22-22c-12.1,0-22,9.9-22,22C1.7,35.9,11.6,45.8,23.7,45.8z"/>

    
       <path class="trap"    d="M14.1,17.9 14.1,20.2 14.1,22.2 14.1,23.4 14.1,24.7 14.1,27.6 32.7,35.2 32.7,32.5 32.7,30.7  32.7,29.7 32.7,28.5 32.7,25.2z" />
       	  
        <path class="triangle"   d="M19.2,18.7 24.3,20.6 27.5,21.9 27.5,21.2 27.5,19.4 27.5,17.5 27.5,16.3 27.5,15.2 27.5,12.5 15.5,17.2 19.2,18.7"/>
	

</svg>

UPD

适用于所有现代浏览器，除了 IE

“IE10 and IE11 do not support CSS keyframe blocks inside media queries。”

（参见“已知问题”）

【讨论】：

  • 这是很多代码。我正在寻找创建 svg 动画的视觉方式。
  • @user2306700 要获得您需要的答案，有必要提供更具体的信息。添加您的尝试。对不起，我帮不了你。
  • @user2306700 恐怕你来错地方了。该网站适用于programming Q & A。
  • @user2306700，在第二个示例中（此答案顶部的第二个 sn-p），您之前已完整解释了答案。如果你认为你只能用眼睛计算路径长度，那你就大错特错了。所有带有动画值的计算都必须使用一些代码进行计算。但是您在最后的示例中看不到此代码，因此您认为所有动画都是仅使用人眼制作的，没有经过计算，但这是错误的。您在这里有很好的答案和很好的解释，您必须在答案的左侧将其标记为已接受。
猜你喜欢
  • 2021-11-17
  • 2023-03-21
  • 2012-06-05
  • 1970-01-01
  • 2014-07-30
  • 2013-11-05
  • 1970-01-01
  • 1970-01-01
  • 2018-02-20
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode