控件 qml_Qml简单动画，其实动画也没那么复杂

大家好~，今天分享一个简单的qml动画代码。代码的内容没多少，如果你是qml初学者，我觉得这段代码应该能让你增加学习qml的乐趣。

先看下效果吧~

代码部分

import QtQuick 2.12             //加载开发Qml应用的标准库import QtQuick.Controls 2.12    //加载开发Qml控件 ApplicationWindow {           //窗口    visible: true             //设置是否可见    width: 640                //设置宽    height: 480               //设置高    title: qsTr("动画")        //设置标题     property int pduration: 2000    //定义一个时间是2s     Rectangle {                     //定义一个矩形        id: rect                    //给一个id        width: 50                   //设置宽        height: 50                  //设置高        color: "red"                //给一个颜色         ParallelAnimation{          //创建一个同时进行的动画            id: myPAnimator         //给一个id            running: false          //默认不运行             XAnimator {             //创建一个X轴的动画                target: rect;       //目标,后面写的是需要x轴动画的id                from: 0;            //从哪里                to: 200;            //到哪里                duration: pduration //持续时间,pduration上面已经定义            }             YAnimator {             //创建一个y轴的动画(属性同上)                target: rect;                from: 0;                to: 200;                duration: pduration            }             ScaleAnimator{          //创建一个比例动画(属性同上)                target: rect                from: 1                to: 0.5                duration: pduration            }             RotationAnimator{       //创建一个旋转动画(属性同上)                target: rect                from: 0                to: 360                duration: pduration            }             OpacityAnimator{        //创建一个透明动画(属性同上)                target: rect                from: 1                to: 0.5                 duration: pduration            }        }    }     ParallelAnimation{              //创建一个同时进行的动画        id: myPAnimatorReverse        running: false        XAnimator {            target: rect;            from: 200;            to: 0;            duration: pduration        }         YAnimator {            target: rect;            from: 200;            to: 0;            duration: pduration        }         ScaleAnimator{            target: rect            from: 0.5            to: 1.0            duration: pduration        }         RotationAnimator{            target: rect            from: 360            to: 0            duration: pduration        }         OpacityAnimator{            target: rect            from: 0.5            to:1             duration: pduration        }    }      Button {            //创建一个按钮        x: 10           //设置x坐标        y: 300          //设置y坐标        text: "运行动画"         onClicked: myPAnimator.running = true  //点击事件，将myPAnimator这个动画开始    }     Button {        x: 180        y: 300        text: "恢复"        onClicked: {            myPAnimatorReverse.running = true        }    }}

这段代码，注释的还是比较全的。喜欢的 关注，收藏吧~以后会不定期分享一些好玩的。