waibao
/
NN2022112805


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
							
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<title>Pasition - Path Transition with little JS code, render to anywhere.</title>

	<style>
		html,body{
			padding:0;
			margin: 0;
			overflow: hidden;
		}
		canvas{
			padding:0;
			margin: 0;
			border: 0;
		}

		#container{
			text-align: center;
		}
	</style>

	<style>
		body {
			background-color: #1e1d23;
			/*opacity: 0;*/
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			text-transform: uppercase;
			font-size: 12px;
			letter-spacing: 2px;
			-webkit-tap-highlight-color: rgba(0,0,0,0);
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

		/*body.ready { opacity: 1; }*/


		.icon-text path,
		.icon-text polygon {
			/*opacity: 0;*/
		}

		.info {
			text-align: center;
		}

		.description {
			/*opacity: 0;*/
			color: white;
			margin-top: 10px;
		}

		.links {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			margin-top: 20px;
		}

		@media (min-width: 700px) {
			.links {
				-webkit-box-orient: horizontal;
				-webkit-box-direction: normal;
				-ms-flex-direction: row;
				flex-direction: row;

			}
		}

		.button {
			/*opacity: 0;*/
			position: relative;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			width: 180px;
			height: 60px;
			text-decoration: none;
		}

		.button.blue {
			color: #5E89FB;
		}

		.button.green {
			color: #18F38C;
		}

		.button.red {
			color: #FF1461;
		}

		.button svg {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			stroke-width: 1;
			fill: none;
			fill-rule: evenodd;
			stroke: currentColor;
		}

		.button.green svg {
			-webkit-transform: rotate(180deg);
			transform: rotate(180deg);
		}

		.button path {
			scale: .9;
			transform-origin: 50% 50%;
		}

		.credits {
			/*opacity: 0;*/
			margin-top: 20px;
			color: #979797;
		}

		.credits a {
			position: relative;
			color: currentColor;
			text-decoration: none;
		}

		.credits a:after {
			content: "";
			/*opacity: 0;*/
			display: block;
			position: absolute;
			left: 0;
			bottom: -3px;
			width: 100%;
			border-bottom: 1px solid currentColor;
			transition: opacity .75s ease;
		}

		/*.credits a:hover:after {
          opacity: 1;
          transition: opacity .25s ease;
        }*/

		.credits a,
		.credits span {
			transition: color .75s ease;
		}

		.credits a:hover,
		.highlighted {
			color: white;
			transition: color .25s ease;
		}

		#container{
			/*margin-top:100px ;*/
		}


		@media only screen and (max-width: 500px) {
			canvas{
				width: 100%;
			}
		}
	</style>
</head>

<body>

