Raphael을 사용하여 마우스 오버시 원을 크기 조절

도와 주시겠습니까?Raphael을 사용하여 마우스 오버시 원을 크기 조절

Raphael을 사용하여 원을 그립니다. 마우스를 올리면 원이 확대 및 축소 (크기 조정)됩니다.

원의 크기를 쉽게 늘릴 수 있지만 원의 크기를 늘리는 것 사이에 약간의 효과를 원합니다. 그것은 탄력적으로 증가해야합니다.

저는 Raphel을 사용하여 그 애니메이션을 개발하고 싶습니다. 당신이 도와 주실 수 나를

이 내가 작성한 코드입니다 :

smallCircles[0].hover(function() { 
    smallCircles[0].animate({ fill: 'rgb(231,88,88)', opacity: 0.95, r: 55,r:45,r:55, 'stroke-width': 0 }, 100); 
    }, 
    function() { 
    smallCircles[0].animate({ fill: 'rgb(240,153,153)', opacity: 0.8, r: 35, 'stroke-width': 0 }, 300); 
});

덕분에, Nagarjuna

출처

2012-05-03 Nag Arjun

링크가 작동하지 않습니다에 대한 easing 매개 변수로 '탄성'추가 난 당신이 ... 즉시 새로운 직경 당신의 원 증가 하는가 무슨 말을하는지 아무 생각이없고, 당신은 증가가 (부드러운) 애니메이션되고 싶어? – corazza

예, 원하는 것은 원을 그리며 원을 그리면 원의 크기가 애니메이션과 함께 증가해야합니다. 예 : 처음에는 원의 반경이 20mm입니다. 마우스를 놓은 후 반지름이 40mm로 증가합니다. 내가 원한다면 반경이 40mm로 증가해야하고 다시 30mm로 줄어들고 다시 40mm, 다시 30mm가되도록 원 위에 마우스를 올려 놓은 후 필요합니다. 마지막으로 40mm의 원형을 그립니다. 완전히 신축성있는 유형 감소하고, 원의 크기를 증가의 .. 스피 .. Raphael.js 라이브러리와 감사를이 구현 Nagarjuna –

안녕 베인 드디어 해냈어 는 예를 여기에서 볼 http://jsfiddle.net/ryWH3/74/ 도움을 주셔서 감사합니다. –

당신이이 수정을 완화 내장 사용하여 시도 적이 있습니까?

아래에서 테스트하지는 않았지만 아마도 작동 할 것입니다. 나는 animate 방법

smallCircles[0].hover(function() { 
    smallCircles[0].animate({ fill: 'rgb(231,88,88)', opacity: 0.95, r: 55,r:45,r:55, 'stroke-width': 0 }, 100, 'elastic'); 
    }, 
    function() { 
    smallCircles[0].animate({ fill: 'rgb(240,153,153)', opacity: 0.8, r: 35, 'stroke-width': 0 }, 300, 'elastic'); 
});

출처

2012-09-06 10:08:51 tone7

Raphael을 사용하여 마우스 오버시 원을 크기 조절

답변

관련 문제