加强意识形态建设 办好政协网站,静安集团网站建设,网站建设怎么做呢,wordpress弹窗登录注册插件1.Animation简介
Animation类型提供了四个属性#xff1a;
alwaysRunToEnd#xff1a;该属性接收布尔类型的参数。该属性保存动画是否运行到完成才停止。当loops属性被设置时#xff0c;这个属性是最有用的#xff0c;因为动画将正常播放结束#xff0c;但不会重新启动。…1.Animation简介
Animation类型提供了四个属性
alwaysRunToEnd该属性接收布尔类型的参数。该属性保存动画是否运行到完成才停止。当loops属性被设置时这个属性是最有用的因为动画将正常播放结束但不会重新启动。loops该属性接收int类型的参数。该属性保存播放动画的次数。默认是1如果该属性设置为Animation.Infinite时动画将不断重复直到显式停止将running属性设置为false或者调用stop()方法。paused该属性接布尔类型的参数。该属性标识动画是否暂停。设置paused属性可以控制动画是否暂停。running该属性接收布尔类型的参数。该属性标识动画当前是否正在运行。
Animation类型提供六种方法
complete()停止动画跳转到最终属性值。如果动画没有运行调用此方法将没有效果。在调用complete()之后running属性将被设置为false。与stop()不同complete()会立即将动画快进到结束位置。例如下列代码pause()该方法将暂停动画。如果动画已经暂停或者处于未运行状态调用该方法将没有效果。在调用pause()之后pause属性将被设置为true。restart()该方法将重新开始动画。该方法理解成是stop和start的组合先调用stop()停止动画然后再调用start()开始动画。resume()恢复暂停的动画。如果动画没有被暂停或没有运行调用此方法将没有效果。在调用resume()之后pause属性将被设置为false。start()该方法将开始动画。如果动画已经运行了调用该方法将没有效果。在调用start()之后running属性将被设置为true。stop()停止动画。如果动画没有运行调用该方法将不起作用。在调用stop()之后running和paused属性都将被设置为false。通常情况下stop()会立即停止动画并且动画不会对属性值产生进一步的影响。
在QML用于描述动画和转场的类型如下表所示
名称解释Transition表示状态变化时的动画转换SequentialAnimation串行运行动画ParallelAnimation并行运行动画Behavior为属性更改指定默认动画PropertyAction设置动画期间的属性更改PauseAnimation用于在动画过程中暂停动画SmoothedAnimation该类型允许属性平滑的跟踪值SpringAnimation允许属性以类似弹簧的运动方式跟踪一个值ScriptAction在动画过程中运行脚本
基于数值的属性动画类型:
名称解释AnchorAnimationAnchor变化动画NumberAnimation数值改变动画ColorAnimation颜色改变动画ParentAnimation父值变化动画PathAnimation路径改变动画PropertyAnimation属性改变动画RotationAnimation旋转值改变动画Vector3dAnimationQVector3d值改变动画2.示例
示例1通过start方法来启动动画。设置了两个动画一个改变颜色一个改变透明度
Window {visible: truewidth: 400height: 400title: qsTr(Hello World)Rectangle {id: rectwidth: 75height: 75color: blueopacity: 1.0MouseArea {anchors.fill: parentonClicked: {animateColor.start()animateOpacity.start()}}PropertyAnimation {id: animateColortarget: rectproperties: colorto: redduration: 2000}NumberAnimation {id: animateOpacitytarget: rectproperties: opacityfrom:0.1to: 1duration: 2000}}
} 示例2我们还可以使用Animation on Property语句来设计动画该语句将直接指定将要动画的属性以下设置了3个动画。
Window {visible: truewidth: 400height: 400title: qsTr(Hello World)Rectangle {id: rectwidth: 100; height: 100color: redPropertyAnimation on x { //直接修改控件的位置to: 100duration: 1000}PropertyAnimation on y {to: 100duration: 1000}PropertyAnimation on color {to: yellowduration: 1000}}
} 示例3做了一个串行动画先从yellow变为red再从red变为blue
Window {visible: truewidth: 400height: 400title: qsTr(Hello World)Rectangle {width: 100height: 100color: yellowSequentialAnimation on color {ColorAnimation { to: red; duration: 1000 }ColorAnimation { to: blue; duration: 1000 }}}
}
示例4使用state和Transition。
Window {visible: truewidth: 400height: 400title: qsTr(Hello World)Rectangle {width: 75height: 75id: buttonstate: RELEASEDradius: 5MouseArea {anchors.fill: parentonPressed: button.state PRESSEDonReleased: button.state RELEASED}states: [State {name: PRESSEDPropertyChanges { target: button; color: blue}},State {name: RELEASEDPropertyChanges { target: button; color: red}}]transitions: [Transition {from: PRESSEDto: RELEASEDColorAnimation { target: button; duration: 100}},Transition {from: RELEASEDto: PRESSEDColorAnimation { target: button; duration: 100}}]}
}
示例5使用Behavior定义
Window {visible: truewidth: 400height: 400title: qsTr(Hello World)Rectangle {id: rectwidth: 100height: 100color: redBehavior on width {NumberAnimation { duration: 1000 }}Behavior on x{NumberAnimation{duration: 1000}}Behavior on color{ColorAnimation {duration: 1000}}Behavior on radius{NumberAnimation{duration:1000}}MouseArea {anchors.fill: parentonClicked: {rect.width 50rect.x 100rect.color bluerect.radius 50}}}
}
