一些好用的SVG代码——位移动画

Author Avatar
Rui 02月 07,2020
  • 在其它设备中阅读本文章

单纯位移

<animateTransform attributeName="transform" type="translate" values="0 0;0 26" repeatCount="indefinite" fill="freeze" begin="click" dur=".5s" ></animateTransform>

gif控制器式位移

<animateTransform attributeName="transform" type="translate" values="0 0;-10000 0;-10000 0" calcMode="discrete" begin="click" dur="100s" keyTimes="0;0.00001;1" fill="freeze" restart="never"></animateTransform>

案例Dior回到未来

抽签式位移

<animateTransform attributeName="transform" type="translate" values="-1000 0;-2000 0;-3000 0;-4000 0;-5000 0;-6000 0;-7000 0;-8000 0;" repeatCount="indefinite" fill="freeze" begin="0s" end="click+.3s" dur="1s" calcMode="discrete"></animateTransform>

案例牛津祝您新春快乐,阖家团圆!

沿线路径动画

怎样一碗面,才算至味珍鲜?

<animateMotion path="M0,0c0,203-111,317-111,507s110,337,110,522
	s-110.5,366.5-109.2,516.2S-7,1899.3-4,2069.3s-104.8,408.9-104.9,531.4S-3,2919.3,1,3067.3s-48,602-50,798s0,474,0,474" rotate="auto" begin="click" dur="20s" fill="freeze" repeatCount="1" additive="sum"></animateMotion>

备用设计

