[C++,QT/Qml]10.Qml프로그래밍 stackView 사용 하기3(뷰 이동시 애니메이션 변경 하기)
안녕하세요 고급 개발자가 꿈인 코린이 입니다.
오늘은 qml에서 stackview를 사용할때 뷰가 이동간에 애니메이션을 변경하는 방법에 대해서 포스팅 하게습니다.
이 내용은 실무에서도 많이 쓰는 내용으로 실무에서 애니메이션이 있으면 로딩이 늦게되는 것 같다라는 이슈가 나와서
애니매이션을 없앤 경우도 있었고 뷰이동간에 애니메이션이 기본적인 사양이 있던 경우도 있어서
뷰이동간에 애니메이션을 추가하는 경우도 있었습니다.
그래서 이번 포스팅에서는 뷰이동간에 애니메이션을 없애는 경우와 뷰이동간에 애니메이션을 설정하는 방법에 대해서
설명 드리겠습니다.
stackview를 사용하면 기본적으로 뷰가 이동되면서 애니메이션이 사용되는 것을 볼수있습니다.
이런 애니메이션은 qml stackview자체에 default로 지정된 애니메이션으로 이 애니메이션을 없애는 방법을 먼저
설명 드리겠습니다.
아래 코드를 보겠습니다.
1. stackView애니메이션 없애는 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
import QtQuick 2.9
import QtQuick.Controls 2.0
import QtQuick.Window 2.2
import "."
Window {
property bool mbImageClicked : true
property int mCount : 0
visible: true
width: 640
height: 480
title: qsTr("Hello World")
StackView
{
id:stackView
anchors.fill: parent
replaceEnter: Transition { PropertyAnimation {//뷰를 replace 한 화면이 그려질때 출력하는 애니메이션
property: "opacity"
from: 1
to:1
duration: 0
}}
replaceExit: Transition { PropertyAnimation {//뷰를 replace 한 화면이 그려질때 이전화면이 없어지는 애니메이션
property: "opacity"
from: 1
to:1
duration: 0
}}
pushEnter: Transition { PropertyAnimation {//뷰를 push 한 화면이 그려지는 애니메이션
property: "opacity"//투명도가 설정 되게 설정 x,나 y등 다른 속성값으로 설정할수 있음
from: 1//투명도를 1에서 1로 바꿔줌 즉 투명도가 변하지 않아서 애니메이션이 없는 것처럼 된다.
to:1
duration: 0
}}
pushExit: Transition { PropertyAnimation {//뷰를 push 한 화면이 그려질때 이전화면이 없어지는 애니메이션
property: "opacity"//투명도가 설정 되게 설정 x,나 y등 다른 속성값으로 설정할수 있음
from: 1
to:1//투명도를 1에서 1로 바꿔줌 즉 투명도가 변하지 않아서 애니메이션이 없는 것처럼 된다.
duration: 0
}}
popEnter: Transition { PropertyAnimation {////뷰를 pop해서 이전화면으로 갈때 이전화면이 출력되는 애니메이션
property: "opacity"//투명도가 설정 되게 설정 x,나 y등 다른 속성값으로 설정할수 있음
from: 1//투명도를 1에서 1로 바꿔줌 즉 투명도가 변하지 않아서 애니메이션이 없는 것처럼 된다.
to:1
duration: 0
}}
popExit: Transition { PropertyAnimation {//뷰를 pop 했을때 pop한 화면이 없어지는 애니메이션
property: "opacity"//투명도가 설정 되게 설정 x,나 y등 다른 속성값으로 설정할수 있음
from: 1
to:1//투명도를 1에서 1로 바꿔줌 즉 투명도가 변하지 않아서 애니메이션이 없는 것처럼 된다.
duration:0
}}
initialItem: Item //제일 첫화면을 설정하는 것으로 설정을 안하면 되돌아오기가 안된다.
{
Rectangle//배경 색을 지정하는 부분
{
anchors.fill: parent
color:"red"
}
Text
{
id:testData
anchors.horizontalCenter: parent.horizontalCenter
text:"main screen testData"
font.pixelSize: 30
font.bold: true
}
Text
{
id:testText
anchors.centerIn: parent
text:"main screen"
font.pixelSize: 50
font.bold: true
}
Button
{
anchors.top:testText.bottom
anchors.horizontalCenter: parent.horizontalCenter
text:"go next screen"
onClicked:
{
console.log("push screen1")
stackView.push(Qt.resolvedUrl("qrc:/screen1.qml"))//다음 화면을 출력하기 위해 stack에 화면을 쌓는 코드
}
}
}
}
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
|
위의 코드를 보겠습니다.
위의 코들를 보면 replaceEnter,replaceExit,pushEnter,pushExit,popEnter,popExit 등 stackView애니메이션들을
설정해주는 속성 들이 있습니다. 차례대로 보도록 하겠습니다.
replaceEnter: stackview가 replace되었을때 replace되는 뷰가 그려질때 애니메이션
replaceExit: stackview가 replace되었을때 이전 화면이 없어지는 애니메이션
pushEnter: 뷰를 push 한 화면이 그려지는 애니메이션
즉 main.qml에서 screen1.qml을 push 했을때 screen1.qml 화면이 그려지는 애니메이션
pushExit: 뷰를 push 한 화면이 그려질때 이전화면이 없어지는 애니메이션
즉 main.qml에서 screen1.qml을 push 했을때 main.qml 화면이 없어지는 애니메이션
popEnter:뷰를 pop해서 이전화면으로 갈때 이전화면이 출력되는 애니메이션
즉 main.qml에서 screen1.qml을 push하고 pop했을때 main.qml 화면이 그려지는 애니메이션
popExit: 뷰를 pop 했을때 pop한 화면이 없어지는 애니메이션
즉 main.qml에서 screen1.qml을 push하고 pop했을때 screen1.qml 화면이 없어지는 애니메이션
그리고 각 속성에 애니메이션을 넣어주고 opacity 속성값 즉 투명도를 1에서 1로 변경하게 끔 애니메이션
설정을 해주면 애니메이션 이 1에서 1로 변경되니까 애니메이션이 없는 것처럼 효과가 나타납니다.
그리고 duration도 0이기 때문에 애니메이션이 없는 것처럼 효과가 나타납니다.
duration이란 위읭 설정해준 애니메이션이 실행되는 시간인데 0초 즉 즉시 애니메이션이 완성되기 때문에
애니메이션이 없는 것과 같은 효과가 나타납니다.
그래서 애니메이션이 있지만 없는 것처럼 다음화면을 그려주거나 이전화면을 출력하게끔 할수가 있습니다.
그러면 이번에는 stackview의 기본 애니메이션은 왼쪽에서 오른쪽으로 화면이 바뀌면서 출력되는 애니메이션인데
이 애니메이션을 위에서 아래로 바뀌게끔 수정을 해보겠습니다.
아래의 코드를 같이 보겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
import QtQuick 2.9
import QtQuick.Controls 2.0
import QtQuick.Window 2.2
import "."
Window {
property bool mbImageClicked : true
property int mCount : 0
visible: true
width: 640
height: 480
title: qsTr("Hello World")
StackView
{
id:stackView
anchors.fill: parent
replaceEnter: Transition { PropertyAnimation {//뷰를 replace 한 화면이 그려지는 했을때 애니메이션
property: "y"
from: -480
to:0
duration: 500//애니메이션 완료시간을 0.5로 설정함
}}
replaceExit: Transition { PropertyAnimation {//뷰를 replace 한 화면이 그려질때 이전화면이 없어지는 애니메이션
property: "y"
from: 0
to:480
duration: 500//애니메이션 완료시간을 0.5로 설정함
}}
pushEnter: Transition { PropertyAnimation {//뷰를 push 한 화면이 그려지는 했을때 애니메이션
property: "y"//y값을 변경하기 위해서 property를 y로 설정해줌
from: -480//새로 출력해야하는 화면의 y값을 화면의 높이만큼의 전에서 0까지 내려오게 해서 아래로 내려오는 것과 같은 애니메이션을 줌
to:0
duration: 500//애니메이션 완료시간을 0.5로 설정함
}}
pushExit: Transition { PropertyAnimation {//뷰를 push 한 화면이 그려질때 이전화면이 없어지는 애니메이션
property: "y"//y값을 변경하기 위해서 property를 y로 설정해줌
from: 0
to:480//없어져야하는 화면의 값을 화면 높이만큼 내려가게 해서 화면이 밑으로 없어지는 것과 같은 효과를 줌
duration: 500//애니메이션 완료시간을 0.5로 설정함
}}
popEnter: Transition { PropertyAnimation {////뷰를 pop해서 이전화면으로 갈때 이전화면이 출력되는 애니메이션
property: "y"//y값을 변경하기 위해서 property를 y로 설정해줌
from: -480//새로 출력해야하는 화면의 y값을 화면의 높이만큼의 전에서 0까지 내려오게 해서 아래로 내려오는 것과 같은 애니메이션을 줌
to:0
duration: 500//애니메이션 완료시간을 0.5로 설정함
}}
popExit: Transition { PropertyAnimation {//뷰를 pop 했을때 pop한 화면이 없어지는 애니메이션
property: "y"//y값을 변경하기 위해서 property를 y로 설정해줌
from: 0
to:480//없어져야하는 화면의 값을 화면 높이만큼 내려가게 해서 화면이 밑으로 없어지는 것과 같은 효과를 줌
duration:500 //애니메이션 완료시간을 0.5로 설정함
}}
initialItem: Item //제일 첫화면을 설정하는 것으로 설정을 안하면 되돌아오기가 안된다.
{
Rectangle//배경 색을 지정하는 부분
{
anchors.fill: parent
color:"red"
}
Text
{
id:testData
anchors.horizontalCenter: parent.horizontalCenter
text:"main screen testData"
font.pixelSize: 30
font.bold: true
}
Text
{
id:testText
anchors.centerIn: parent
text:"main screen"
font.pixelSize: 50
font.bold: true
}
Button
{
anchors.top:testText.bottom
anchors.horizontalCenter: parent.horizontalCenter
text:"go next screen"
onClicked:
{
console.log("push screen1")
stackView.push(Qt.resolvedUrl("qrc:/screen1.qml"))//다음 화면을 출력하기 위해 stack에 화면을 쌓는 코드
}
}
}
}
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
|
위의 코드를 보시면 property를 y값으로 바꿔주어서 애니메이션 효과중에 y값이 바뀌게 설정을 하였습니다.
그리고 위의 코드에 설명드린것 처럼 없어져야할 화면은 0에서 화면의 높이만큼
새로 생겨야할 화면을 -480(화면높이만큼 뺀값) 에서 0으로 y값을 변하게 해주었습니다.
그래서 위의 동영상처럼 실행결과가 위에서 아래로 내려가는 듯한 애니메이션이 구현 되었습니다.
이러한 예제를 이용하면 애니메이션 주는효과를 더욱 심화해서 만들수 있습니다.
여기 까지 stackview의 애니메이션 변경 및 애니메이션 없애는 효과에 대해서 포스팅 했습니다.
감사합니다.
'QT and QML' 카테고리의 다른 글
| [C++,QT/Qml]12.Qml프로그래밍 cpp qml 연동1(c++에서 qml 함수 호출하기) (8) | 2019.06.23 |
|---|---|
| [C++,QT/Qml]11.Qml프로그래밍 stackView 사용 하기3(이전 화면의 정보 가져오기,get previous screen data) (3) | 2019.06.16 |
| [C++,QT/Qml]9.Qml프로그래밍 stackView 사용 하기2(뷰 시작시 데이터 넣기) (2) | 2019.06.12 |
| [C++,QT/Qml]8.Qml프로그래밍 stackView 사용 하기1 (0) | 2019.06.09 |
| [C++,QT/Qml]7.Qml프로그래밍Image추가하기3(이미지에 마우스 이벤트 주기 press,release) (1) | 2019.06.05 |