KineticJS에서 모양을 만들고 tween으로 애니메이션을 만듭니다.KineticJS easing
var tween = new Kinetic.Tween({
node: rect,
duration: 1,
easing: Kinetic.Easings.BackEaseOut,
y: 100
});
반대로 조정을 변경할 수 있습니까? JSFiddle
도와 주셔서 감사합니다 많은 :
은 현재 내가 그렇게 할 수 있습니다.
stage.on('mouseover', function() {
tween.tween.func = Kinetic.Easings.BounceEaseOut;
tween.play();
});
stage.on('mouseout', function() {
tween.tween.func = Kinetic.Easings.BounceEaseIn;
tween.reverse();
});
만들 수 있습니다 ...이 작동하는 것 같다 ...하지만이 정말 핵심 FUNC없는 당신의 사용자 정의 Robert Penner
에 의해
Easing Functions Generator와 기능을 완화 기본 여유 프리셋 대신 사용하십시오.
// generated example
var customEasingFunction = function(t, b, c, d) {
var ts=(t/=d)*t;
var tc=ts*t;
return b+c*(63.2425*tc*ts + -185.23*ts*ts + 198.58*tc + -93.89*ts + 18.2975*t);
};
var tween = new Kinetic.Tween({
node: rect,
duration: 1,
easing: customEasingFunction, // use it insead of default preset
y: 100
});
정확히 한 가지 예외 만 있으면 감사합니다. 커서가 모양에 있고 즉시 당기면 역방향으로 여유를 사용하지 않습니다. 해결 방법이 있습니까? –
그렇다면 어쩌면 두 번 트위닝을 사용하는 것이 좋습니다 (매번 인스턴스화). 두 번째가 발생할 때 첫 번째 트윈이 끝나지 않으면 시작 지점이 잘못 될 것입니다. 다른 방법은 이벤트를 시작하기 전에 첫 번째 트윈이 onFinish 속성을 사용하여 마무리되었는지 확인하는 것입니다. – Cobaltway
완벽한! 고마워. –