我的网站设计联盟,网站开发三个流程,wordpress auto,WordPress破解怎样主题修复文章目录 动画例子 应用动画例子 缓动曲线例子 动画分组例子 嵌套动画代码 状态和转换代码 动画
QMlL使用插值的方式控制属性的更改。动画是在指定的时间内一些列属性的持续变化。 常用的动画类型元素动画#xff1a;PropertyAnimation:属性值改变播放动画NumberAnimation:qr… 文章目录 动画例子 应用动画例子 缓动曲线例子 动画分组例子 嵌套动画代码 状态和转换代码 动画
QMlL使用插值的方式控制属性的更改。动画是在指定的时间内一些列属性的持续变化。 常用的动画类型元素动画PropertyAnimation:属性值改变播放动画NumberAnimation:qreal_type值改变播放动画ColorAnimation:颜色值改变播放动画RotationAnimation:旋转值改变播放的动画 Qt Quick还提供了一些特殊场景下需要使用的动画类型 PauseAnimationSequentialAnimationParallelAnimationAnchorAnimationParentAnimationSmoothedAnimation SpringAnimationPathAnimationVector3dAnimation 对于更加复杂的动画可能需要在播放动画时改变属性或者运行脚本。为此QtQuick提供了action元素:PropertyAction:在播放动画时改变属性ScripAction:在播放动画时运行脚本
例子
import QtQuick
import QtQuick.WindowImage {id: rootsource: ../../images/background.pngproperty int padding: 40property bool running: falseImage {id: qqsource: ../../images/qq.pngx:root.padding;y:(root.height-height)/2NumberAnimation on x{to:root.width-qq.width-root.paddingduration: 3000running: root.running}RotationAnimator on rotation{to:360duration: 3000running: root.running}OpacityAnimator on opacity{to:0duration: 3000running: root.running}}MouseArea{anchors.fill: rootonClicked: root.running true}
} 应用于x和rotation、透明度属性的简单动画。每个动画的持续时间为3000毫秒。x将对象逐渐移动到右边的位置。rotation从当前角度运行到360度。透明度:从1到0三个动画并行运行并在单击鼠标区域时启动。
应用动画
可以通过多种方式执行动画
属性上的动画在元素完全加载后自动运行属性上的行为属性值更改时自动运行独立动画使用start()显式启动动画或将running设置为true时运行
例子
import QtQuick
import QtQuick.WindowWindow {id:rootwidth: 640height: 480visible: truetitle: qsTr(Hello World)color:grayClickableImageV2{id:qq1x:40;y:root.height-heightsource:../../images/qq.pngtext:animation on propertyNumberAnimation on y{to:40;duration:3000}}ClickableImageV2{id:qq2x:40qq1.width20;y:root.height-heightsource:../../images/qq.pngtext:animation on propertyBehavior on y{NumberAnimation{duration:3000}}onClicked: y40}ClickableImageV2{id:qq3x:40qq1.widthqq2.x;y:root.height-heightsource:../../images/qq.pngtext:animation on propertyNumberAnimation{id:animtarget:qq3from:root.height-qq3.heightto:40;duration:3000property:yrunning:area.pressed}MouseArea{id:areaanchors.fill: parent}}
} 第一个对象使用onproperty策略进行移动。动画立即开始。 第二个对象使用Behavior on动画。此行为告诉属性它应该为值的每个更改设置动画。可以通过在行为元素上设置enabled:false来禁用该行为。 第三个对象使用standalone动画。动画被定义为其自己的元素几乎可以位于文档中的任何位置。
缓动曲线 属性的值更改可以由动画控制。缓动属性允许影响属性更改的插值曲线。 y轴property x轴duration
例子
import QtQuick
import QtQuick.Window
import QtQuick.LayoutsRectangle{id:rootwidth: childrenRect.widthheight: childrenRect.heightcolor:graygradient: Gradient{GradientStop{position:0.0;color:root.color}GradientStop{position:1.0;color:Qt.lighter(root.color,1.5)}}ColumnLayout{spacing: 20Grid{spacing: 10columns:5EasingType{title:LineareasingType: Easing.LinearonClicked: {animation.easing.typeeasingTypebox.toggle!box.toggle}}EasingType{title:InExpoeasingType: Easing.InExpoonClicked: {animation.easing.typeeasingTypebox.toggle!box.toggle}}EasingType{title:OutExpoeasingType: Easing.OutExpoonClicked: {animation.easing.typeeasingTypebox.toggle!box.toggle}}EasingType{title:InOutExpoeasingType: Easing.InOutExpoonClicked: {animation.easing.typeeasingTypebox.toggle!box.toggle}}EasingType{title:InOutCubiceasingType: Easing.InOutCubiconClicked: {animation.easing.typeeasingTypebox.toggle!box.toggle}}EasingType{title:SineCurveeasingType: Easing.SineCurveonClicked: {animation.easing.typeeasingTypebox.toggle!box.toggle}}EasingType{title:InOutCirceasingType: Easing.InOutCirconClicked: {animation.easing.typeeasingTypebox.toggle!box.toggle}}EasingType{title:InOutElasticeasingType: Easing.InOutElasticonClicked: {animation.easing.typeeasingTypebox.toggle!box.toggle}}EasingType{title:InOutBackeasingType: Easing.InOutBackonClicked: {animation.easing.typeeasingTypebox.toggle!box.toggle}}EasingType{title:InOutBounceeasingType: Easing.InOutBounceonClicked: {animation.easing.typeeasingTypebox.toggle!box.toggle}}}Rectangle{height:100Layout.fillWidth: truegradient: Gradient{GradientStop{position:0.0;color:gray}GradientStop{position:1.0;color:green}}Rectangle{id:boxproperty bool toggleanchors.verticalCenter: parent.verticalCenterwidth: 80;height:80gradient: Gradient{GradientStop{position:0.0;color:red}GradientStop{position:1.0;color:yellow}}x:toggle?20:root.width-width-20Behavior on x{NumberAnimation{id:animationduration:1000}}}}}} 点击不同的曲线会有不同的动画效果。
动画分组 分组有两种方式并行或顺序。 可以使用SequentialAnimation或ParallelAnimation元素它们充当其他动画元素的动画容器。这些分组动画本身就是动画。
例子
import QtQuick
import QtQuick.WindowWindow {id:rootwidth: 640height: 480visible: truetitle: qsTr(UFO)property int duration: 3000Image {source: ../../images/background.pnganchors.fill: parent}ClickableImageV3{id:ufox:20;y:root.height-heightsource: ../../images/ufo.pngtext:UFOonClicked: anim.restart()}ParallelAnimation/*SequentialAnimation*/{id:animNumberAnimation{target: ufoproperty: yfrom:root.height-ufo.heightto:20duration: root.duration}NumberAnimation{target: ufoproperty: xfrom:20to:500duration: root.duration}}
} 嵌套动画 分组动画也可以嵌套。例如一个连续动画可以有两个并行动画作为子动画。我们可以通过一个足球示例
从左到右的x平移X1从下到上的y平移Y1然后是从上到下的平移Y2带有一些弹跳在动画的整个持续时间内旋转360度ROT1 即我们可以将y的改变分成一次顺序动画角度和x的变化与这次顺序动画为一个并行动画即可实现效果。
代码
import QtQuick
import QtQuick.WindowItem {id:rootwidth: 480height: 300property int duration: 3000Rectangle{id:skywidth: root.widthheight: 200gradient: Gradient{GradientStop{position:0.0;color:#0080FF}GradientStop{position:1.0;color:#66CCFF}}}Rectangle{id:groundanchors.top: sky.bottomanchors.bottom:root.bottomwidth: root.widthgradient: Gradient{GradientStop{position:0.0;color:#00FF00}GradientStop{position:1.0;color:#00803F}}}Image {id: ballsource: ../../images/soccer_ball.pngscale:0.5x:0;y:root.height-heightMouseArea{anchors.fill: parentonClicked: {ball.x0ball.yroot.height-ball.heightball.rotation0anim.restart()}}}ParallelAnimation{id:animSequentialAnimation{NumberAnimation{properties: ytarget: ballto:20duration: root.duration*0.4easing.type:Easing.OutCirc}NumberAnimation{properties: ytarget: ballto:root.height-ball.heightduration: root.duration*0.6easing.type:Easing.OutBounce}}NumberAnimation{properties: xtarget: ballto:380duration: root.duration}RotationAnimation{properties: rotationtarget: ballto:720duration: root.duration}}
}
状态和转换
状态定义了一组属性的更改可以由特定条件触发。状态开关可以附加一个转换该转换定义了这些更改对应的动画或执行附加的行为。进入状态时也可以执行行为。 例如两个信号灯。stop用红色go用绿色。两个灯光不应同时发光。
state: stop states: [ State { name: stop PropertyChanges { target: light1; color: root.red }PropertyChanges { target: light2; color: root.black } }, State { name: go PropertyChanges { target: light1; color: root.black } PropertyChanges { target: light2; color: root.green } }
] MouseArea { anchors.fill: parent onClicked: parent.state (parent.state stop ? go : stop)
} 现在能够成功地改变信号灯的状态。为了使UI更具吸引力应该添加一些带有动画效果的过渡。状态改变可以触发转换。
transitions: [ Transition { from: stop; to: go // from: *; to: * ColorAnimation { target: light1; properties: color; duration: 2000 } ColorAnimation { target: light2; properties: color; duration: 2000 } }
] rom: “; to: ” 表示“从任何状态到任何其他状态”是默认值。
代码
import QtQuick
import QtQuick.WindowItem {id: rootwidth: 150;height:260property color black: blackproperty color red: redproperty color green: greenRectangle{anchors.fill: parentcolor:#333333}state: stopstates: [State {name: stopPropertyChanges {target: light1;color:root.red;}PropertyChanges {target: light2;color:root.black;}},State {name: goPropertyChanges {target: light1;color:root.black;}PropertyChanges {target: light2;color:root.green;}}]transitions: [Transition {from: *;to: *ColorAnimation {target:light1;duration: 1000;properties: color}ColorAnimation {target:light2;duration: 1000;properties: color}}]Rectangle{id:light1x:25;y:15width:100;height: widthradius: width/2color:root.blackborder.color: Qt.lighter(color,1.1)}Rectangle{id:light2x:25;y:135width:100;height: widthradius: width/2color:root.blackborder.color: Qt.lighter(color,1.1)}MouseArea{anchors.fill: rootonClicked: {parent.state ((parent.state stop)?go:stop)}}
}
完整代码链接
