1
svg를 클릭 할 때 두 개의 반복 상태 사이에서 번갈아 나타나는 작은 애니메이션 (Velocity.js 사용)을 만들려고합니다. 제 1 상태는 수평 방향으로 scaleX(1)에서 scaleX(2.5)으로, scaleX(1)에서 scaleY(1)으로, 두 번째 상태는 scaleY(1)에서 scaleY(8)으로, 다시는 scaleY(1)에서 scaleX(2.5)으로 되돌아갑니다. svg가 클릭되면 애니메이션이 수평 상태에서 시작되고 다시 클릭하면 활성화 된 상태 (수평)가 중지되어야하고 대체 상태가 시작되어야합니다 (수직). 모든 클릭이 대체 상태로 변경됩니다. 이상적으로 상태 변경은 svg가 새로운 활성 상태가 움직이는 동안 애니메이트되지 않는 축의 올바른 축척으로 확장되어야한다는 점에서 매끄럽게 진행됩니다. 는 하나의 상태가 변경 때문에 발생 나의 현재 결과가 내장되어 
함수 중지 및 다른 시작
, 내가 보내고있어 문제가된다 :
이
내가 달성하기 위해 노력하고있어의 GIF이며, 파란색 점은 클릭을 상징 이전 애니메이션을 중단해야합니다. 다른 문제는 전환에서 동시에 스케일링이 발생하지 않는다는 것, 즉 새로운 활성 상태의 애니메이션이 새로운 상태에서 애니메이션이 적용되지 않는 축의 스케일링과 동시에 발생하지 않는다는 것입니다. 올바른 방향으로 어떤 포인터가 크게 감사하겠습니다. 이것은 당신이 원하는 원하는 효과 인 경우// 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