애니메이션

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

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

외부 툴킷 및 프레임워크에 대한 종속성을 줄이고 싶다면 Wijmo의 간단하고 유연한 애니메이션 래퍼 기능을 사용할 수 있습니다.


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);

이 코드의 작동 방식을 보려면 아래 데모를 확인해 주세요.

아래 예제는 대칭 이동 카드와 같은 FlexGrid의 회전을 보여 줍니다.
버튼을 클릭하여 애니메이션을 확인 해보시길 바랍니다.

Previous
HttpRequest
Next
팝업