箭頭動畫再改進

此前我已經做了兩個簡易箭頭動畫:

後來在跟朋友談到這件事時,忽然想到還有一種更簡單的方法:

代碼:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="240.0px" height="240.0px">
<line x1="120" y1="0" x2="120" y2="228" stroke="blue" stroke-width="4"/>
<polygon stroke="none" fill="blue" points="114,228 126,228 120,240" />
<animateTransform attributeName="transform" attributeType="XML" type="translate"
values="0 -240;0 0;0 0;0 240" dur="7s" repeatCount="indefinite"/>
</svg>

小的箭頭:

Leave a Comment