<g>
	<g>
	<image overflow="visible" width="356" height="322" href="http://m.qpic.cn/psc?/V10B6ckD2ebJ83/S1G4*2hi*D5aPIJug2nMa0*9r4vsdmWxJoorHP1NzjxCbvBw8Q5cPfb2PC.cSqTsr9dlkGu4RqeySQQJ6yq5LBc7sYlcejjUJJ8Pc1MJabk!/b&amp;bo=ZAFCAWQBQgEDGTw!&amp;rf=viewer_4" transform="matrix(1 0 0 1 -370.5 -156.5)">
	</image>
	<animate attributeName="opacity" values="1;0;0;0" begin="0s" dur="0.8s" repeatCount="indefinite" calcMode="discrete"></animate>
	</g>
	<g>
	<image overflow="visible" width="370" height="329" href="http://m.qpic.cn/psc?/V10B6ckD2ebJ83/S1G4*2hi*D5aPIJug2nMa1q7VsBP46HOT*h8HUi9xquhtOZRLCWijvRKN1.gdm5vcbnonr72rwD6ohxQTIIFK.ZOlzebczD*sux7oWTW1ac!/b&amp;bo=cgFJAXIBSQEDGTw!&amp;rf=viewer_4" transform="matrix(1 0 0 1 -377.5 -163.5)">
	</image>
	<animate attributeName="opacity" values="0;1;0;0" begin="0s" dur="0.8s" repeatCount="indefinite" calcMode="discrete"></animate>
	</g>
	<g>
	<image overflow="visible" width="378" height="319" href="http://m.qpic.cn/psc?/V10B6ckD2ebJ83/S1G4*2hi*D5aPIJug2nMa39HSnHjZJgsIyZHk1r5t1grcCi2lgVKR7ce1G2ucji7wnvD25axsrlWSqHcqY28fBbIbb5jGD1To7krSeY6rDk!/b&amp;bo=egE*AXoBPwEDGTw!&amp;rf=viewer_4" transform="matrix(1 0 0 1 -377.5 -164.5)">
	</image><animate attributeName="opacity" values="0;0;1;0" begin="0s" dur="0.8s" repeatCount="indefinite" calcMode="discrete"></animate>
	</g>
	<g>
	<image overflow="visible" width="370" height="310" href="http://m.qpic.cn/psc?/V10B6ckD2ebJ83/S1G4*2hi*D5aPIJug2nMa5jYBpXDgnTvBCA4WzKixdiVgjectp1u0a7fKRzs76rLl7hkuvIcQ0HJvgSQmp6yA*1lx55WpAfRQvmmh4b2GIQ!/b&amp;bo=cgE2AXIBNgEDCSw!&amp;rf=viewer_4" transform="matrix(1 0 0 1 -377.5 -148.5)">
	</image><animate attributeName="opacity" values="0;0;0;1" begin="0s" dur="0.8s" repeatCount="indefinite" calcMode="discrete"></animate></g><g>
	<g>
	<image overflow="visible" width="322" height="355" href="http://m.qpic.cn/psc?/V10B6ckD2ebJ83/S1G4*2hi*D5aPIJug2nMayRfOJeQcc2htdtJADzpDm3UBG1lMoDFsJsW4dchd8dxF3MU52*iJf0UDbOny*NbAZsx.PPy7Sbj7yj9TGzGBKY!/b&amp;bo=QgFjAUIBYwEDGTw!&amp;rf=viewer_4" transform="matrix(1 0 0 1 263.5 388.5)">
	</image>
	<animate attributeName="opacity" values="1;0;0;0" begin="0s" dur="0.8s" repeatCount="indefinite" calcMode="discrete"></animate>
	</g>
	<g>
	<image overflow="visible" width="330" height="371" href="http://m.qpic.cn/psc?/V10B6ckD2ebJ83/S1G4*2hi*D5aPIJug2nMa1jcQZx8FVDbmizwMZIjJTB17PdJsea4IPC9VJ2iQIrW5axV7AKC73y0XcNDcdeWM.l2OyIL5sQKmTc355EHKfQ!/b&amp;bo=SgFzAUoBcwEDGTw!&amp;rf=viewer_4" transform="matrix(1 0 0 1 263.5 380.5)">
	</image>
	<animate attributeName="opacity" values="0;1;0;0" begin="0s" dur="0.8s" repeatCount="indefinite" calcMode="discrete"></animate>
	</g>
	<g>
	<image overflow="visible" width="318" height="378" href="http://m.qpic.cn/psc?/V10B6ckD2ebJ83/S1G4*2hi*D5aPIJug2nMa61bDsOl0Z*Bl4ahWNpmTJD5EwCLWIV5Ft5sDYZxV9.mEB8vKFvj2tEizrpJlu6yqJoyFaZidLWT.Hj*0ji40Gw!/b&amp;bo=PgF6AT4BegEDGTw!&amp;rf=viewer_4" transform="matrix(1 0 0 1 275.5 380.5)">
	</image>
	<animate attributeName="opacity" values="0;0;1;0" begin="0s" dur="0.8s" repeatCount="indefinite" calcMode="discrete"></animate>
	</g>
	<g>
	<image overflow="visible" width="311" height="371" href="http://m.qpic.cn/psc?/V10B6ckD2ebJ83/S1G4*2hi*D5aPIJug2nMa2f*CcySQYxyqT0iwob2qCHag7FptNV*PCl9arQxNNmEU*hurjLM58buxbXRvgHi45pL56ZN0hsLY9FOliRzv2Y!/b&amp;bo=NwFzATcBcwEDCSw!&amp;rf=viewer_4" transform="matrix(1 0 0 1 267.5 380.5)">
	</image>
	<animate attributeName="opacity" values="0;0;0;1" begin="0s" dur="0.8s" repeatCount="indefinite" calcMode="discrete"></animate></g><set attributeName="visibility" from="visible" to="hidden" begin="click"></set></g><animateMotion path="M0.5-0.5v10c-8.4,27.6-20.9,44.6-29,54c-53.4,61.6-133.4,40.5-202,106c-14.7,14.1-24.2,27.7-29,35
		c0,3,0,6,0,9" rotate="auto" begin="click" dur="2s" fill="freeze" repeatCount="1" additive="sum">
	</animateMotion>
	<animateMotion path="M0,0h10c40.8-2,85.9,2.5,131,21c152.9,62.9,161,227.9,325,330c53.7,33.5,107.3,49.7,151,58
		c1.7,0,3.3,0,5,0" rotate="auto" begin="click+10" dur="2s" fill="freeze" repeatCount="1" additive="sum">
	</animateMotion>
	<animateMotion path="M0.5,0.5h10c16.3-0.7,40.4,0.5,66,11c35,14.4,66.4,43.6,112,138c61,126.5,50.5,169.2,100,213
		c37.9,33.6,83.7,43.5,114,47c1.7,0,3.3,0,5,0" rotate="auto" begin="click+20s" dur="2s" fill="freeze" repeatCount="1" additive="sum">
	</animateMotion>
	<animateMotion path="M0.5,0.5l24,2c36.8,3.5,59.9,15.8,74,26c105.1,75.9,36.4,269.6,148,356c20,15.5,40.1,23.1,53,27
		c1.3,0,2.7,0,4,0" rotate="auto" begin="click+30s" dur="2s" fill="freeze" repeatCount="1" additive="sum">
	</animateMotion>
	<animateMotion path="M0.5,0.5h10c89-7.8,154.2,6.9,196,21c118.6,39.8,157.9,110,282,145c63.3,17.9,118.5,18.1,153,16
		c313,0,626,0,939,0" rotate="auto" begin="click+40s" dur="8s" fill="freeze" repeatCount="1" additive="sum">
	</animateMotion>

	</g>