diff options
author | Aaron Kennedy <aaron.kennedy@nokia.com> | 2011-11-21 17:51:31 +0000 |
---|---|---|
committer | Qt by Nokia <qt-info@nokia.com> | 2011-11-21 19:01:16 +0100 |
commit | fbbc3cab4ac57b99387c7955e712cfea7cd72856 (patch) | |
tree | 25089694b0ca98571eca11c94ce5608012e428bc /examples | |
parent | af0af6fa1ad428931c729738a14bdf6fbb910887 (diff) |
Adding custom easing curves to property animations
QDeclarativeEasingValueType gets the property customBezierCurve.
This allows to define a custom easing curve as a cubic bezier curve.
Change-Id: I33ae128ce29bba2834eedcbb90a9769a5391f997
Reviewed-by: Aaron Kennedy <aaron.kennedy@nokia.com>
Diffstat (limited to 'examples')
-rw-r--r-- | examples/declarative/animation/easing/easing.qml | 15 |
1 files changed, 13 insertions, 2 deletions
diff --git a/examples/declarative/animation/easing/easing.qml b/examples/declarative/animation/easing/easing.qml index 911e6ce7bf..233bb2d627 100644 --- a/examples/declarative/animation/easing/easing.qml +++ b/examples/declarative/animation/easing/easing.qml @@ -45,6 +45,9 @@ Rectangle { id: window width: 600; height: 460; color: "#232323" + property var easingCurve: [ 0.2, 0.2, 0.13, 0.65, 0.2, 0.8, + 0.624, 0.98, 0.93, 0.95, 1, 1 ] + ListModel { id: easingTypes ListElement { name: "Easing.Linear"; type: Easing.Linear; ballColor: "DarkRed" } @@ -88,6 +91,7 @@ Rectangle { ListElement { name: "Easing.InBounce"; type: Easing.InBounce; ballColor: "DimGray" } ListElement { name: "Easing.InOutBounce"; type: Easing.InOutBounce; ballColor: "SlateGray" } ListElement { name: "Easing.OutInBounce"; type: Easing.OutInBounce; ballColor: "DarkSlateGray" } + ListElement { name: "Easing.Bezier"; type: Easing.Bezier; ballColor: "Chartreuse"; } } Component { @@ -128,8 +132,8 @@ Rectangle { } transitions: Transition { - NumberAnimation { properties: "x"; easing.type: type; duration: 1000 } - ColorAnimation { properties: "color"; easing.type: type; duration: 1000 } + NumberAnimation { properties: "x"; easing.type: type; easing.bezierCurve: getBezierCurve(name); duration: 1000 } + ColorAnimation { properties: "color"; easing.type: type; easing.bezierCurve: getBezierCurve(name); duration: 1000 } } } } @@ -156,4 +160,11 @@ Rectangle { Repeater { model: easingTypes; delegate: delegate } } } + + function getBezierCurve(name) + { + if (name === "Easing.Bezier") + return easingCurve; + return []; + } } |