qml 实现幻灯片思路
先看视频吧~
实现的思路如下:
写好幻灯片控件
先写一个幻灯片控件 Page.qml
,不一定要跟下面一样,但是至少要有类似的页面加载信号和离开信号。
import QtQuick 2.0
Rectangle{
id: page
color:"transparent"
signal clicked
signal loaded
signal exited
property string title
MouseArea{
anchors.fill: parent
onClicked: page.clicked()
}
Component.onCompleted: page.loaded();
property var animations: []
property int currentAnimation: -1
function nextAnimation(){
if(currentAnimation +1 <= animations.length-1){
animations[++currentAnimation].start();
}
}
function previousAnimation(){
if(animations.length != 0){
animations.pop().start();
if(currentPage-1 >= 0)
--currentPage;
}
}
}
这个幻灯片控件内部有一个动画序列,可以执行幻灯片内每一个元素的动画。
写好每一页的内容
接着使用 Page
控件,把你的每一页幻灯片做好,按顺序起名为 Page0
到 PageEnd
。怎么起名随便你,只要知道顺序就好。
例如 Page0.qml
可以这么写
import QtQuick 2.0
Page {
id: page2
property int fontSize: 40
title: "目录"
Text{
id: text1
color :"white"
text: "自我介绍"
font.family: "微软雅黑"
font.pointSize: fontSize
opacity: 0
anchors.centerIn: parent;
ParallelAnimation {
id: animation1
PropertyAnimation {
target: text1
property: "rotation"
from: 0
to: 360
}
PropertyAnimation {
target: text1
property: "opacity"
from: 0
to: 1
}
}
}
onClicked: {
nextAnimation();
}
onLoaded: {
animations.push(animation1);
}
}
这个页面添加了一个内容,然后为这个内容制定了一个动画。然后把动画添加到动画序列中去,再每点击页面一次,就执行动画序列。
将写好的幻灯片按序添加到页面栈中
StackView{
id: view
initialItem: page1
property int currentPage: 0;
function nextPage(){
if(currentPage < pages.length-1){
view.currentItem.exited()
view.push({item: pages[++currentPage]});
}
}
function previouPage(){
view.currentItem.exited()
view.pop()
if(currentPage-1 >= 0)
--currentPage;
}
property list<Page> pages: [
Pages.Page01{
id: page1
},
Pages.Page02{
id: page2
},
Pages.Page03{
id: page3
},
Pages.Page04{
id: page4
},
Pages.Page05{
id: page5
},
Pages.PageEnd{
id: end
}
]
}
页面入栈的形式可以像上面那样,先生成,也可以动态生成在压栈。
关于动画和过度
自己去琢磨吧,在 ppt 中用烂的动画和过度大概不过是选择和平滑了吧~