Qml路径动画PathAnimation

仓颉ROS

已于 2023-06-29 15:03:51 修改

阅读量357

点赞数

分类专栏： qml 文章标签：数据库

于 2023-06-29 15:01:33 首次发布

本文链接：https://blog.csdn.net/weixin_42246754/article/details/131456522

版权

qml 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该文介绍了一个使用QtQuick2.12创建的窗口应用，展示了如何结合Canvas和PathAnimation来实现一个SVG路径动画。动画涉及清屏、描边、路径设定以及无限循环和缓动效果，用于控制一个汽车图像沿着指定路径移动。

摘要由CSDN通过智能技术生成

import QtQuick 2.12
import QtQuick.Window 2.0
import QtQuick.Controls 2.4


Window{
    id: window
    width: 680
    height: 320
    visible: true

    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                                      //单词动画时间为5S
            easing.type: Easing.InQuad                          //设置动画的缓和曲线，此时动画效果为从慢到快
            target: car                                         //设置目标对象
            orientation: PathAnimation.RightFirst               //运动策略,让目标的右侧在前面沿着路径移动
            anchorPoint: Qt.point(car.width/4, car.height/2)      //锚点的位置
            path: Path {
                startX: 100; startY: 100                        //路径起始位置

                PathSvg {                                       //由SVG路径字符串实现路径
                   path: "M100 100 C600 50, 150 250, 550 250"    //M moveto C curveto
                }
            }
        }

        Item {
            id: car
            x: 25; y: 25
            width: 80; height: 38

            Image{
                source: "car.png"
            }

}