26
2017
05

SVG中常用的animate 动画效果


//颜色变化

<animate attributeName="fill" attributeType="XML" from="yellow" to="red" begin="0s" dur="3s" fill="freeze"></animate>



//圆半径放大

<circle cx="200" cy="200" r="200" fill="orange" stroke="rgb(208,21,23)" linejoin="round" stroke-width="1" fill-opacity="0.9" stroke-opacity="0.2">

    <animate attributeType="xml" attributeName="r" from="0" to="200" dur="5s" repeatCount="indefinite" />

</circle>



//左右移动

<text font-family="microsoft yahei" font-size="120" y="150" x="160">

    马

    <animate attributeName="x" values="160;40;160" dur="3s" repeatCount="indefinite" />

</text>


//透明度变化

<text font-family="microsoft yahei" font-size="120" y="160" x="160">马

    <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />

    <animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />

</text>



//沿轨迹移动

<text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马

    <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" rotate="auto" repeatCount="indefinite" />

</text>

<path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />


//放大

<g>

    <text font-family="microsoft yahei" font-size="80" y="100" x="100">马</text>

    <animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="1" to="1.5" repeatCount="indefinite" />

</g>




« 上一篇下一篇 »

相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。