PropertyAnimation QML Type

속성 값의 변화를 애니메이션으로 표현합니다. 더 보기...

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

속성

• duration : int
• easing
  • easing.amplitude : real
  • easing.bezierCurve : list<real>
  • easing.overshoot : real
  • easing.period : real
  • easing.type : enumeration
• exclude : list<QtObject>
• from : variant
• properties : string
• property : string
• target : QtObject
• targets : list<QtObject>
• to : variant

상세 설명

PropertyAnimation은 프로퍼티 값에 애니메이션을 적용하는 방법을 제공합니다.

여러 가지 방법으로 애니메이션을 정의하는 데 사용할 수 있습니다:

• 에서 Transition

  예를 들어, 상태 변경의 결과로 x 또는 y 속성이 변경된 모든 개체에 애니메이션을 적용하려면 InOutQuad 완화 커브를 사용합니다:

  Rectangle {
      id: rect
      width: 100; height: 100
      color: "red"
  
      states: State {
          name: "moved"
          PropertyChanges { target: rect; x: 50 }
      }
  
      transitions: Transition {
          PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
      }
  }

• In Behavior

  예를 들어, 사각형의 x 속성에 대한 모든 변경 사항을 애니메이션으로 적용하려면:

  Rectangle {
      width: 100; height: 100
      color: "red"
  
      Behavior on x { PropertyAnimation {} }
  
      MouseArea { anchors.fill: parent; onClicked: parent.x = 50 }
  }

• 프로퍼티 값 소스로

  예를 들어 사각형의 x 속성에 반복적으로 애니메이션을 적용하려면 다음과 같이 하세요:

  Rectangle {
      width: 100; height: 100
      color: "red"
  
      SequentialAnimation on x {
          loops: Animation.Infinite
          PropertyAnimation { to: 50 }
          PropertyAnimation { to: 0 }
      }
  }

• 신호 핸들러에서

  예를 들어, 클릭 시 theObject 페이드아웃:

  MouseArea {
      anchors.fill: theObject
      onClicked: PropertyAnimation { target: theObject; property: "opacity"; to: 0 }
  }

• 독립형

  예를 들어 rect 의 width 속성을 현재 너비에서 30으로 500ms 이상 애니메이션하려면 다음과 같이 하세요:

  Rectangle {
      id: theRect
      width: 100; height: 100
      color: "red"
  
      // this is a standalone animation, it's not running by default
      PropertyAnimation { id: animation;
                          target: theRect;
                          property: "width";
                          to: 30;
                          duration: 500 }
  
      MouseArea { anchors.fill: parent; onClicked: animation.running = true }
  }

애니메이션이 사용되는 방식에 따라 일반적으로 사용되는 속성 세트가 달라집니다. 자세한 내용은 개별 프로퍼티 문서와 Qt Quick 소개의 애니메이션 및 전환을 참조하세요.

PropertyAnimation은 추상적인 Animation 유형을 상속합니다. 여기에는 애니메이션을 제어하기 위한 추가 프로퍼티와 메서드가 포함됩니다.

실행 중인 애니메이션 수정하기

Qt 6.4부터는 실행 중인 최상위 애니메이션에 from, to, duration, easing 프로퍼티를 설정할 수 있습니다. 애니메이션은 다음 루프에서 변경 사항을 고려합니다.

Qt Quick 및 Qt Quick 예제 - 애니메이션에서애니메이션 및 전환을참조하세요 .

속성 문서

NumberAnimation { target: theItem; property: "x"; to: 500 }

NumberAnimation { targets: theItem; properties: "x"; to: 500 }

NumberAnimation { targets: [itemA, itemB]; properties: "x"; to: 500 }

Rectangle {
    id: theRect
    width: 100; height: 100
    color: Qt.rgba(0,0,1)
    NumberAnimation on x { to: 500; loops: Animation.Infinite } //animate theRect's x property
    Behavior on y { NumberAnimation {} } //animate theRect's y property
}

Rectangle {
    id: theRect
    width: 100; height: 100
    color: Qt.rgba(0,0,1)
    Item { id: uselessItem }
    states: State {
        name: "state1"
        PropertyChanges {
            theRect {
                x: 200
                y: 200
                z: 4
            }
            uselessItem {
                x: 10
                y: 10
                z: 2
            }
        }
    }
    transitions: Transition {
        //animate both theRect's and uselessItem's x and y to their final values
        NumberAnimation { properties: "x,y" }

        //animate theRect's z to its final value
        NumberAnimation { target: theRect; property: "z" }
    }
}

