- 浏览: 43389 次
- 性别:
- 来自: 深圳
最新评论
越来越喜欢QML了,太神奇了,所以决定好好的学习下。
1、 Animation import Qt 4.7 Rectangle { width: 100;height: 100 color: "red" PropertyAnimation on x { to: 50; duration: 1000; loops: Animation.Infinite } PropertyAnimation on y { to: 50; duration: 1000; loops: Animation.Infinite } } 此段代码是将矩形的顶点(X,Y)坐标由(0,0)在一秒内逐渐移动到坐标(50,50),loops: Animation.Infinite指变化是无限循环的
//==============================================
Behavior Animation:
Item{ width: 100; height: 100 Rectangle{ id: rect width: 100; height: 100 color: "red" Behavior on x { PropertyAnimation {duration: 500 } } Behavior on y { PropertyAnimation {duration: 500 } } } MouseArea { anchors.fill: parent onClicked: { rect.x = mouse.x; rect.y = mouse.y } } } //Item是 最常使用的QML类型,一般用作其它类型的容器,可以理解成最顶级的父类,功能类似于QtGui中的QWidget,,通常一个动画用到部分属性的变化, 官网如此解释:Any changes to these properties will trigger their animations. If x or y were bound to other properties, and those properties changed, the animation would be triggered。此段代码,在Rectangle的属性x,y定义了分别定义了行为,即当X,Y变化时,经过500ms达到目标坐标
//==============================================
Animation in a Signal Handler Rectangle { id: rect width: 100;height: 100 color: "red" MouseArea{ anchors.fill: parent onClicked: PropertyAnimation { target: rect; properties: "x,y"; to : 50; duration: 1000} //onClicked: PropertyAnimation { target: rect; properties: "x,y"; to : 50,30; duration: 1000} } } 当我试着使用注释代码的时候,使用的x,y属性值总是使用的后面的30,不知为何,而且不能绑定rect多次,即不能分别绑定x和y
//==============================================
单独使用Animations
Animations能作为QML对象被创建,之后可以显示的调用使用running属性或start(),stop()方法 Rectangle { id: rect width: 100;height: 100 color: "red" PropertyAnimation { id: animation target: rect properties: "x,y" duration: 1000; } MouseArea{ anchors.fill: parent onClicked: { animation.to = 50; //animation.running = true; animation.start(); } } }
//============================================ Transitions 顾名思义即转变,过度 Rectangle { id: rect width: 100;height: 100 color: "red" MouseArea{ anchors.fill: parent onClicked: rect.state = "moved" } states: State { name: "moved" PropertyChanges { target: rect; x: 50; y: 50 } } transitions: Transition { PropertyAnimation { properties: "x,y"; duration: 1000 } } }
When the Rectangle changes to the moved state, its x and y property values are changed by the PropertyChanges object, and thePropertyAnimation defined within the Transition is triggered on these properties. The animation will not be applied at any time other than during the state change. //================================================ Property Animation Elements
Property Animation 是最基础的对于属性Animation,它能被用于 real, int, color, rect, point, size, and vector3d属性。NumberAnimation, ColorAnimation, RotationAnimation and Vector3dAnimation: NumberAnimation都继承自它。 ColorAnimation and RotationAnimation提供了一些特殊的属性用于颜色和组件旋转。 Rectangle { width: 100; height: 100 ColorAnimation on color { from: "red"; to: "blue"; duration: 2000 } } Item { width: 300; height: 300 Rectangle { width: 100; height: 100; anchors.centerIn: parent color: "red" RotationAnimation on rotation { to: 90; direction: RotationAnimation.Clockwise} } } //RotationAnimation.Clockwise 表示顺时针旋转90度,RotationAnimation.Counterclockwise 表示逆时针旋转,但此时旋转的角度是270度。 除这些之外还有SmoothedAnimation,SpringAnimation,ParentAnimation, AnchorAnimation等
//========================================
Easing:
我这里就称之为缓和吧,任何基于PropertyAnimation的动画都能指定缓和属性去控制动画程缓和曲线 Rectangle { width: 100;height: 100 color: "red" PropertyAnimation on x { to: 50; duration: 1000; easing.type: Easing.OutBounce } PropertyAnimation on y { to: 50; duration: 1000; easing.type: Easing.OutBounce } } 官方一个例子很好的体现了缓和动画效果: import Qt 4.7 Rectangle { id: window width: 600; height: 460; color: "#232323" ListModel { id: easingTypes ListElement { name: "Easing.Linear"; type: Easing.Linear; ballColor: "DarkRed" } ListElement { name: "Easing.InQuad"; type: Easing.InQuad; ballColor: "IndianRed" } ListElement { name: "Easing.OutQuad"; type: Easing.OutQuad; ballColor: "Salmon" } ListElement { name: "Easing.InOutQuad"; type: Easing.InOutQuad; ballColor: "Tomato" } ListElement { name: "Easing.OutInQuad"; type: Easing.OutInQuad; ballColor: "DarkOrange" } ListElement { name: "Easing.InCubic"; type: Easing.InCubic; ballColor: "Gold" } ListElement { name: "Easing.OutCubic"; type: Easing.OutCubic; ballColor: "Yellow" } ListElement { name: "Easing.InOutCubic"; type: Easing.InOutCubic; ballColor: "PeachPuff" } ListElement { name: "Easing.OutInCubic"; type: Easing.OutInCubic; ballColor: "Thistle" } ListElement { name: "Easing.InQuart"; type: Easing.InQuart; ballColor: "Orchid" } ListElement { name: "Easing.OutQuart"; type: Easing.OutQuart; ballColor: "Purple" } ListElement { name: "Easing.InOutQuart"; type: Easing.InOutQuart; ballColor: "SlateBlue" } ListElement { name: "Easing.OutInQuart"; type: Easing.OutInQuart; ballColor: "Chartreuse" } ListElement { name: "Easing.InQuint"; type: Easing.InQuint; ballColor: "LimeGreen" } ListElement { name: "Easing.OutQuint"; type: Easing.OutQuint; ballColor: "SeaGreen" } ListElement { name: "Easing.InOutQuint"; type: Easing.InOutQuint; ballColor: "DarkGreen" } ListElement { name: "Easing.OutInQuint"; type: Easing.OutInQuint; ballColor: "Olive" } ListElement { name: "Easing.InSine"; type: Easing.InSine; ballColor: "DarkSeaGreen" } ListElement { name: "Easing.OutSine"; type: Easing.OutSine; ballColor: "Teal" } ListElement { name: "Easing.InOutSine"; type: Easing.InOutSine; ballColor: "Turquoise" } ListElement { name: "Easing.OutInSine"; type: Easing.OutInSine; ballColor: "SteelBlue" } ListElement { name: "Easing.InExpo"; type: Easing.InExpo; ballColor: "SkyBlue" } ListElement { name: "Easing.OutExpo"; type: Easing.OutExpo; ballColor: "RoyalBlue" } ListElement { name: "Easing.InOutExpo"; type: Easing.InOutExpo; ballColor: "MediumBlue" } ListElement { name: "Easing.OutInExpo"; type: Easing.OutInExpo; ballColor: "MidnightBlue" } ListElement { name: "Easing.InCirc"; type: Easing.InCirc; ballColor: "CornSilk" } ListElement { name: "Easing.OutCirc"; type: Easing.OutCirc; ballColor: "Bisque" } ListElement { name: "Easing.InOutCirc"; type: Easing.InOutCirc; ballColor: "RosyBrown" } ListElement { name: "Easing.OutInCirc"; type: Easing.OutInCirc; ballColor: "SandyBrown" } ListElement { name: "Easing.InElastic"; type: Easing.InElastic; ballColor: "DarkGoldenRod" } ListElement { name: "Easing.OutElastic"; type: Easing.OutElastic; ballColor: "Chocolate" } ListElement { name: "Easing.InOutElastic"; type: Easing.InOutElastic; ballColor: "SaddleBrown" } ListElement { name: "Easing.OutInElastic"; type: Easing.OutInElastic; ballColor: "Brown" } ListElement { name: "Easing.InBack"; type: Easing.InBack; ballColor: "Maroon" } ListElement { name: "Easing.OutBack"; type: Easing.OutBack; ballColor: "LavenderBlush" } ListElement { name: "Easing.InOutBack"; type: Easing.InOutBack; ballColor: "MistyRose" } ListElement { name: "Easing.OutInBack"; type: Easing.OutInBack; ballColor: "Gainsboro" } ListElement { name: "Easing.OutBounce"; type: Easing.OutBounce; ballColor: "Silver" } 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" } } Component { id: delegate Item { height: 42; width: window.width Text { text: name; anchors.centerIn: parent; color: "White" } Rectangle { id: slot1; color: "#121212"; x: 30; height: 32; width: 32 border.color: "#343434"; border.width: 1; radius: 8 anchors.verticalCenter: parent.verticalCenter } Rectangle { id: slot2; color: "#121212"; x: window.width - 62; height: 32; width: 32 border.color: "#343434"; border.width: 1; radius: 8 anchors.verticalCenter: parent.verticalCenter } Rectangle { id: rect; x: 30; color: "#454545" border.color: "White"; border.width: 2 height: 32; width: 32; radius: 8 anchors.verticalCenter: parent.verticalCenter MouseArea { onClicked: if (rect.state == '') rect.state = "right"; else rect.state = '' anchors.fill: parent } states : State { name: "right" PropertyChanges { target: rect; x: window.width - 62; color: ballColor } } transitions: Transition { NumberAnimation { properties: "x"; easing.type: type; duration: 1000 } ColorAnimation { properties: "color"; easing.type: type; duration: 1000 } } } } } Flickable { anchors.fill: parent; contentHeight: layout.height Column { id: layout anchors.left: parent.left; anchors.right: parent.right Repeater { model: easingTypes; delegate: delegate } } } } //=========================================
Grouping Animations:
可以使用ParallelAnimation或者SequentialAnimation将多个动画合并到动画组。
ParallelAnimation里的动画将同时执行
SequentialAnimation里的动画将顺序执行。 Rectangle { id: rect width: 120; height: 200 Image { id: img source: "images/qt.png" anchors.horizontalCenter: parent.horizontalCenter y:0 } SequentialAnimation on y{ loops: Animation.Infinite NumberAnimation { to:rect.height - img.height;easing.type: Easing.OutBounce; duration: 2000 } PauseAnimation { duration: 1000 } NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000} } } 从以上代码可以看到三个动画顺序执行,从上到下停顿一秒后又上,如此循环
动画组也能够嵌套使用: Rectangle { id: redRect width: 100; height: 100 color: "red" MouseArea { id: mouseArea; anchors.fill: parent } states: State { name: "pressed"; when: mouseArea.pressed PropertyChanges { target: redRect; color: "blue"; y: mouseArea.mouseY; width: mouseArea.mouseX } } transitions: Transition { SequentialAnimation { ColorAnimation { duration: 200 } PauseAnimation { duration: 100 } ParallelAnimation { NumberAnimation { duration: 500 easing.type: Easing.OutBounce targets: redRect properties: "y" } NumberAnimation { duration: 800 easing.type: Easing.InOutQuad targets: redRect properties: "width" } } } } } 下个qt-mobility,下了三个小时居然还没下完,杯具的网速。
好了,睡觉了,明天还要上班。突然觉得这些动画比Flex的还简单些
发表评论
-
字符串之模式匹配
2012-07-06 09:52 592字符串中的所有首字母出现索引位置(递归版) * @ ... -
iphone 正则表达式小应用 NSRegularExpression
2012-07-06 09:45 640- (BOOL)isNumbericString:(NSS ... -
正则表达式的内容(一)
2012-07-06 09:37 653下面的示例演示如何使用正则表达式来检查字符串是表示货币值还 ... -
opera 去掉左上角 图标(按钮)的方法
2012-07-06 09:30 806VER 1893 解包skinXXX.zip skin.i ... -
Javascript操纵DOM实现查找、删除、隔行换色等功能
2012-07-05 20:45 668太久没更新博客, ... -
组件属性与布局器
2012-07-03 13:43 527组件属性: 组件大小: 组件内外边框边距: 组 ... -
实现最大化、最小化、缩放功能的TitleWindow
2012-07-02 10:53 643前段时间在做flex的一个文档在线浏览时用到了需要Titl ... -
编写鱼眼组件
2012-07-02 10:53 672编写鱼眼组件 如果你看过苹果那的停靠栏也许你会很惊讶 ... -
jsp页面
2012-07-02 10:53 539做人,生活,学习,玩.... ... -
监视flash player在运行期间的性能表现
2012-07-01 00:32 599我的想法就是在Flash Player运行期间简单的加入一 ... -
Ext JS 4的Grid组件
2012-07-01 00:32 613我们正在不懈地努力着Ext JS4。到目前为止所呈送给各位 ... -
Ext 4 概述(六)之Grid
2012-07-01 00:32 615这次升级Ext 4全部 ... -
Firefox/Chrome下flash的wmode参数设为opaque或transparent时输入文本框中无法输入中文汉字的解决方法
2012-07-01 00:32 552这段时间做个项目 ...
相关推荐
blackberry qml animation
QmlRotationAnimationQml旋转箭头.7z
QML-Loaders:在QML中加载动画实现
QML图表 ========== QML图表模块,使用chart.js(基于版本:“ 1.0.1-beta.4”)在QML画布上呈现图表。 该项目借鉴了( )的想法 ... animation : true chartAnimationEasing : Easing . InOutElastic ; chartAnima
可以将它们作为原始动画进行控制,但是首选animate(animation)功能,因为它会在开始动画之前重置姿势。 如果使用皮肤,则必须设置skeleton.skin.state =“ GOBLIN”。 根骨骼将位于项目的x和y位置。 重置功能可...
Qt6 QML Book/动画元素类型/动画 示例源码 CSDN审核可能较慢,如无法下载,可以过段时间再回来看下 仅供相关爱好者交流使用,请于下载24小时内删除
新的SpringAnimation 动画 demo
在window的qt creator平台上开发的,qt定时器的方法连续播放几幅图片看起来像动画,而且运行时外围的窗体都被透明化了,只有显示破壳而出的小鸡的动画,在你的桌面上随意拖动。
前几天在群里看见有个小伙伴用的一款gif录屏软件有一个鼠标点击时有一个类似水滴的点击效果。于是想了想,便开始了Code。思路也很简单,就是借助Qt的动画类QVariantAnimation然后不断重绘达到点击的动画效果。
Qt5开发及实例,实例CH2001,编程演示动画...(1)新建QML应用程序,项目名称为“PropertyAnimation”。 (2)定义4个矩形组件,代码分别。 (3)打开MainForm.ui.qml文件,修改代码。 (4)打开main.qml文件,修改代码;
We then delve into Qt Quick, OpenGL, and various other tools to add game logic, design animation, add game physics, and build astonishing UI for the games. Towards the final chapters, you'll learn to...
platform project to host a third-party libraryBuild a Qt application using the OpenCV APIUse the Qt Animation framework to display stunning effectsDeploy mobile apps with Qt and embedded platforms, In...
QML sequence object .................... yes QML list model ......................... yes QML XML http request ................... yes QML Locale ............................. yes QML delegate ...