<div style="display: none;">
	<svg xmlns="http://www.w3.org/2000/svg" >
		<path id="pathA" d="M280,250A200,200,0,1,1,680,250A200,200,0,1,1,280,250Z"></path>
		<path id="pathF" d="M480,50L423.8,182.6L280,194.8L389.2,289.4L356.4,430L480,355.4L480,355.4L603.6,430L570.8,289.4L680,194.8L536.2,182.6Z"></path>

		<path  id="pathB" d="M480,437l-29-26.4c-103-93.4-171-155-171-230.6c0-61.6,48.4-110,110-110c34.8,0,68.2,16.2,90,41.8
  	C501.8,86.2,535.2,70,570,70c61.6,0,110,48.4,110,110c0,75.6-68,137.2-171,230.8L480,437z"></path>
		<path id="pathC" d="M595,82.1c1,1-1,2-1,2s-6.9,2-8.9,4.9c-2,2-4.9,8.8-4.9,8.8c3.9-1,8.9-2,13.8-4c1,0,2,1,3,2c1,0-11.8,4.9-14.8,6.9c-2,2-11.8,9.9-14.8,9.9c-2.9,0-9.9,1-9.9,1c1,2,2,3.9,3.9,6.9c0,0-6.9,4-6.9,4.9c-1,1-5.9,6.9-5.9,6.9s17.7,1.9,23.6-7.9c-5.9,9.8-19.7,19.7-48.2,19.7c-29.5,0-53.1-11.8-68.9-17.7c-16.7-6.9-38.4-14.8-56.1-14.8c-16.7,0-36.4,4.9-49.2,16.8c-22.6-8.8-54.1-4-68.9,9.8c-13.8,13.8-27.5,30.5-29.5,42.3c-2.9,12.9-9.8,43.3-19.7,57.2c-13.8,22.5-29.5,28.5-34.5,38.3c-4.9,9.9-4.9,30.5-4,30.5c2,1,8.9,0,12.8-2c7.9-2.9,29.5-25.6,37.4-36.4c7.9-10.9,34.5-58.1,38.4-74.8s7.9-33.5,19.7-42.3c12.8-8.8,28.5-4.9,28.5-3.9c0,0-14.7,11.8-15.7,44.3s18.7,28.6,8.8,49.2c-9.9,17.7-39.3,5.9-49.2,16.7c-7.9,8.9,0,40.3,0,46.2c0,6-3,33.5-4.9,40.4c-1,5.9,0,9.8-1,13.8c-1,3,6,3.9,6,3.9s-6,7.8-8.9,5.9c-2.9-1-4.9-1-6.9,0c-2,0-5.9,1.9-9.9,0L232.9,401c2,1,4.9,1.9,7.9,1c4-1,23.6-9.9,25.6-11.9c2.9-1,19.7-10.8,22.6-16.7c2-5.9,5.9-24.6,5.9-30.5c1-6,2-24.6,2-29.5s-1-13.8,0-17.7c2-2.9,4.9-6.9,8.9-8.9c4.9-1,10.8-1,11.8-1c2,0,18.7,2,21.6,2c3.9,0,19.7-2.9,23.6-5c4.9-0.9,7.8,0,8.9,2c2,1.9-2,4.9-2,5.9c-1,1-8.8,10.8-10.8,14.7c-2,4.9-8.8,13.8-6.9,17.7c2,3.9,2,4.9,7.8,7.9c5.9,1.9,28.5,13.8,41.3,25.6c13.8,12.7,26.6,28.4,28.6,36.4c2.9,8.9,7.8,9.8,10.8,9.8c3,1,8.9,2,8.9,5.9s-1,8.8-1,8.8l36.4,13.8c0,0,0-12.8-1-17.7c-1-5.9-6.9-11.8-11.8-17.7c-4.9-6.9-56-57.1-61-61c-4.9-3-8.9-6.9-9.8-14.7c-1-7.9,8.8-13.8,14.8-20.6c3.9-4.9,14.7-27.6,16.7-30.6c2-2.9,8.9-10.8,12.8-10.8c4.9,0,15.8,6.9,29.5,11.8c5.9,2,48.2,12.8,54.1,14.8c5.9,1,18.6,0,22.6,3.9c3.9,2.9,0,10.9-1,15.8c-1,5.9-11.8,27.5-11.8,27.5s2,7.8,2,13.8c0,6.9-2.9,31.5-5.9,39.3c-2,8.9-15.8,31.6-18.7,35.5c-2,2.9-4.9,4.9-4.9,9.9c0,4.9,8.8,6,11.8,9.8c4,3,1,8.8,0,14.8l39.4,16.7c0-2.9,2-7.9,0-9.9c-1-2.9-5.9-8.8-8.8-12.8c-2-2.9-8.9-13.8-10.8-15.8c-2-2.9-2-8.8,0-13.8c1-4.9,13.8-38.3,14.7-42.3c2-4.9,20.7-44.3,22.6-49.2c2-5.9,17.7-34.4,19.7-39.4c2-5.9,14.8-10.8,18.7-10.8c4.9,0,29.5,8.8,33.4,10.8c2.9,1,25.6,10.9,29.5,12.8c4.9,1.9,2,5.9-1,6.9c-2.9,1.9-39.4,26.5-42.3,27.5c-2.9,1-5.9,3.9-7.9,3.9c-2.9,0-6.9,3.1-6.9,4c0,2-1,5.9-5.9,5.9c-3.9,0-11.8-5.9-16.7-11.8c-6.9,3.9-11.8,6.9-14.8,12.8c-4.9,4.9-6.9,8.9-9.8,15.8c2,2,5.9,2.9,8.8,2.9h31.5c3,0,6.9-0.9,9.9-1.9c2.9-2,80.7-53.1,80.7-53.1s12.8-9.9,12.8-18.7c0-6.9-5.9-8.9-7.9-11.8c-3-1.9-20.7-13.8-23.6-15.7c-4-2.9-17.7-10.9-21.6-12.9c-3-1.9-13.8-5.8-13.8-5.8c3-8.9,5-15.8,5.9-17.7c1-2,1-19.7,2-22.7c0-2.9,5-15.7,6.9-17.7c2-2,6.9-17.7,7.9-20.7c1-1.9,8.8-24.6,12.8-24.6c3.9-1,7.9,2.9,11.8,2.9c4,1,18.7-1,26.6,0c6.9,1,15.8,9.9,17.7,10.8c2.9,1,9.8,3.9,11.8,3.9c1,0,10.8-6.9,10.8-8.8c0-2-6.9-5.9-7.9-5.9c-1-1-7.8-4.9-7.8-4.9c0,1,2.9-1.9,7.8-1.9c3.9,0,7.9,3.9,8.8,4.9c2,1,6.9,3.9,7.9,1.9c1-1,4.9-5.9,4.9-8.9c0-4-3.9-8.8-5.9-10.8s-24.6-23.6-26.6-24.6c-2.9-1-14.7-11.8-14.7-14.7c-1-2-6.9-6.9-7.9-7.9s-30.5-21.6-34.5-24.6c-3.9-2.9-7.9-7.8-7.9-12.7s-2-17.7-2-17.7s-6.9-1-9.8,1.9c-2.9,2-9.8,17.8-13.8,17.8c-10.9-2-24.6,1-24.6,2.9c1,2.9,10.8,1,10.8,1c0,1-3.9,5.9-6.9,5.9c-2,0-7.8,2-8.8,2.9c-2,0-5.9,3.1-5.9,3.1c2.9,0,5.9,0,9.8,0.9c0,0-5.9,4-8.9,4c-2.9,0-12.8,2.9-15.7,3.9c-2,1.9-9.9,7.9-9.9,7.9H589l1,2h4.9L595,82.1L595,82.1z"></path>
		<path id="pathD" d="M638.9,259.3v-23.8H380.4c-0.7-103.8-37.3-200.6-37.3-200.6s-8.5,0-22.1,0C369.7,223,341.4,465,341.4,465h22.1
  	c0,0,11.4-89.5,15.8-191h210.2l11.9,191h22.1c0,0-5.3-96.6-0.6-205.7H638.9z"></path>
		<path id="pathE" d="M345.47,250L460.94,450L230,450Z M460.94,50L576.41,250L345.47,250Z M576.41,250L691.88,450L460.94,450Z"></path>
	</svg>

