技术想法

用更新的技术,实现您更新的想法

如何使用svg制作一个无线循环的射箭动作

最近微信公众号很流行用svg进行图形内容的编排,有些互动做的非常有创意,今天小跃就给大家简单用svg制作一个无限循环的射箭动作,具体代码分享如下(注意这个不能支持应用到微信公众号的微信推文中,该代码仅为示意svg的简单应用,并不试用于微信推文)

SVG确实能很好的增加公众号推文的互动性,如果想了解SVG制作的相关事宜,也可以联系我们咨询具体的制作事宜,费用事宜。



先看效果!

tutieshi_640x478_1s.gif


1,HTML部分代码

<!-- <div id="slider"></div> -->
<div class="container">
	<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400">
		<g class="bow-arrow">
			<g class="bow">
				<path class="string" d="M 316,80 s 50,98, 50,100 -50,100 -50,100" fill="none" stroke="#2c3944" stroke-miterlimit="10"/>
				<g class="bow-frame">
					<path d="M283.53 122.07c4-3.33 3.9-8.35 11.6-13.77 5.92-4.16 12.8-12.9 14.29-17.17l-2.92-1.77.14-.26a86.22 86.22 0 0 1-16.92 20.74c-4.43 3.83-6.41 8.13-7.81 10-4.45 5.87-18.81 12.35-9.32 41.65 0 0 .82-.94 3.86-.9.04-1.59-9.88-24.51 7.08-38.52z" fill="#ffce54" />
					<path d="M295.12 108.31c-7.7 5.41-7.57 10.44-11.6 13.77-17 14-7 36.91-7.08 38.5l1.12.06h.41c-.26-1-3.35-13.06-3-20 .29-5.67 4.79-12.89 6.19-14.61s3.73-3 7.28-9.26c3.79-6.64 12.51-8.94 21.87-25.05l-1-.58c-1.38 4.27-8.31 13-14.19 17.17z" fill="#fca12c" />
					<path d="M309.67 266.4a63.51 63.51 0 0 0-9.12-12.33 65.69 65.69 0 0 1 9.09 12.35zm-32.53-65.9c-.1.39-.52 2.16-1 4.5.36-1.7.71-3.26 1-4.5z" fill="#ffce54" />
					<path d="M293.93 248.71c-7.28-6-6.78-9.24-10.81-12.57-14-11.56-9.68-29.19-7.77-35.88-3-.64-3.23-2.18-3.25-2.42-8.92 28.29 5.07 34.77 9.43 40.59 1.39 1.86 3.34 6.16 7.75 10a85.27 85.27 0 0 1 16.26 19.93l3.34-1.6c-1.72-4.38-9.43-13.53-14.95-18.05z" fill="#ffce54" />
					<path d="M283.57 235c-1.13-1.24-2-2-2.7-2.82a27.56 27.56 0 0 1-2.12-3.26 24.8 24.8 0 0 0 2.06 3.23c.69.85 1.6 1.62 2.76 2.85zm-8.82-17.72v.07a36.31 36.31 0 0 1 .25-5.08 33.24 33.24 0 0 0-.25 5.01z" fill="#ffce54" />
					<path d="M278.75 229c-1.75-3.14-3.8-7.78-4-11.61v.23c.19 3.75 2.25 8.25 4 11.38zm-2.59-24c-.45 2.29-.89 4.84-1.16 7.27.29-2.5.74-5.13 1.16-7.27zm24.39 49.07c-5.46-5.78-10-8.26-12.46-12.63a35 35 0 0 0-4.31-6.16 34.8 34.8 0 0 1 4.32 6.24c2.45 4.34 7 6.85 12.45 12.55z" fill="#ffca47" />
					<path d="M275.35 200.26c-1.91 6.69-6.23 24.31 7.77 35.88 4 3.33 3.54 6.6 10.81 12.57 5.52 4.52 13.23 13.68 15 18.07l.75-.36a65.69 65.69 0 0 0-9.09-12.35c-5.44-5.7-10-8.21-12.44-12.55a34.8 34.8 0 0 0-4.32-6.24l-.12-.13-.1-.11c-1.16-1.27-2.07-2-2.76-2.86a24.8 24.8 0 0 1-2.06-3.23c-1.76-3.08-3.82-7.58-4-11.38v-.3a33.24 33.24 0 0 1 .25-5c.27-2.43.7-5 1.16-7.27s.87-4.11 1-4.5c-.75-.05-1.96.27-1.85-.24z" fill="#fca12c" />
					<path d="M314.71 79.17a32.88 32.88 0 0 1 1.86-3.95 3 3 0 0 0 .32-.88c-1-.76-2.31-.47-4 3l-.08.16a2.6 2.6 0 0 0 1.9 1.67zm-5.3 11.97l1 .58-1-.58c2.4-3.45 3.56-7.53 5.1-11.45a2.68 2.68 0 0 1-2-1.61c-1.17 2.38-2.67 5.27-5.89 11l-.14.26zm5.09 189.08a3.2 3.2 0 0 0-1.79 1.84c2.26 4.6 3.87 3.76 5 2.18l-.22.29a31.1 31.1 0 0 1-2.99-4.31zm-.28-.5a90.14 90.14 0 0 1-5.47-12.85l.93-.45-.75.36-3.34 1.6h-.07c.7 1.1 1.32 2.12 1.89 3.07a80.61 80.61 0 0 1 4.28 8.28c.29.63.55 1.21.8 1.75a3.33 3.33 0 0 1 1.73-1.76z" fill="#394856" />
					<path d="M317 281.32a14.19 14.19 0 0 1-1-1.22h.23l-.1-.53h-.39a5.69 5.69 0 0 1-.18-1.31 4.28 4.28 0 0 0-.2-.87 103.42 103.42 0 0 0-5.51-11.07l-.17.08-.93.45a90.14 90.14 0 0 0 5.47 12.85 3.33 3.33 0 0 0-1.78 1.8c-.06.12-.13.23-.19.37l.35.38.11-.2a3.2 3.2 0 0 1 1.79-1.84 31.1 31.1 0 0 0 3 4.31l.22-.29c.7-1 .01-2.02-.72-2.91z" fill="#2c3944" />
					<path d="M275.35 200.25c1.79-8.29 1.74-2.65 2.68-19.71s-.47-11.65-1.58-20c-3 0-3.86.9-3.86.9a2.05 2.05 0 0 1-.26.84c-.49.93-1.48 1.65-1.5 2.89 0 2 .59 2 .56 4.06s-.64 2-.67 4 .59 2 .56 4.05-.65 2-.67 4 .59 2 .56 4.06-.65 2-.67 4 .59 2 .56 4.06c0 1.19.84 2.47 1.07 3.46v.83c-.01.38.24 1.92 3.22 2.56z" fill="#394856" />
					<path d="M276.49 160.57c1.1 8.32 2.52 2.84 1.58 20s-.89 11.42-2.68 19.71c-.11.51 1.11.19 1.79.24h.12s0-2 2-4.74a6.87 6.87 0 0 0 .89-2.92v-.09c.06-.42.1-.88.14-1.36.5-5.15 2-22.51-.38-25.93-2-2.83-1.86-4.79-1.86-4.79h-.41zm38.02-80.89c-1.53 3.92-2.7 8-5.1 11.45l1 .58.69-1.21.42-.75.6-1.12.41-.79.67-1.32.27-.55q.43-.88.86-1.8l.21-.46c.31-.67.62-1.35.92-2.05a4.11 4.11 0 0 0 .2-.82 5.69 5.69 0 0 1 .16-1.21l.33-.05.09-.51h-.17c.66-1 2.66-2.47 1.65-3.91a4.78 4.78 0 0 0-.37-.47 3.1 3.1 0 0 0-.41-.38 3 3 0 0 1-.32.88 32.88 32.88 0 0 0-1.86 3.95 2.6 2.6 0 0 1-1.92-1.62l-.08-.14-.34.39.16.28a2.68 2.68 0 0 0 1.93 1.63z" fill="#2c3944" />
				</g>
			</g>
			<g class="arrow">
				<path d="M402.4 178.65c-.79-1.83-3.5-6.52-10.51-6.54 7.01.02 9.72 4.7 10.51 6.54zm-20.99 0c-1.81-1.31-3.55-2.72-5.25-4.17-2.09.51-4 1.07-5.66 1.61 1 .86 2 1.71 3 2.56zm8.78 0h7.64c-2.24-2-4.52-3.94-6.9-5.73l-1-.74a66.42 66.42 0 0 0-7.07.89c1.29 1 2.62 1.88 3.93 2.87 1.15.87 2.28 1.78 3.4 2.71zm-24.19-.13a.48.48 0 0 1 .08-.23.48.48 0 0 0-.08.23zm7.58 2.24c-1 .86-2.06 1.72-3.09 2.59 1.62.55 3.57 1.1 5.66 1.61 1.72-1.46 3.47-2.88 5.3-4.2zm24.29 0h-7.63c-1.13.94-2.28 1.86-3.45 2.74s-2.64 1.91-3.94 2.87a66.45 66.45 0 0 0 7.07.89l1-.74c2.41-1.79 4.69-3.77 6.95-5.76z" fill="#ffce54" />
				<path d="M366.06 180.76a.23.23 0 0 0-.08.15.24.24 0 0 1 .08-.15z" fill="#ffca47" />
				<path d="M366.07 180.76a.24.24 0 0 0-.08.15.48.48 0 0 0 .08.23l.05.07a1.3 1.3 0 0 0 .16.18l.09.08.28.21.09.06.49.28h.05l.56.27.14.06.62.26h.11l1 .36.32.11.53.19c1-.87 2.05-1.73 3.09-2.59zm24.16 0h-8.78c-1.83 1.32-3.58 2.74-5.3 4.2 1.05.26 2.14.51 3.25.74 1.11.23 2.24.45 3.35.65 1.29-1 2.62-1.88 3.94-2.87s2.41-1.78 3.54-2.72zm.7 5.76l-1 .74h2c7.05 0 9.75-4.76 10.53-6.57h-4.55c-2.3 2.06-4.58 4.04-6.98 5.83z" fill="#fca12c" />
				<path d="M366 178.52a.2.2 0 0 0 0 .12.24.24 0 0 1 0-.12z" fill="#ffca47" />
				<path d="M373.54 178.65c-1-.85-2-1.7-3-2.56l-.3.1-.26.09-1 .35-.2.08-.87.37-.63.31-.51.3h-.05l-.31.23-.08.07a1.29 1.29 0 0 0-.16.19v.07a.48.48 0 0 0-.08.23.24.24 0 0 0 .07.12zm16.65 0c-1.12-.93-2.25-1.84-3.41-2.71-1.31-1-2.64-1.91-3.93-2.87h-.12c-1 .18-2.07.38-3.1.6l-.37.08c-1 .22-2 .44-3 .68h-.11c1.7 1.45 3.44 2.86 5.25 4.17zm7.64 0h4.57c-.79-1.83-3.5-6.52-10.51-6.54h-1.97l1 .74c2.39 1.85 4.67 3.81 6.91 5.8z" fill="#fca12c" />
				<path d="M406.05 180.38l.08-.13a1 1 0 0 0 .12-.28H269.71v-.18c-1.57.39-2.62.4-3.27-.05a5.67 5.67 0 0 0 .13 1.09c.06.27.13.54.2.79h2.94v-.88h135.9a1.92 1.92 0 0 0 .37-.29z" fill="#2c3944" />
				<path d="M266.44 179.75c.64.45 1.7.44 3.27.05v.2h136.55a1 1 0 0 0 0-.28 1.26 1.26 0 0 0-.66-1.06H269.71v-.88h-2.92a7.13 7.13 0 0 0-.35 1.93v.04z" fill="#394856" />
				<path d="M267.15 183c-.07-.35-.23-.82-.39-1.36.16.54.32 1.01.39 1.36z" fill="#cbcbcb" />
				<path d="M266.76 181.64c-.07-.25-.14-.52-.2-.79.06.27.13.53.2.79z" fill="#2c3944" />
				<path d="M266.76 181.64c-.07-.25-.14-.52-.2-.79.06.27.13.53.2.79z" fill="#cbcbcb" />
				<path d="M266.57 180.84a10.55 10.55 0 0 1-1.92 0 14.88 14.88 0 0 0 .37 1.75c.4.19.82.41 1.27.66l.3.15h.08l.15.06h.25a.37.37 0 0 0 .05-.27 1.84 1.84 0 0 0 0-.19c-.07-.35-.24-.82-.39-1.36-.04-.26-.11-.52-.16-.8z" fill="#a2a2a2" />
				<path d="M266.1 187c.68-.12-.26-1.81-1-3.95.69 2.17 1.51 3.78 1 3.95zm-17.1-7.28c0 1.05 5 1.05 15.82 6.86-10.66-6.11-15.82-5.81-15.82-6.86z" fill="#cbcbcb" />
				<path d="M264.53 179.7a10.63 10.63 0 0 0 .12 1.18 10.55 10.55 0 0 0 1.92 0 5.67 5.67 0 0 1-.13-1.09v-.05a7.13 7.13 0 0 1 .35-1.93c.43-1.43.93-2.44-.5-1.67-.44.23-.84.43-1.22.61 1-3 2.58-5.34-.25-3.88-10.62 5.48-15.71 5.82-15.81 6.86-.01-.01 15.52-.03 15.52-.03z" fill="#cbcbcb" />
				<path d="M265.15 183.08l-.12-.44zm.95 3.92a2.49 2.49 0 0 1-1.28-.44c.69.44 1.08.54 1.28.44zm-17.1-7.31z" fill="#cbcbcb" />
				<path d="M264.62 180.89a12.36 12.36 0 0 0 .39 1.74 14.88 14.88 0 0 1-.37-1.75z" fill="#cbcbcb" />
				<path d="M264.62 180.89a12.36 12.36 0 0 0 .39 1.74 14.88 14.88 0 0 1-.37-1.75z" fill="#cbcbcb" />
				<path d="M264.62 180.89a12.36 12.36 0 0 0 .39 1.74 14.88 14.88 0 0 1-.37-1.75z" fill="#cbcbcb" />
				<path d="M264.62 180.89a10.63 10.63 0 0 1-.12-1.18h-15.52c0 1.05 5.16.75 15.82 6.86a2.49 2.49 0 0 0 1.28.44c.52-.2-.31-1.8-1-3.95l-.14-.45a12.36 12.36 0 0 1-.32-1.72z" fill="#a2a2a2" />
				<path d="M406.31 179.7a1 1 0 0 1 0 .28 1 1 0 0 1-.12.28l.06-.09h6.42a2.38 2.38 0 0 0 2.16-1.24 1.16 1.16 0 0 1 .17.35c-.15-.5-.58-.87-1.47-.87h-8.09c-.21 0 0 .06.27.24a1.26 1.26 0 0 1 .6 1.05z" fill="#ffce54" />
				<path d="M405.61 180.76l-.3.17.31-.17z" fill="#ffca47" />
				<path d="M406 180.46a1.92 1.92 0 0 1-.37.29 1.93 1.93 0 0 0 .37-.29z" fill="#2c3944" />
				<path d="M406 180.46a1.92 1.92 0 0 1-.37.29 1.93 1.93 0 0 0 .37-.29z" fill="#ffca47" />
				<path d="M414.95 179.31a1.16 1.16 0 0 0-.17-.35 2.38 2.38 0 0 1-2.16 1.24h-6.42l-.06.09-.08.13-.08.08a1.93 1.93 0 0 1-.36.29l-.31.17h8.2c1.13 0 1.54-.58 1.54-1.29a1.49 1.49 0 0 0-.1-.36z" fill="#fca12c" />
			</g>
		</g>
	</svg>
