Wijmo 컨트롤 애니메이션

애니메이션은 웹 어플리케이션을 더욱 매력적이고 직관적으로 만들 수 있습니다. 예를 들어 페이지에서 항목을 축소하고 제거하면 단순히 숨겨져 있는 경우보다 제거되는 항목을 사용자가 더 쉽게 볼 수 있습니다.

많은 JavaScript 툴킷과 프레임워크에는 애니메이션을 만들기 위한 자체 래퍼(Wrapper)가 있습니다. 예를 들어 Angular에는 $animate 서비스가 있고, jQuery에는 animate() 메서드가 있습니다. 좋아하시는게 있다면 Wijmo와 함께 사용할 수 있습니다.

외부 툴킷과 프레임워크에 대한 의존성을 줄이기 위해 Wijmo의 간편하고 유연한 애니메이션 래퍼(Wrapper) 기능을 사용할 수 있습니다.

wijmo.animate

wijmo.animate 메서드는 애니메이션 방식을 정의하는 인수로 함수를 사용합니다.

아래 샘플 코드는 2초 동안 __FlexGrid__의 회전에 애니메이션을 적용합니다.

wijmo.animate((pct) => {
    
    let xform = '';
    if (pct < 1) {
        if (pct > 0.5)
            pct = pct - 1;
        xform = 'rotateY( ' + (pct * 180) + 'deg)';
    }
    
    theGrid.hostElement.style.transform = xform;
}, 2000);

Animate Demo에서 코드의 작동을 확인하실 수 있습니다.