1

在移动设备上，svg vivus 动画会在页面加载完成时自动启动，忽略

vivus.play()

在我的情况下，只有在被操作触发时才应该启动的命令。

这发生在 ios/android 上，但不在 ipad 上

<script src="js/vivus.js" ></script>

<script >
	  /*preload */
	  
	  /*abc*/
			function easeOutBounce (x) {
				var base = -Math.cos(x * (0.5 * Math.PI)) + 1;
				var rate = Math.pow(base,1.5);
				var rateR = Math.pow(1 - x, 2);
				var progress = -Math.abs(Math.cos(rate * (2.5 * Math.PI) )) + 1;
				return (1- rateR) + (progress * rateR);
			}

			var timing,
				timingProps = {
					type: 'delayed',
					duration: 150,
					start: 'autostart',
					pathTimingFunction: Vivus.LINEAR,
					animTimingFunction: Vivus.LINEAR
				};

			function timingTest (buttonEl, property, type) {
				var activeSibling = buttonEl.parentNode.querySelector('button.active');
				activeSibling.classList.remove('active');
				buttonEl.classList.add('active');

				timingProps.type = (property === 'type') ? type : timingProps.type;
				timingProps.pathTimingFunction = (property === 'path') ? Vivus[type] : timingProps.pathTimingFunction;
				timingProps.animTimingFunction = (property === 'anim') ? Vivus[type] : timingProps.animTimingFunction;

				timing && timing.stop().destroy();
				timing = new Vivus('timing-example', timingProps);
			}

			var studiovar = new Vivus('studio', {type: 'oneByOne', duration: 100},
				function () {
					if (window.console) {
						console.log('Animation finished. [log triggered from callback]');
					}
				});
		</script>
<style type="text/css">
			/* Base style */
			svg * {
				fill: none;
				stroke: currentColor;
			}
		</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" id="studio" viewBox="0 0 1127.55 928.38"><defs><style>.cls-1{fill:none;stroke:#867874;stroke-miterlimit:20;stroke-width:2px}.cls-2{fill:#867874;}</style></defs><title>mobilestudio</title><g id="Livello_2" data-name="Livello 2"><g id="Livello_1-2" data-name="Livello 1"><rect class="cls-1" x="323.51" y="642.71" width="430.77" height="194.75" rx="10.97" ry="10.97"/><path class="cls-1" d="M712.87,606H364.92a12.57,12.57,0,0,1-12.57-12.57V463a12.57,12.57,0,0,1,12.57-12.57H727"/><rect class="cls-1" x="408.92" y="605.98" width="25.38" height="36.72"/><rect class="cls-1" x="643.49" y="605.98" width="25.38" height="36.72"/><rect class="cls-1" x="706.64" y="605.98" width="25.38" height="36.72"/><path class="cls-1" d="M354.39,837.46c-8,0-16,6.31-16,37.46v53h17.8V875.37c0-8.46,2.22-37.91,22.25-37.91"/><path class="cls-1" d="M723.4,837.46c8,0,16,6.31,16,37.46v53h-17.8V875.37c0-8.46-2.22-37.91-22.25-37.91"/><path class="cls-1" d="M728.21,450.43H743a11,11,0,0,1,11,11V595a11,11,0,0,1-11,11H695.81a11,11,0,0,1-11-11V493.88a43.45,43.45,0,0,1,43.45-43.45Z"/><line class="cls-1" y1="927.88" x2="1127.55" y2="927.88"/><path class="cls-1" d="M970,186.46a83.92,83.92,0,0,0,48.43-76.06H850.65a83.9,83.9,0,0,0,47.91,75.81"/><path class="cls-1" d="M935.38,221.32h5.47c2.17-16,14-24.44,31.72-36.1H935.38"/><path class="cls-1" d="M934.55,221.32h-5.47c-2.17-16-14-24.44-31.71-36.1h37.18"/><path class="cls-1" d="M934.55,77.44a33,33,0,0,0-33,33h65.94A33,33,0,0,0,934.55,77.44Z"/><rect class="cls-1" x="929.16" y="221.32" width="11.69" height="694.19"/><rect class="cls-1" x="865.22" y="915.51" width="139.34" height="11.61"/><rect class="cls-1" x="134.72" y="12.72" width="328.47" height="220.32" rx="10.97" ry="10.97"/><rect class="cls-1" x="145.64" y="23.36" width="306.62" height="199.04" rx="6.7" ry="6.7"/><polygon class="cls-1" points="198.24 12.72 205.01 1 211.78 12.72 198.24 12.72"/><polygon class="cls-1" points="386.12 12.72 392.89 1 399.66 12.72 386.12 12.72"/><rect class="cls-1" x="198.53" y="98.55" width="45.89" height="43.45"/><circle class="cls-2" cx="221.47" cy="98.55" r="4.07"/><rect class="cls-1" x="278" y="70.69" width="45.89" height="43.45"/><circle class="cls-2" cx="300.95" cy="70.69" r="4.07"/><rect class="cls-1" x="352.36" y="142.75" width="45.89" height="43.45"/><circle class="cls-2" cx="375.3" cy="142.75" r="4.07"/><path class="cls-1" d="M940.85,221.32c0,17,9.82,211.49,21.16,298.88,7.67,59.12,51.68,376.46,111.26,407.68"/><rect class="cls-2" x="958.39" y="516.85" width="9.5" height="24.52" rx="2.17" ry="2.17" transform="translate(-60.35 129.03) rotate(-7.43)"/><line class="cls-1" x1="934.5" y1="62.35" x2="934.5" y2="40.6"/><line class="cls-1" x1="910.49" y1="68.83" x2="902.57" y2="55.12"/><line class="cls-1" x1="892.93" y1="86.45" x2="874.1" y2="75.58"/><line class="cls-1" x1="976.17" y1="86.3" x2="995" y2="75.42"/><line class="cls-1" x1="958.54" y1="68.74" x2="966.41" y2="55.12"/></g></g></svg>

4

0 回答 0