使用Qt Quick实现顶部横幅（Banner）效果

使用Qt Quick实现顶部横幅（Banner）效果

 

       趁着上一篇文章写完，还有写博客的冲动，我将最近制作一个小玩意儿分享一下。这个小玩意儿其实是模仿Windows Phone 8的Banner效果。我命名为TopBanner。大家先看一下WindowsPhone 8的效果吧。



大概就是上面那个效果（不过我这个竟然是Android系统Windows Phone 8的主题）

我这回将使用Qt Quick来实现。

 

这个TopBanner有这样的特性：

1、 不仅仅可以放在顶部，还可以放在底部或其它的地方，随便调用者设置y或者anchors.top或者anchors.bottom即可。

2、 动画进入和动画退出。具体来说，是从左边飞入，从右边飞出。使用的插值动画曲线是Easing.InQuint和Easing.OutQuint。

 

嗯，铺垫了那么多，一定想要看结果吧，我将程序的截图展示一下：



上图是“渐入”按钮点击的时候出现的画面。



上图是“渐出”按钮点击的时候出现的画面。可以看到，Banner正在飞走。

我已经将代码上传到github中了，大家有兴趣的话，可以看看。或者我将代码贴出来：

// TopBanner.qml
// Made By jiangcaiyang@qtdream.com
// 2015年11月2日15:50:54

import QtQuick 2.5
import QtQuick.Controls 1.4

Rectangle
{
id: root
width: 0
height: fm.height * 3
color: "lightsteelblue"
clip: true

property int flyDuration: 500
property alias text: messageLabel.text

FontMetrics { id: fm }

Label
{
id: messageLabel
width: root.parent.width
height: root.height
anchors.left: flyOutAnim.running? root.left: undefined
anchors.right: flyInAnim.running? root.right: undefined
}

ParallelAnimation
{
id: flyInAnim
running: false
NumberAnimation
{
target: root
property: "width"
from: 0
to: root.parent.width
duration: root.flyDuration
easing.type: Easing.OutQuint
}
ScriptAction
{
script:
{
root.x = 0;
messageLabel.x = -root.parent.width;
}
}
}

ParallelAnimation
{
id: flyOutAnim
running: false
NumberAnimation
{
target: root
property: "width"
from: root.parent.width
to: 0
duration: root.flyDuration
easing.type: Easing.InQuint
}
NumberAnimation
{
target: root
property: "x"
from: 0
to: root.parent.width
duration: root.flyDuration
easing.type: Easing.InQuint
}
}

function flyIn( )
{
root.x = 0;
messageLabel.x = -root.parent.width;
flyInAnim.start( );
}

function flyOut( )
{
flyOutAnim.start( );
}
}