SmoothedAnimation QML Type

프로퍼티가 값을 원활하게 추적할 수 있도록 합니다. 더 보기...

• 상속된 멤버를 포함한 모든 멤버 목록

속성

• duration : int
• maximumEasingTime : int
• reversingMode : enumeration
• velocity : real

상세 설명

SmoothedAnimation은 인/아웃 쿼드 이완 커브를 사용하여 프로퍼티의 값을 설정된 목표 값에 애니메이션을 적용합니다. 목표 값이 변경되면 이전 목표 값과 새 목표 값 사이의 애니메이션에 사용된 이완 커브가 부드럽게 연결되어 현재 속도를 유지하면서 새 목표 값으로 부드럽게 이동합니다.

다음 예시는 SmoothedAnimation을 사용하여 Rectangle 의 위치를 추적하는 것을 보여줍니다. 녹색 직사각형의 x 및 y 값은 빨간색 직사각형의 값에 바인딩되어 있습니다. 이 값이 변경될 때마다 녹색 사각형은 새 위치로 부드럽게 애니메이션됩니다:

import QtQuick

Rectangle {
    width: 800; height: 600
    color: "blue"

    Rectangle {
        width: 60; height: 60
        x: rect1.x - 5; y: rect1.y - 5
        color: "green"

        Behavior on x { SmoothedAnimation { velocity: 200 } }
        Behavior on y { SmoothedAnimation { velocity: 200 } }
    }

    Rectangle {
        id: rect1
        width: 50; height: 50
        color: "red"
    }

    focus: true
    Keys.onRightPressed: rect1.x = rect1.x + 100
    Keys.onLeftPressed: rect1.x = rect1.x - 100
    Keys.onUpPressed: rect1.y = rect1.y - 100
    Keys.onDownPressed: rect1.y = rect1.y + 100
}

애니메이션이 발생해야 하는 velocity 또는 애니메이션이 취할 duration 을 설정하여 SmoothedAnimation을 구성할 수 있습니다. velocity 및 duration 을 모두 지정하면 대상 값이 변경될 때마다 가장 빠른 애니메이션을 생성하는 것이 선택됩니다.

예를 들어, 속도를 200으로 설정하면 0에서 800까지 애니메이션이 4초, 지속 시간을 8000으로 설정하면 8초, 속도 200과 지속 시간을 모두 설정하면 4초가 소요됩니다. 0에서 20000까지의 애니메이션은 속도를 200으로 설정하면 10초, 지속 시간을 8000으로 설정하면 8초, 속도 200과 지속 시간을 모두 8000으로 설정하면 8초가 소요됩니다.

SmoothedAnimation의 기본 속도는 200 단위/초입니다. 애니메이션이 적용되는 값의 범위가 작은 경우 속도를 적절히 조정해야 합니다. 예를 들어 항목의 불투명도 범위는 0 - 1.0입니다. 이 범위에서 부드러운 애니메이션을 사용하려면 속도를 초당 0.5단위와 같은 값으로 설정해야 합니다. 0에서 1.0까지 애니메이션을 0.5 속도로 설정하면 완료하는 데 2000ms가 걸립니다.

다른 애니메이션 유형과 마찬가지로 전환, 동작 및 속성 값 소스 등 다양한 방법으로 SmoothedAnimation을 적용할 수 있습니다. Qt Quick 의 애니메이션 및 전환 문서에 애니메이션을 만드는 다양한 방법이 나와 있습니다.

SpringAnimation, NumberAnimation, Qt Quick 의 애니메이션 및 전환, Qt Quick 예제 - 애니메이션도참조하세요 .

속성 문서