</div>

<div class="me">
	<a class="me__link portfolio" href="http://www.petebarr.com" target='_blank'>Petebarr.com<span></span></a>

</div>
<a class="twitter" href="https://twitter.com/petebarr" target='_blank'>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
		<path fill="#fff" d="M39.19 15.39a10.63 10.63 0 0 1-3.38 1.29 5.31 5.31 0 0 0-9.19 3.63 5.43 5.43 0 0 0 .14 1.22A15.11 15.11 0 0 1 15.8 16a5.39 5.39 0 0 0-.72 2.68 5.32 5.32 0 0 0 2.37 4.42 5.33 5.33 0 0 1-2.45-.7v.07a5.31 5.31 0 0 0 4.27 5.21 5.45 5.45 0 0 1-1.41.19 4.78 4.78 0 0 1-1-.1 5.32 5.32 0 0 0 5 3.69 10.64 10.64 0 0 1-6.6 2.28c-.43 0-.85 0-1.27-.07a15.13 15.13 0 0 0 23.28-12.74v-.69a10.87 10.87 0 0 0 2.66-2.75 10.84 10.84 0 0 1-3.06.84 5.35 5.35 0 0 0 2.34-2.94"></path>
<!-- 		<path fill="#fff" d="M26 5A21 21 0 1 1 5 26 21 21 0 0 1 26 5m0-4a25 25 0 1 0 25 25A25 25 0 0 0 26 1z"></path> -->
	</svg>
