svgのJavascriptのアニメーション

私は円＃マスク - 穴-2の半径をjavascriptでアニメーションしようとしています。 0から145pxまで半径をアニメーション化します。しかし、私はこれを一般的な方法で行う方法を知らない。私はcssを使用することはできません原因は、CSSでマスクをアニメーション化するためのFirefoxで使用される別の仕様があるようです。どんな助けもありがとう。svgのJavascriptのアニメーション

<svg width="400" height="300"> 
    <defs> 
    <mask id="hole"> 
    <circle id="mask-hole-1" cx="165" cy="156.5" r="165" fill="white" /> 
    <rect id="mask-hole-3" width="100%" height="100%" fill="white"/> 
    <circle id="mask-hole-2" cx="165" cy="156.5" r="145" /> 
    </mask> 
    </defs> 
    <image width="400" height="300" 
     xlink:href="http://lorempixel.com/400/300/sports/" 
     mask="url(#hole)"/> 
</svg>

出典

2017-08-10 toruwe

あなたは、私はちょうどそれは穴が離れて縮むようになります書いたこの例のコードを試してみてくださいjQuery animate()

でこれを行うことができます。これはあなたのsvg内の他の効果のためにあなたが何をすることができるかのアイデアを与えるはずです。

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript"> 
function ani() 
{ 
$("#mask-hole-2").animate({ 
r: 0 
}, 2000) 
} 
</script> 
</head> 
<body> 
<svg width="400" height="300"> 
    <defs> 
    <mask id="hole"> 
    <circle id="mask-hole-1" cx="165" cy="156.5" r="165" fill="white" /> 
    <rect id="mask-hole-3" width="100%" height="100%" fill="white"/> 
    <circle id="mask-hole-2" cx="165" cy="156.5" r="145" /> 
    </mask> 
    </defs> 
    <image width="400" height="300" 
     xlink:href="http://lorempixel.com/400/300/sports/" 
     mask="url(#hole)"/> 
</svg> 
<input type="button" value="animate" onclick="ani()" /> 
</body> 
</html>

あなたの質問にはうまくいきます。

出典

2017-08-10 10:36:33 JCooke

は、このアプローチを試してみてください：

var circle = $("#mask-hole-2"); 
 
var bigger = false; 
 

 
setInterval(function(){ 
 
    
 
    if(bigger == true) 
 
    { 
 
    circle.attr("r", Number(circle.attr("r"))+1); 
 
    } 
 
    else 
 
    { 
 
    circle.attr("r", Number(circle.attr("r"))-1); 
 
    } 
 
    
 
    if(Number(circle.attr("r")) >= 145) 
 
    { 
 
    bigger = false; 
 
    } 
 
    
 
    if(Number(circle.attr("r")) <= 1) 
 
    { 
 
    bigger = true; 
 
    } 
 

 

 
}, 1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg width="400" height="300"> 
 
    <defs> 
 
    <mask id="hole"> 
 
    <circle id="mask-hole-1" cx="165" cy="156.5" r="165" fill="white" /> 
 
    <rect id="mask-hole-3" width="100%" height="100%" fill="white"/> 
 
    <circle id="mask-hole-2" cx="165" cy="156.5" r="145" /> 
 
    </mask> 
 
    </defs> 
 
    <image width="400" height="300" 
 
     xlink:href="http://lorempixel.com/400/300/sports/" 
 
     mask="url(#hole)"/> 
 
</svg>

出典

2017-08-10 10:53:14

THXこれまでのところ。それは私が手に入れたいものに近いものです。＃mask-hole-1は0から175まで2秒以内に半径を変更したい.2s後＃mask-hole-2は半径を0から175に変更しなければならない。スニペットを調整していただけますか？ – toruwe

あなたは同じ行動をするだけでよいのですが、あなたの手でそれをすることができます。答えを正しいものとしてマークしてください^^ –

svgのJavascriptのアニメーション

答えて

関連する問題