标签：clear 表示 alias ubi 不能 str mod row 直线
1.RotationAnimation
RotationAnimation也是继承于PropertyAnimation组件,但是它有点特殊,它只需要指定taget目标对象,并且不需要指定property,因为rotation就是要绑定的属性.并且它还多了个direction属性:
示例如下所示:
property var rotationModel: [ ["#00FF00", RotationAnimation.Numerical], ["#FF0000", RotationAnimation.Clockwise], ["#0000FF", RotationAnimation.Counterclockwise], ["#00FFFF", RotationAnimation.Shortest], ] property var animations: new Array(0) MouseArea { id: area anchors.fill: parent onPressed: { for (var i in animations) { console.log(animations[i].direction) animations[i].start(); } } } Row { spacing: 10 Repeater { model: rotationModel.length Rectangle { id: rect width: 100 height: 100 radius: width / 2 color: rotationModel[index][0] Text { anchors.centerIn: parent text: "model"+ index.toString() color: "white" font.pixelSize: 18 font.bold: true } RotationAnimation { running: true duration: 500 target: rect direction: rotationModel[index][1] from : 10 to : 350 Component.onCompleted: animations[index] = this } } } }
效果如下所示:
2.PathAnimation
PathAnimation继承于Animation组件,用来实现一个路径动画.
它的属性如下所示:
接下来我们便来讲解Path路径
3.Path
一个Path可以由下面多个Path段组成:
显示一个Path路径
我们可以通过设置context2D的path属性,来显示出我们绘画的Path路径,不然都不知道绘制的路径到底对不对,真是"半夜吃黄瓜-摸不着头尾"
我们以PathArc为例,示例如下所示:
Canvas { id: canvas anchors.fill: parent antialiasing: true onPaint: { var context = canvas.getContext("2d") context.clearRect(0, 0, width, height) context.strokeStyle = "black" context.path = path context.stroke() } } Path { id: path startX: 100; startY: 100 PathArc { x: 100; y: 140 radiusX: 100; radiusY: 50 useLargeArc: true xAxisRotation: 30 } }
效果如下所示:
这里我们设置弧线的起始位置为(100,100),终点位置为(100,140).
它的useLargeArc为true,表示使用角度大的那个圆弧,如果设置为false,则将会使用小的那个圆弧
它的xAxisRotation表示x水平方向是否倾斜,我们这里按顺时针倾斜了30°,该值仅在x和y半径不同时有用，这意味着圆弧是椭圆形的
接下来我们便来学习PathSvg路径.
4.PathSvg
PathSvg支持的命令如下所示:
5.PathAnimation使用PathSvg示例
Canvas { id: canvas anchors.fill: parent antialiasing: true onPaint: { var context = getContext("2d") context.clearRect(0, 0, width, height) context.strokeStyle = "red" context.path = pathAnim.path context.stroke() } } PathAnimation { id: pathAnim running: true loops: Animation.Infinite duration: 5000 easing.type: Easing.InQuad target: car orientation: PathAnimation.RightFirst anchorPoint: Qt.point(car.width/2, car.height) path: Path { startX: 100; startY: 100 PathSvg { path: "M100 100 C600 50, 50 300, 550 250" } } } Item { id: car x: 25; y: 25 width: 80; height: 38 Canvas { id: canvas2 anchors.fill: parent antialiasing: true onPaint: { var context = getContext("2d") context.clearRect(0, 0, width, height) context.fillStyle = "blue" context.fillRect(0,0,width,height-10) context.fillStyle = "yellow" context.ellipse(10,height-20,20,20) context.ellipse(width-30,height-20,20,20) context.fill() console.log(width,height) } } Text { anchors.centerIn: parent text: "小车" color: "white" } }
效果如下所示:
6.SmoothedAnimation
SmoothedAnimation继承于NumberAnimation组件,它比NumberAnimation更加人性化,不仅可以设置duration时间,还可以设置滑动速率。
并且SmoothedAnimation的easing.type默认值为Easing.InOutQuad(慢->快->慢).
SmoothedAnimation如果同时指定了velocity速度和duration持续时间，则会选择导致动画速度最快的那个所需时间.
例如:
它的属性如下所示:
示例如下所示:
MouseArea { anchors.fill: parent hoverEnabled: true onPositionChanged: { animation1.to = mouseX - rect.width/2 animation2.to = mouseY - rect.height/2 animation1.restart() animation2.restart() } } Rectangle { id: rect color: "red" width: 60; height: 60 radius: width/2 SmoothedAnimation on x{ id: animation1 velocity: 100 reversingMode: SmoothedAnimation.Immediate } SmoothedAnimation on y{ id: animation2 velocity: 100 reversingMode: SmoothedAnimation.Immediate } }
只要当我们鼠标位置发生改变就会启动SmoothedAnimation动画进行平滑移动,但是我们这样写,代码显得有点繁琐,可以使用Behavior组件来代替设置from和to的行为来节省代码量
接下来我们来给大家讲讲Behavior.
7.Behavior
Behavior用来让动画绑定到对象一个属性上,Behavior中文翻译就是行为的意思,所以当绑定属性发生改变时,就会自动触发Behavior行为,Behavior就会自动设置动画的to属性,并启动动画.
Behavior只有两个属性animation和enabled, animation保存着要触发行为的哪个动画,enabled表示是否使能行为，默认为true.
Behavior示例如下所示:
MouseArea { anchors.fill: parent hoverEnabled: true onPositionChanged: { rect.x = mouseX - rect.width/2 rect.y = mouseY - rect.height/2 } } Rectangle { id: rect color: "red" width: 60; height: 60 radius: width/2 Behavior on x { SmoothedAnimation { velocity: 100 reversingMode: SmoothedAnimation.Immediate } } Behavior on y { SmoothedAnimation { velocity: 100 reversingMode: SmoothedAnimation.Immediate } } }
这里我们使用Behavior分别为属性绑定了SmoothedAnimation动画,然后我们只需要改变x,y属性,就会自动触发行为,设置我们改变的值到动画的to属性中,并启动动画
8.PauseAnimation
PauseAnimation顾名思义就是暂停动画的意思,只有一个duration属性,用来设置该期间内什么都不做.
并且只能在SequentialAnimation动画中使用,接下来我们便来学习SequentialAnimation和ParallelAnimation,并在代码中使用它
9.SequentialAnimation和ParallelAnimation
SequentialAnimation用来将多个动画串行地执行下去.而ParallelAnimation是用来将多个动画并行地执行下去.
并且SequentialAnimation和ParallelAnimation还可以互相嵌套.
需要注意的是:
示例如下所示:
Window{ id: window width: 480 height: 320 visible: true SequentialAnimation { SequentialAnimation { ParallelAnimation { NumberAnimation { target: ball1 property: "y" from: 20 to: height - ball1.height - 20 easing.type: Easing.OutBounce; duration: 1200 } NumberAnimation { target: ball2 property: "y" from: 20 to: height - ball2.height - 20 easing.type: Easing.OutBounce; duration: 800 } } } PauseAnimation { duration: 500 } running: true loops: Animation.Infinite } Rectangle { id: ball1 width: 40; height: 40; radius: 20 color: "blue" x: 30 } Rectangle { id: ball2 width: 60; height: 60; radius: 30 color: "red" x: 200 } }
效果如下所示:
如上图所示,可以看到每当小球落到地后,就会启动PauseAnimation暂停动画,等待500ms
标签：clear 表示 alias ubi 不能 str mod row 直线
原文地址：https://www.cnblogs.com/lifexy/p/14851811.html
