我是svg动画的新手。我想与vivus.js合作。 我已经建立了测试环境。并从这里下载了一个svg:https://www.svgimages.com/hand.html 我试着给它制作动画,但它不起作用,但是当我用样品svg替换它时它起作用。有什么帮助吗?
<div class="section matrix">
<div class="content">
<div class="box box-50">
<p>
This should display the obturateur SVG like on the demo page. The strokes must be orange. The element must remain an <i>object</i> tag.
</p>
<button onclick="this.textContent=(document.querySelector('object#obt')?'Pass!':'Failed.')">Test</button>
</div><div class="box box-50">
<object id="obt" data="hand.svg" type="image/svg+xml" style="width: 100%; max-height: 250px;"></object>
</div>
</div>
</div>
<script>
// Display warning message if not on http server
if (window.location.protocol === 'file:') {
var configIntro = document.getElementById('config-instructions');
configIntro.style.display = 'block';
}
// Obturateur
var obt1 = new Vivus('obt', {
type: 'delayed',
duration: 150
});
// polaroid-dynamic
var polaroidD = new Vivus('polaroid-dynamic', {
file: 'polaroid.svg',
type: 'scenario-sync',
duration: 20
});
var hiD = new Vivus('hi-dynamic', {
file: 'hi-there.svg',
type: 'scenario-sync',
duration: 20,
start: 'manual'
});
var synthD = new Vivus('synth-dynamic', {
file: 'synth.svg',
type: 'oneByOne',
duration: 200,
start: 'manual',
animTimingFunction: Vivus.EASE_IN
});
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);
}
</script>