Rectangle {
    id: theRect
    width: 100; height: 100
    color: Qt.rgba(0,0,1)
    //need to explicitly specify target and property
    NumberAnimation { id: theAnim; target: theRect; property: "x"; to: 500 }
    MouseArea {
        anchors.fill: parent
        onClicked: theAnim.start()
    }
}

easing group
easing.amplitude : real
easing.bezierCurve : list<real>
easing.overshoot : real
easing.period : real
easing.type : enumeration

애니메이션에 사용되는 완화 커브를 지정합니다.

완화 커브를 지정하려면 최소한 유형을 지정해야 합니다. 일부 커브의 경우 진폭, 주기 및/또는 오버슈트를 지정할 수도 있습니다(자세한 내용은 표 뒤에 제공됨). 기본 완화 곡선은 Easing.Linear 입니다.

PropertyAnimation { properties: "y";
                    easing.type: Easing.InOutElastic;
                    easing.amplitude: 2.0;
                    easing.period: 1.5 }

사용 가능한 유형은 다음과 같습니다:

Easing.Linear	선형(t) 함수에 대한 완화 커브: 속도는 일정합니다.
Easing.InQuad	이차(t^2) 함수에 대한 완화 곡선: 0 속도에서 가속합니다.
Easing.OutQuad	이차(t^2) 함수에 대한 완화 곡선: 영속으로 감속합니다.
Easing.InOutQuad	이차(t^2) 함수에 대한 완화 곡선: 절반까지 가속한 다음 감속합니다.
Easing.OutInQuad	이차(t^2) 함수에 대한 완화 곡선: 절반까지 감속한 다음 가속합니다.
Easing.InCubic	3차(t^3) 함수에 대한 완화 곡선: 영속에서 가속합니다.
Easing.OutCubic	3차(t^3) 함수에 대한 완화 곡선: 영속으로 감속합니다.
Easing.InOutCubic	3차(t^3) 함수에 대한 완화 곡선: 절반까지 가속한 다음 감속합니다.
Easing.OutInCubic	세제곱(t^3) 함수에 대한 완화 곡선: 절반까지 감속한 다음 가속합니다.
Easing.InQuart	2차(t^4) 함수에 대한 완화 곡선: 영속에서 가속합니다.
Easing.OutQuart	이차(t^4) 함수에 대한 완화 곡선: 영속으로 감속합니다.
Easing.InOutQuart	이차(t^4) 함수에 대한 완화 곡선: 절반까지 가속한 다음 감속합니다.
Easing.OutInQuart	이차(t^4) 함수에 대한 완화 곡선: 절반까지 감속한 다음 가속합니다.
Easing.InQuint	5차(t^5) 함수에 대한 완화 곡선: 영속에서 가속합니다.
Easing.OutQuint	5차(t^5) 함수에 대한 완화 곡선: 영속으로 감속합니다.
Easing.InOutQuint	5차(t^5) 함수에 대한 완화 곡선: 절반까지 가속한 다음 감속합니다.
Easing.OutInQuint	5차(t^5) 함수에 대한 완화 곡선: 절반까지 감속한 다음 가속합니다.
Easing.InSine	사인 곡선(sin(t)) 함수에 대한 완화 곡선: 영속에서 가속합니다.
Easing.OutSine	정현파(sin(t)) 함수에 대한 완화 곡선: 영속으로 감속합니다.
Easing.InOutSine	정현파(sin(t)) 함수에 대한 완화 곡선: 절반까지 가속한 다음 감속합니다.
Easing.OutInSine	사인 곡선(sin(t)) 함수에 대한 완화 곡선: 절반까지 감속한 다음 가속합니다.
Easing.InExpo	지수(2^t) 함수에 대한 완화 곡선: 0 속도에서 가속합니다.
Easing.OutExpo	지수(2^t) 함수에 대한 완화 곡선: 영속으로 감속합니다.
Easing.InOutExpo	지수(2^t) 함수에 대한 완화 곡선: 절반까지 가속한 다음 감속합니다.
Easing.OutInExpo	지수(2^t) 함수에 대한 완화 곡선: 절반까지 감속한 다음 가속합니다.
Easing.InCirc	원형(sqrt(1-t^2)) 함수에 대한 완화 곡선: 영속에서 가속합니다.
Easing.OutCirc	원형 (sqrt(1-t^2)) 함수에 대한 완화 곡선: 영속으로 감속합니다.
Easing.InOutCirc	원형 (sqrt(1-t^2)) 함수에 대한 완화 곡선: 절반까지 가속한 다음 감속합니다.
Easing.OutInCirc	원형 (sqrt(1-t^2)) 함수에 대한 완화 곡선: 절반까지 감속한 다음 가속합니다.
Easing.InElastic	탄성(지수적으로 감쇠하는 사인파) 함수에 대한 완화 곡선: 0 속도에서 가속합니다. 진폭 파라미터로 피크 진폭을, 주기 파라미터로 감쇠 주기를 설정할 수 있습니다.
Easing.OutElastic	탄성(기하급수적으로 감쇠하는 사인파) 함수에 대한 완화 곡선: 제로 속도로 감속합니다. 진폭 파라미터로 피크 진폭을, 주기 파라미터로 감쇠 주기를 설정할 수 있습니다.
Easing.InOutElastic	탄성(기하급수적으로 감쇠하는 사인파) 함수에 대한 완화 곡선: 절반까지 가속한 다음 감속합니다.
Easing.OutInElastic	탄성(지수 함수) 함수에 대한 완화 곡선: 절반까지 감속한 다음 가속합니다.
Easing.InBack	역(오버슈팅 입방 함수: (s+1)*t^3 - s*t^2) 완화 곡선 완화: 영속에서 가속합니다.
Easing.OutBack	백에 대한 완화 곡선(오버슈팅 큐빅 함수: (s+1)*t^3 - s*t^2) 완화 아웃: 영속으로 감속합니다.
Easing.InOutBack	백에 대한 이완 곡선(오버슈팅 큐빅 함수: (s+1)*t^3 - s*t^2) 이완 인/아웃: 절반까지 가속한 다음 감속합니다.
Easing.OutInBack	백에 대한 완화 곡선(오버슈팅 큐빅 완화: (s+1)*t^3 - s*t^2) 완화 아웃/인: 절반까지 감속한 다음 가속합니다.
Easing.InBounce	바운스(기하급수적으로 감쇠하는 포물선 바운스) 함수에 대한 완화 곡선: 제로 속도에서 가속합니다.
Easing.OutBounce	바운스(기하급수적으로 감쇠하는 포물선 바운스) 함수에 대한 완화 곡선: 영속으로 감속합니다.
Easing.InOutBounce	바운스(기하급수적으로 감쇠하는 포물선 바운스) 함수 이완 인/아웃에 대한 이완 커브: 중간까지 가속한 다음 감속합니다.
Easing.OutInBounce	바운스(기하급수적으로 감쇠하는 포물선 바운스) 함수 이완 인/아웃에 대한 이완 커브: 절반까지 감속한 다음 가속합니다.
Easing.BezierSpline	easing.bezierCurve 속성으로 정의된 커스텀 완화 커브입니다.

easing.amplitude 는 바운스 및 탄성 커브( Easing.InBounce, Easing.OutBounce, Easing.InOutBounce, Easing.OutInBounce, Easing.InElastic, Easing.OutElastic, Easing.InOutElastic 또는 Easing.OutInElastic 유형의 커브)에만 적용 가능합니다.

easing.overshoot 는 easing.type 인 경우에만 적용됩니다: Easing.InBack, Easing.OutBack, Easing.InOutBack 또는 Easing.OutInBack.

easing.period 는 easing.type이 다음과 같은 경우에만 적용됩니다: Easing.InElastic, Easing.OutElastic, Easing.InOutElastic 또는 Easing.OutInElastic 입니다.

easing.bezierCurve 는 easing.type이 Easing.BezierSpline 인 경우에만 적용됩니다. 이 속성은 0,0에서 1,1까지의 커브를 정의하는 세 점의 그룹을 포함하는 목록<실제>입니다 - control1, control2, 끝점: [cx1, cy1, cx2, cy2, endx, endy, ...]. 마지막 점은 1,1이어야 합니다.

다양한 완화 설정에 대한 데모는 완화 곡선을 참조하십시오.