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 }
      }
  }

• 다음과 같이 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 의 ‘예제 - 애니메이션’항목도 참조하십시오 .

속성 설명서

duration : int

이 속성은 애니메이션의 지속 시간을 밀리초 단위로 저장합니다.

기본값은 250입니다.

easing group

애니메이션에 사용되는 이징 곡선을 지정합니다.

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

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

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

Easing.Linear	선형(t) 함수에 대한 이징 곡선: 속도가 일정합니다.
Easing.InQuad	2차(t^2) 함수에 대한 이징 곡선: 0 속도에서 가속합니다.
Easing.OutQuad	2차(t^2) 함수를 위한 이징 커브: 속도가 0이 될 때까지 감속합니다.
Easing.InOutQuad	2차(t^2) 함수에 대한 이징 곡선: 중간 지점까지 가속한 후 감속합니다.
Easing.OutInQuad	2차(t^2) 함수에 대한 이징 곡선: 중간 지점까지 감속한 후 가속합니다.
Easing.InCubic	3차(t^3) 함수의 이징 곡선: 속도가 0에서 가속합니다.
Easing.OutCubic	3차(t^3) 함수의 이징 곡선: 0 속도로 감속합니다.
Easing.InOutCubic	3차(t^3) 함수의 이징 곡선: 중간 지점까지 가속한 후 감속.
Easing.OutInCubic	3차(t^3) 함수의 이징 곡선: 중간 지점까지 감속한 후 가속합니다.
Easing.InQuart	4차(t^4) 함수에 대한 이징 곡선: 0 속도에서 가속합니다.
Easing.OutQuart	4차(t^4) 함수의 이징 곡선: 감속하여 속도가 0이 될 때까지.
Easing.InOutQuart	4차(t^4) 함수의 이징 곡선: 중간 지점까지 가속한 후 감속합니다.
Easing.OutInQuart	4차(t^4) 함수의 이징 곡선: 중간 지점까지 감속한 후 가속합니다.
Easing.InQuint	5차 함수(t^5)의 이징 곡선: 0 속도에서 가속.
Easing.OutQuint	5차(t^5) 함수의 이징 곡선: 0 속도로 감속합니다.
Easing.InOutQuint	5차(t^5) 함수의 이징 곡선: 중간 지점까지 가속한 후 감속합니다.
Easing.OutInQuint	5차 함수(t^5)의 이징 곡선: 중간 지점까지 감속한 후 가속.
Easing.InSine	사인(sin(t)) 함수의 이징 곡선: 속도 0에서 가속.
Easing.OutSine	사인(sin(t)) 함수의 이징 곡선: 0 속도로 감속합니다.
Easing.InOutSine	사인(sin(t)) 함수의 이징 곡선: 중간 지점까지 가속한 후 감속.
Easing.OutInSine	사인(sin(t)) 함수의 이징 곡선: 중간 지점까지 감속한 후 가속합니다.
Easing.InExpo	지수 함수(2^t)의 이징 곡선: 0 속도에서 가속합니다.
Easing.OutExpo	지수 함수(2^t)에 대한 이징 곡선: 속도가 0이 될 때까지 감속합니다.
Easing.InOutExpo	지수 함수(2^t)에 대한 이징 곡선: 중간 지점까지 가속한 후 감속합니다.
Easing.OutInExpo	지수 함수(2^t)에 대한 이징 곡선: 중간 지점까지 감속한 후 가속합니다.
Easing.InCirc	원형(sqrt(1-t^2)) 함수의 이징 곡선: 0 속도에서 가속합니다.
Easing.OutCirc	원형(sqrt(1-t^2)) 함수의 이징 곡선: 속도가 0이 될 때까지 감속합니다.
Easing.InOutCirc	원형(sqrt(1-t^2)) 함수의 이징 곡선: 중간 지점까지 가속한 후 감속합니다.
Easing.OutInCirc	원형(sqrt(1-t^2)) 함수의 이징 곡선: 중간 지점까지 감속한 후 가속합니다.
Easing.InElastic	탄성(지수적으로 감쇠하는 사인파) 함수의 이징 곡선: 0 속도에서 가속. 피크 진폭은 amplitude 매개변수로, 감쇠 주기는 period 매개변수로 설정할 수 있습니다.
Easing.OutElastic	탄성(지수적으로 감쇠하는 사인파) 함수의 이징 곡선: 0 속도까지 감속합니다. 피크 진폭은 amplitude 매개변수로, 감쇠 기간은 period 매개변수로 설정할 수 있습니다.
Easing.InOutElastic	탄성(지수적으로 감쇠하는 사인파) 함수에 대한 이징 커브: 중간 지점까지 가속한 후 감속합니다.
Easing.OutInElastic	탄성(지수적으로 감쇠하는 사인파) 함수에 대한 이징 곡선: 중간 지점까지 감속한 후 가속.
Easing.InBack	백(오버슈팅 3차 함수: (s+1)*t^3 - s*t^2) 이징 커브: 0 속도에서 가속.
Easing.OutBack	백(오버슈팅 3차 함수: (s+1)*t^3 - s*t^2) 이징 아웃에 대한 이징 곡선: 속도가 0이 될 때까지 감속합니다.
Easing.InOutBack	백(오버슈팅 3차 함수: (s+1)*t^3 - s*t^2) 이징 인/아웃용 이징 커브: 중간 지점까지 가속한 후 감속합니다.
Easing.OutInBack	뒤로 이동용 이징 곡선 (오버슈팅 3차 이징: (s+1)*t^3 - s*t^2) 이징 아웃/인: 중간 지점까지 감속한 후 가속.
Easing.InBounce	바운스(지수적으로 감쇠하는 포물선형 바운스) 함수에 대한 이징 곡선: 0 속도에서 가속합니다.
Easing.OutBounce	바운스(지수적으로 감쇠하는 포물선형 바운스) 함수에 대한 이징 커브: 속도가 0이 될 때까지 감속합니다.
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까지의 곡선을 정의하는 세 점의 그룹(제어점 1, 제어점 2, 끝점: [cx1, cy1, cx2, cy2, endx, endy, ...])을 포함하는 list<real>입니다. 마지막 점은 반드시 1,1이어야 합니다.