</a>


2CSS部分代码

$turq: #05938f;

body {
  	background-color: #uuu;
}

body,
html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

#slider{
	width:300px;
	position:relative;
	margin: 30px auto;
}

.container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 800px;
	height: 600px;
	border-radius: 15px;
	background-color: $turq;
	box-shadow: 4px 2px 33px -10px rgba(0,0,0,0.75);
}

svg {
	width: 100%;
	height: 100%;
	visibility: hidden;
}

.bow-arrow {
	transform: translateY(20px);
}


.me {
	position: fixed;
	z-index: 1000;
	top: 24px;
	left: 24px;
	display: flex;
	flex-direction: column;
}

.me__link {
	position: relative;
	margin-bottom: 16px;
	color: white;
	font-family: Helvetica, sans-serif;
	text-decoration: none;
	font-size: 16px;

	span {
		display: block;
		position: absolute;
		bottom: -3px;
		left: 0;
		height: 1px;
		width: 5%;
		background-color: white;
		content: "";
		transition: width 0.3s;
	}

	&:hover span{
		width: 100%;
	}
}

.twitter {
	position: fixed;
	top: 16px;
	right: 24px;
	display: block;
	width: 40px;
	height: 40px;
}

3,Js部分代码

TweenMax.set('svg', {
	visibility: 'visible'
});