</div>
<div id="container" >
	<canvas id="canvas" width="960" height="500" ></canvas>
</div>
<div class="info">
	<p class="description">
		Pasition - Path Transition with little JS code, render to anywhere.
	</p>
	<div class="links">

		<a class="button green" href="https://github.com/AlloyTeam/pasition" target="_blank">
			<svg viewBox="0 0 180 60">
				<path d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z"></path>
			</svg>
			<span>GitHub</span>
		</a>

		<a class="button blue" href="javascript:" onclick="toogleStroke()">
			<svg viewBox="0 0 180 60">
				<path d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z"></path>
			</svg>
			<span  id="mode" >Stroke</span>
		</a>
		<a class="button red" href="https://github.com/AlloyTeam/pasition#usage" target="_blank">
			<svg viewBox="0 0 180 60">
				<path d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z"></path>
			</svg>
			<span>DOCS</span>
		</a>

	</div>
	<p class="credits">
		v<span class="version">1.0</span> © <span class="date">2019</span> dntzhang
	</p>
</div>

<script src="./dist/pasition.js"></script>
<script>
	var stroke = false
	function renderCurve(context,points,color){
		context.beginPath();
		context.strokeStyle = color||'black';
		context.moveTo(points[0], points[1]);
		context.bezierCurveTo(points[2], points[3], points[4], points[5], points[6], points[7]);
		context.stroke();

	}

	function renderShapes(context,curves,color){
		context.beginPath();
		context.fillStyle = color||'black';
		context.moveTo(curves[0][0], curves[0][1]);
		curves.forEach(function(points){
			context.bezierCurveTo(points[2], points[3], points[4], points[5], points[6], points[7]);
		})

		context.closePath();
		context.fill();
	}

	function toogleStroke() {
		stroke = !stroke
		document.querySelector('#mode').innerHTML = stroke ? 'Fill' : 'Stroke'
	}

	var pathA =  document.querySelector('#pathA').getAttribute('d'),
			pathB=	document.querySelector('#pathB').getAttribute('d'),
			pathC=	document.querySelector('#pathC').getAttribute('d'),
			pathD=	document.querySelector('#pathD').getAttribute('d'),
			pathF=	document.querySelector('#pathF').getAttribute('d'),
			pathE=	document.querySelector('#pathE').getAttribute('d')


	var canvas = document.getElementById('canvas'),
			context = canvas.getContext('2d')


	function animate(arr,indexA,indexB){
		pasition.animate({
			from: arr[indexA],
			to: arr[indexB],
			time: 1500,
			progress:function(shapes){
				context.clearRect(0, 0, canvas.width, canvas.height)
				shapes.forEach(function(curves){
					if(stroke) {
						curves.forEach(function (curve) {
							renderCurve(context, curve, "#006DF0")
						})
					}else{
						renderShapes(context,curves,"#006DF0")
					}
				})
			},
			end:function(){
				setTimeout(function(){
					indexA++
					indexB++
					if(indexA===arr.length)indexA = 0
					if(indexB===arr.length)indexB = 0
					animate(arr,indexA,indexB)
				},1500)

			}
		})
	}

	animate([pathA,pathB,pathE,pathB,pathD,pathC,pathF,pathC,pathD,pathB,pathA],0,1)

</script>

</body>

</html>