スムーズなSVGアニメーション

私は与えられたパラメータ回転Xおよび回転Yとアニメーションをリフレッシュしようとしています：スムーズなSVGアニメーション

$(document).ready(function() { 
     var svg = document.getElementById("DC"); 
     var x = 10; 
     var y = 0; 
     for (j = 0; j<8 ; j++) { 
      svg.setAttribute('style', 'transform: perspective(30em) rotateX(' + x + 'deg) rotateY(' + y + 'deg) scale(0.6, 0.6); perspective: 30em;'); 
      x = x + 10; 
     } 
    });

しかし、それは動作しませんでした。アニメーションをスムーズにリフレッシュする方法は？

<body><svg id="DC" version="1.0" viewBox="0 0 500 408" class="sim" x="0px" y="0px" width="100%" height="100%" style="transform: perspective(30em) rotateX(0deg) rotateY(0deg) scale(0.6, 0.6); perspective: 30em;"><style></body>

出典

2017-07-19 user3736228

これは：https://greensock.com/また、私はSVGタグをアニメーション化するための非常に良いアイデアであるかどうかはわかりませんSEグループまたは他の表示要素を含む。 – Rodrigo

しようとするいくつかの提案：ここ

は、HTMLコードで絶対位置と静的寸法 2.設定CSSプロパティを使用してDOMに変換さ 1分離株要素will-change: transform;

<body> 
     <div class="viewport" style="position: relative; width: 500px; height: 408px;"> 
      <svg id="DC" version="1.0" viewBox="0 0 500 408" class="sim" width="500px" height="408px" style="transform: perspective(30em) rotateX(0deg) rotateY(0deg) scale(0.6, 0.6); transform-origin: 0px 0px 0px; will-change: transform;"> 
       </svg> 
     </div>

3.移行タイミング機能あなたのforループではなくjquery.animateのように、すべてのフレームをすぐにレンダリングするようブラウザに指示しています。 jqueryが複雑な変換をアニメートできるかどうかはわかりませんが、D3確定できます。タイミング機能とライブラリを使用すると、まだ望ましいですが、あなたはまた、アニメーションキューにアニメーションを置くためにこれを行うことができます：

function animate(frames,x) { 
    if(frames > 0) { 
     svg.setAttribute('style', 'transform: perspective(30em) rotateX(' + x + 'deg) rotateY(' + y + 'deg) scale(0.6, 0.6); perspective: 30em;'); 

     requestAnimationFrame(function() { animate(--frames,x+= 10); }); 
    } 
    return; 
}

出典

2017-07-19 03:20:52

あなたの提案をありがとう。マウスを動かすたびに値Xを設定して10ずつ増やしたいのですが、どうすればいいですか？その関数を使用してアニメーションが機能していません。 – user3736228

次に、mousemoveイベントをリッスンし、そこにアニメーションコードを挿入する必要があります。 mousemoveイベントを取得したら、requestAnimationFrame（function（）{animate（...）;}）;このすべては、フレームワークを使用するとずっと簡単です - 私は[D3]（https://d3js.org/）が好きです。これには簡単にコピーされた例がたくさんあります。 –

問題は、アニメーションをステップするたびに、あなたがブラウザを与える必要があるということです変化を描くチャンス。あなたはそれをやっていません。あなたのforループはただちにstyle属性を変更しており、決してブラウザに制御を戻していません。ページを更新する機会はありません。

これを修正する方法はいくつかあります。かつて、ブラウザに戻るためにwindow.setTimeout()コールを使用し、アニメーションを更新するためにコードを呼び出すようにするのが一般的でした。今日、好ましい方法はrequestAnimationFrame()コールです。ここ

var svg = document.getElementById("DC"); 
 
var x = 10; 
 
var y = 0; 
 

 
function step(timestamp) 
 
{ 
 
    svg.setAttribute('style', 'transform: perspective(30em) rotateX(' + x + 'deg) rotateY(' + y + 'deg) scale(0.6, 0.6); perspective: 30em;'); 
 
    x = x + 10; 
 
    window.requestAnimationFrame(step); 
 
} 
 

 
window.requestAnimationFrame(step);

svg { 
 
    background-color: red; 
 
}

<body> 
 
<svg id="DC" version="1.0" viewBox="0 0 500 408" class="sim" x="0px" y="0px" width="100%" height="100%" style="transform: perspective(30em) rotateX(0deg) rotateY(0deg) scale(0.6, 0.6); perspective: 30em;"></svg> 
 
</body>

アニメーションの各ステップは、step()関数で計算されます。その後、関数から戻る前に、再度に電話をして、step()を再度呼び出すよう依頼しなければなりません。

最後の呼び出しは、最初からアニメーションを開始することです。

出典

2017-07-19 05:54:30

簡単な解決策の1つは、CSSトランジションを使用することです。
これにより、速度や使用されるタイミング機能を簡単に定義できます。

var svg = document.getElementById("DC"); 
 

 
function update(x) 
 
{ 
 
    svg.setAttribute('style', 'transform: perspective(30em) rotateX('+x+'deg) rotateY(0deg) scale(0.6, 0.6); perspective: 30em;'); 
 
} 
 
svg.parentNode.offsetWidth; 
 
update(80); 
 

 
num.onchange = e => update(num.value);

svg { 
 
    background-color: red; 
 
    transition: transform 2s ease-out; 
 
}

<label>x rotation<input type="number" value="80" id="num"></label> 
 
<svg id="DC" version="1.0" viewBox="0 0 500 408" class="sim" x="0px" y="0px" width="100%" height="100%" style="transform: perspective(30em) rotateX(0deg) rotateY(0deg) scale(0.6, 0.6); perspective: 30em;"></svg>

そして、あなたはループにそれを必要とする場合、あなたはtransitionendイベントに耳を傾けることができます：あなたがGreenSockを使用しようとしないのはなぜ

var svg = document.getElementById("DC"); 
 
x = 0; 
 
function loop() 
 
{ 
 
    x += 180; 
 
    svg.setAttribute('style', 'transform: perspective(30em) rotateX('+x+'deg) rotateY(0deg) scale(0.6, 0.6); perspective: 30em;'); 
 
} 
 
svg.addEventListener('transitionend', loop); 
 
svg.parentNode.offsetWidth; 
 
loop();

svg { 
 
    background-color: red; 
 
    transition: transform .5s linear; 
 
}

<svg id="DC" version="1.0" viewBox="0 0 500 408" class="sim" x="0px" y="0px" width="100%" height="100%" style="transform: perspective(30em) rotateX(0deg) rotateY(0deg) scale(0.6, 0.6); perspective: 30em;"></svg>

出典

2017-07-19 07:13:14 Kaiido

スムーズなSVGアニメーション

答えて

関連する問題