加载中…
个人资料
微博
  • 博客等级：
  • 博客积分：
  • 博客访问：
  • 关注人气：
  • 获赠金笔：0支
  • 赠出金笔：0支
  • 荣誉徽章：
正文 字体大小：大 中 小

QML的透明度、旋转、缩放、渐变及Animation and Transitions

(2011-09-14 16:56:40)
标签：

杂谈
QML的透明度、旋转、缩放、渐变及Animation and Transitions
1、        QML的透明深度属性：opacity，当opacity的值为0时，表示完全透明，介于0~1之间时，实现的效果为UI蒙上了一层阴影（自己理解为阴影），当opacity的值为1时，表示完全不透明，即没有任何的变化。
代码如下：
  1. Rectangle    {
  2. opacity:0.5//透明度为0.5
  3. color:"red"
  4. y:400;width:100;height:100
  5. Rectangle {
  6. x:50;y:50
  7. width:100;height:100
  8. color:"blue"
  9. }
  10. }
复制代码
2、        QML的旋转属性：rotation设置为顺时针旋转，后面的参数值为旋转的度数。
代码如下：
  1. Rectangle    {
  2. opacity:0.5
  3. color:"red"
  4. y:400;width:100;height:100
  5. Rectangle {
  6. x:50;y:50
  7. width:100;height:100
  8. color:"blue"
  9. rotation:30//顺时针旋转30度。
  10. smooth:true
  11. }
  12. }
复制代码

3、        QML的缩放属性：scale为设置缩放属性，scale值小于1，表示缩小，等于1表示无变化，大于1表示放大。
代码如下：
  1. Rectangle {
  2. color:"lightgray"
  3. width:100;height:100
  4. y:400;x:290
  5. Rectangle {
  6. color:"green"
  7. width:25;height:25
  8. }
  9. Rectangle {
  10. color:"yellow"
  11. x:25;y:25;width:50;height:50
  12. scale:1.5//放大1.5倍。
  13. transformOrigin:Item.TopLeft
  14. }
  15. }
复制代码

4、        设置旋转和缩放时注意：
就是我们缩放和旋转时时基于那个点或者线来实现的？
这个可以使用transformOrigin属性来设置，该属性的取值为：TopLeft、Top、TopRight、Left、Center、Right、BottomLeft、Bottom、BottomRight。
5、        QML的渐变属性：gradient，渐变分为水平渐变和竖直渐变，QML默认为竖直渐变，当需要水平渐变时，可以将所绘制的渐变图象旋转90或者270度就可以。
代码如下：
// 竖直渐变
  1. Rectangle {
  2. x:120;width:100;height:100
  3. gradient:Gradient {
  4. GradientStop {position:0.0;color:"lightgreen"}
  5. GradientStop {position:1.0;color:"lightgray"}
  6. }        
  7. }
  8. // 水平渐变
  9. Rectangle {
  10. x:120;width:100;height:100
  11. gradient:Gradient {
  12. GradientStop {position:0.0;color:"lightgreen"}
  13. GradientStop {position:1.0;color:"lightgray"}
  14. }
  15. rotation:90
  16. }
  17. }
复制代码

6、Animation and Transitions
1）SequentialAnimation    执行连续的动画。
代码如下：
  1. Rectangle {
  2.      id: rect
  3.      width: 100; height: 100
  4.      color: "red"

  6.      SequentialAnimation {
  7.          running: true
  8.          NumberAnimation { target: rect; property: "x"; to: 50; duration: 1000 }
  9.          NumberAnimation { target: rect; property: "y"; to: 50; duration: 1000 }
  10.      }
  11. }
复制代码

2) ParallelAnimation 并联运行动画
代码如下：
  1. Rectangle {
  2.      id: rect
  3.      width: 100; height: 100
  4.      color: "red"

  6.      ParallelAnimation {
  7.          running: true
  8.          NumberAnimation { target: rect; property: "x"; to: 50; duration: 1000 }
  9.          NumberAnimation { target: rect; property: "y"; to: 50; duration: 1000 }
  10.      }
  11. }
复制代码

3) NumberAnimation 数值动画
代码如下：
  1. Rectangle {
  2.      width: 100; height: 100
  3.      color: "red"

  5.      NumberAnimation on x { to: 50; duration: 1000 }
  6. }
复制代码

4) ColorAnimation 颜色动画
代码如下：
  1. Rectangle {
  2.      width: 100; height: 100
  3.      color: "red"

  5.      ColorAnimation on color { to: "yellow"; duration: 1000 }
  6. }
复制代码

5) RotationAnimation 旋转动画
代码如下：
  1. Item {
  2.      width: 300; height: 300

  4.      Rectangle {
  5.          id: rect
  6.          width: 150; height: 100; anchors.centerIn: parent
  7.          color: "red"
  8.          smooth: true

  10.          states: State {
  11.              name: "rotated"
  12.              PropertyChanges { target: rect; rotation: 180 }
  13.          }

  15.          transitions: Transition {
  16.              RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }
  17.          }
  18.      }

  20.      MouseArea { anchors.fill: parent; onClicked: rect.state = "rotated" }
  21. }
复制代码

还有如Behavior、ParallelAnimation、PropertyAnimation、Vector3dAnimation、ParentAnimation、AnchorAnimationt等，这里就不多做介绍，可以查看QT SDK的帮助文档。

喜欢

0

阅读┊ 收藏 ┊ 喜欢▼ ┊打印┊举报/Report
  

新浪BLOG意见反馈留言板　欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

Copyright © 1996 - 2022 SINA Corporation, All Rights Reserved

新浪公司 版权所有