var kinkedCurve = "M 316,80 s 0,95, 0,100 0,100 0,100"; // when pulling back -> 95 giving it sharp kink
var straightCurve = "M 316,80 s 0,55, 0,100 0,100 0,100"; // rest position when released without kink -> 55
var snapTime = 0.5;
var drawTime = 0.6;
var snapAmp = 0.95;
var snapPer = 0.1;
var drawEase = Power2.easeOut;
var snapEase = Elastic.easeOut.config(snapAmp, snapPer);

tl = new TimelineMax( { repeat: -1, repeatDelay: 0 } );

tl.set('.arrow', { x: -62, y: 2, scale: 0.8 })
  .set('.bow-frame', { x: 1, y: 1 })
  .from('.string', drawTime, {attr:{d:kinkedCurve}, ease: drawEase})
  .to('.bow', drawTime, { scaleX: 1.1, scaleY: 0.95, ease: drawEase, transformOrigin: "30px center" }, "-="+drawTime)
  .to('.arrow', drawTime, { x: -5, ease: drawEase }, "-="+drawTime)
  .to('.string', snapTime, {attr:{d:straightCurve}, ease: snapEase }) 
  .to('.bow', snapTime, { scaleX: 1, scaleY: 1, ease: snapEase }, "-="+snapTime)
  .to('.arrow', 0.085, { x: -400, ease: Linear.easeNone }, "-="+snapTime)
  .fromTo('.arrow', 0.45, { x: 400 }, { x: -62, ease: Elastic.easeOut.config(1.5, 1.5), immediateRender: false }, "-=0.35")

tl.timeScale(1)


/*  ==========================================================================
    SLIDER
    ========================================================================== */  

var $slider = $('#slider'),
    sliderValue = { value: 0 };

$slider.slider({
  range: false,
  min: 0,
  max: 100,
  step: .1,
  start: function() {
    tl.pause();
  },
  slide: function(event, ui) {
    tl.progress(ui.value / 100);
  },
  stop: function() {
    tl.play();
  }
});

tl.eventCallback("onUpdate", function() {
  sliderValue.value = tl.progress() * 100;
  $slider.slider(sliderValue);
});
快速稳定且高性价比,让您的创意想法完美落地

*提交后1小时内获得反馈,免费赠送技术实施方案

10年经验的售前工程师
微信直接聊需求

*收到您的需求后,我们郑重承诺:

1,保护您的隐私,未获取您的同意,不会添加您的微信,不会进行通话骚扰,不会进行邮件骚扰

2,在收集您的需求后,进行详尽的需求及方案分析,并签订保密协议(NDA),不会将您创意泄漏给第三方。

3,提交报价方案,技术实施方案,售后服务方案,可提供北京/上海/天津/全国各省市面对面疑问解答。

4,如您有意向签约,将签订开发合同,售后合同,约束条款等严苛的协议保障您的权益。