다양한 이징 설정에 대한 예시는 이징 곡선(Easing Curves )을 참조하십시오.

exclude : list<QtObject> [read-only]

이 속성은 이 애니메이션의 영향을 받지 않을 항목을 지정합니다.

PropertyAnimation::targets도 참조하십시오 .

from : variant

이 속성은 애니메이션의 시작 값을 저장합니다.

PropertyAnimation 가 Transition 또는 Behavior 내에서 정의된 경우, 이 값은 기본적으로 Transition 의 시작 상태에 정의된 값이나, Behavior 가 트리거되는 시점의 속성 현재 값으로 설정됩니다.

Qt Quick 의 ‘애니메이션 및 전환’항목도 참조하십시오 .

이러한 속성들은 어떤 속성을 애니메이션 처리할지 결정하기 위한 집합으로 사용됩니다. 단수형과 복수형은 기능적으로 동일합니다. 예를 들어,

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

는

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

단수 형태는 약간 최적화되어 있으므로, 애니메이션 적용 대상이 단 하나뿐인 경우 이를 사용하는 것이 좋습니다.

targets 속성을 사용하면 여러 타깃을 설정할 수 있습니다. 예를 들어, 다음 코드는 itemA 와 itemB 모두의 x 속성을 애니메이션 처리합니다:

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()
    }
}

위의 예에서 볼 수 있듯이, `properties`는 애니메이션을 적용할 속성 이름들을 쉼표로 구분한 문자열로 지정됩니다.

관련 문서: exclude 및 Qt Quick 의 ‘애니메이션 및 전환’ 섹션을참조하십시오 .

to : variant

이 속성은 애니메이션의 종료 값을 저장합니다.

PropertyAnimation 가 Transition 또는 Behavior 내에서 정의된 경우, 이 값은 기본적으로 Transition 의 종료 상태에 정의된 값이나, Behavior 를 트리거한 속성 변경의 값으로 설정됩니다.

Qt Quick 의 ‘애니메이션 및 전환’항목도 참조하십시오 .