Svg动画
这周还做个一个svg动画
主题是花瓣飘落
如果你有时间可以做一做
svg绘制路径工具Method Draw
也可以安装AI
但是AI太大
实际简单的一些用Method Draw就够了
附上一小段代码
<image xlink:href="img/flower.png" x="0" y="0" width="11%" height="10%" transform="rotate(45) rotate(-45)">
<set attributeName="visibility" attributeType="CSS"
to="visible" begin="0s" dur="3s" fill="freeze"></set>
<animateMotion path="m319.5,20.5c-68,170 -189,238 -189.5,237.5" begin="3s;x2.end+3" dur="3s" rotate="auto" fill="remove" id="x1"></animateMotion>
<animateTransform attributeName="transform" begin="3s;x2.end+3" dur="3s" type="rotate" from="0" to="360"></animateTransform>
<animate attributeName="opacity" from="1" to="0" begin="3s;x2.end+3" dur="3s" fill="freeze"></animate>
</image>
<image xlink:href="img/flower.png" x="0" y="0" width="11%" height="10%" style="visibility:hidden;">
<set attributeName="visibility" attributeType="CSS"
to="visible" begin="10s" dur="10s" fill="freeze"></set>
<animateMotion path="m121.5,3.5c-35,91 -122,128 -121.5,127.5" begin="x1.end+4" dur="2s" rotate="auto" id="x2"></animateMotion>
<animateTransform attributeName="transform" begin="x1.end+4" dur="2s" type="rotate" from="0" to="180"></animateTransform>
<animate attributeName="opacity" from="1" to="0" values="1; 0.8;0" keyTimes="0;0.9;1" begin="x1.end+4" dur="2s" fill="freeze"></animate>
</image>
