1
私は、svgがクリックされたときに2つのループ状態を交互に繰り返す小さなアニメーション（Velocity.jsを使用）を作成しようとしています。第1の状態は、水平方向にscaleX(1)からscaleX(2.5)に、scaleX(1)からscaleY(1)に、第2の状態は、scaleY(1)からscaleY(8)に戻ると、scaleX(2.5)に戻る。 svgがクリックされると、アニメーションは水平状態で開始され、再びクリックされ、アクティブ（水平）だった状態が停止し、代替状態が開始（垂直）すると、クリックするたびに代替状態に変わります。理想的には、新しいアクティブな状態がアニメートされている間に、アニメーション化されていない軸上でsvgが正しいスケールにスケールされるという意味で、ステートの変化はシームレスです。関数を停止して別のものを開始
これは私が達成しようとしているもののGIFで、青い点は、クリックを象徴：私の現在の結果が埋め込まれ 
、私がいる問題は、唯一の状態変化がそれほど発生することがあります以前のアニメーションを停止する必要があります。もう1つの問題は、遷移中にスケーリングが同時に起こらないこと、すなわち新しいアクティブ状態のアニメーションが、新しい状態でアニメーション化されていない軸のスケーリングと同時に発生しないことである。正しい方向へのポインタは非常に高く評価されます。
// LINKs TO VELOCITY
// https://rawgit.com/julianshapiro/velocity/master/velocity.min.js
// https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js
var Rightscale = {
chooser: 0,
svg: $('#right').find('svg'),
init: function() {
this.bindEvents();
},
bindEvents: function() {
Rightscale.svg.on("click", function() {
console.log(Rightscale.chooser)
if(Rightscale.chooser === 0) {
Rightscale.chooser = 1;
Rightscale.horizontal();
} else {
Rightscale.chooser = 0;
Rightscale.vertical();
}
})
},
horizontal: function() {
Rightscale.svg.velocity({
scaleX: 2.5,
scaleY: 1
}, {
duration: 3000,
loop: true,
easing: "linear"
})
},
vertical: function() {
Rightscale.svg.velocity({
scaleY: 8,
scaleX: 2.5
}, {
duration: 3000,
loop: true,
easing: "linear"
})
},
}
$(document).ready(function() {
Rightscale.init();
});#right {
width: 100vw;
height: 100vh;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
}
.scale {
width: 40%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<script src="https://rawgit.com/julianshapiro/velocity/master/velocity.min.js"></script>
<div id="right">
<div class="scale">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 392 132" style="enable-background:new 0 0 392 132;" xml:space="preserve">
<g>
<path d="M76.1,26.4v100.7H44.5V26.2H20.2V3.6h80v22.8H76.1z"/>
<path d="M113,127.1V3.6h69.5v22.6H145v27.3h32.4v22.6h-32.2v28.2h38.4v22.8H113z"/>
<path d="M235.6,129.3c-26.7,0-40.7-11.9-40.7-34.6c0-4.5,0.2-6.6,1.1-11.5h26.4l-0.2,2.6c-0.2,2.3-0.2,4.5-0.2,6.6
c0,10.7,4.7,16.4,13.7,16.4c8.1,0,12.8-5.1,12.8-13.7c0-7.5-3.6-13-9.8-15.6l-12.4-4.9C204.5,65.9,197,56.3,197,37.7
C197,13.4,210.9,1,238.6,1c24.5,0,36.7,10,36.7,29.9c0,4.3-0.4,6.4-1.3,11.9h-26.5c0.6-4.5,0.8-6.2,0.8-8.8
c0-8.5-3.6-12.8-10.2-12.8c-6.4,0-10.9,4.9-10.9,11.9c0,7.2,3.6,10.9,14.7,15.4l15.8,6.2c15.8,6.4,23.7,18.1,23.7,35.4
C281.3,115.4,265.1,129.3,235.6,129.3z"/>
<path d="M345.5,26.4v100.7h-31.6V26.2h-24.3V3.6h80v22.8H345.5z"/>
</g>
</svg>
</div>
</div>
おかげで返信に時間を割いて、それが非常に高く評価されます@zsawaf。私は元の投稿にgifを添付して、希望する効果の概要を説明しました。あなたの助けが私をもっと近づかせてくれたようです。 – CalAlt
@CalAlt私はVelocityを使ったことが一度もありません。通常、私はCSSアニメーションを使用しますが、試してみましょう！ – zsawaf
@CalAltあなたはCSSソリューションを利用できますか？またはあなたはVelocityと結婚していますか？ – zsawaf