PathView设计精致菜单动画H

import QtQuick 2.0

Item {
    id:secondMenuRoot
    x:214
    y:152
    opacity: 0.0
    transform: Scale {id:scaleid; origin.x: 720 - 214; origin.y: 240 -152; xScale: 0.6}
    Item{
        id:secondMenuPanel
        x:-214
        y:-152
        Image {
            id: timeSetbg
            x: 460
            y: 103
            scale: 0.0
            source: "qrc:/menuImages/images/menu/timeSet/timeSetbg.png"
            Loader{
                //visible: !time3.active
                x:-460
                y:-103
                active: HtCarStatus.timeSetMenu1
                source: "qrc:/common/qml/common_qml/Time2.qml"
            }
//            Loader{
//                id:time2
//                x:-460
//                y:-103
//                active:HtCarStatus.timeSetMenu2Flag&&false
//                source: "qrc:/common/qml/common_qml/Time2.qml"
//            }
//            Loader{
//                id:time3
//                x:-460
//                y:-103
//                active:HtCarStatus.timeSetMenu3Flag && false
//                source: "qrc:/common/qml/common_qml/Time3.qml"
//            }
        }

        Image {
            id: bgLightSet
            x:460
            y: 103
            scale: 0.0
            source: "qrc:/menuImages/images/menu/lightSetBg.png"
            Rectangle{
                id:bgLightPro
                x:537 - 460 + 3
                y:240 - 103 + 4
                width: 340/6*HtCarStatus.bgLightNum
                height: 6
                color: "white"
                radius: 3
            }

            Image {
                id: arcIcon
                x:537 - 460 + 340/6*HtCarStatus.bgLightNum
                y:240 - 103
                source: "qrc:/menuImages/images/menu/arcIcon.png"
            }
        }

        Image {
            id: limitspeed_set
            x:460
            y:102
            scale: 0.0
            source: "qrc:/menuImages/images/menu/limitSet/limitspeed_set.png"
            Component{
                id:limit_component
                Item{
                    Image {
                        id: complete
                        x:824 - 460
                        y:305 - 102
                        source: "qrc:/menuImages/images/menu/limitSet/complete.png"
                    }
                    SequentialAnimation{
                        running: HtCarStatus.limitMenu1
                        NumberAnimation{target: complete ; property: "opacity" ; to: 0.1 ; duration: 1000 ; easing.type:Easing.Linear}
                        NumberAnimation{target: complete ; property: "opacity" ; to: 1.0 ; duration: 1000 ; easing.type:Easing.Linear}
                        PauseAnimation {duration: 300}
                        loops: Animation.Infinite
                    }
                }
            }
            Loader{
                active: HtCarStatus.limitMenu1
                sourceComponent: limit_component
            }

            Item {
                id: limit
                x:637 - 460
                y:170 - 102
                width: 112
                height: 140

                ListModel{
                    id:limit_model
                    ListElement{icon:"qrc:/menuImages/images/menu/limitSet/OFF.png"  }
                    ListElement{icon:"qrc:/menuImages/images/menu/limitSet/160.png"  }
                    ListElement{icon:"qrc:/menuImages/images/menu/limitSet/150.png"  }
                    ListElement{icon:"qrc:/menuImages/images/menu/limitSet/140.png"  }
                    ListElement{icon:"qrc:/menuImages/images/menu/limitSet/130.png"  }
                    ListElement{icon:"qrc:/menuImages/images/menu/limitSet/120.png"  }
                    ListElement{icon:"qrc:/menuImages/images/menu/limitSet/110.png"  }
                    ListElement{icon:"qrc:/menuImages/images/menu/limitSet/100.png"  }
                    ListElement{icon:"qrc:/menuImages/images/menu/limitSet/90.png"  }
                    ListElement{icon:"qrc:/menuImages/images/menu/limitSet/80.png"  }
                    ListElement{icon:"qrc:/menuImages/images/menu/limitSet/70.png"  }
                    ListElement{icon:"qrc:/menuImages/images/menu/limitSet/60.png"  }
                    ListElement{icon:"qrc:/menuImages/images/menu/limitSet/50.png"  }
                    ListElement{icon:"qrc:/menuImages/images/menu/limitSet/40.png"  }
                }

                Component{
                    id:limitDelegate
                    Item {
                        id: wrapper
                        width:40
                        height: 40
                        z:PathView.itemZ
                        scale:PathView.itemScale
                        visible: PathView.onPath

                        Image {
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.horizontalCenterOffset: 17
                            opacity:  wrapper.PathView.isCurrentItem?1.0:0.6
                            scale: wrapper.PathView.isCurrentItem?1.0:0.75
                            source: icon
                        }
                    }
                }
                //                property int limitCurrentIndex: 0
                PathView{
                    anchors.fill:parent
                    delegate: limitDelegate
                    model:limit_model
                    currentIndex: HtCarStatus.limitIndex
                    path:Path{
                        startX: 0
                        startY: 8
                        PathAttribute{name:"itemZ";value:0.5   }
                        PathAttribute{name:"itemScale" ;value:1.0  }
                        PathLine{x:0;y:80   }
                        PathAttribute{name:"itemZ";value:0.5   }
                        PathAttribute{name:"itemScale" ;value:1.0  }
                        PathLine{x:0;y:152   }
                        PathAttribute{name:"itemZ";value:0.5   }
                        PathAttribute{name:"itemScale" ;value:1.0 }
                    }
                    pathItemCount:3
                    preferredHighlightBegin: 0.5
                    preferredHighlightEnd: 0.5

                }
            }
        }

        Image {
            id: baoyang
            x:460
            y:103
            scale: 0.0
            source: "qrc:/menuImages/images/menu/maintance/maintenance.png"
            property int maintain: 4999
            Image {
                id: km
                x:815 - 460
                y:236 - 103
                source: "qrc:/menuImages/images/menu/maintance/km.png"

                Text{
                    id:baoyang_value
                    y:236-236 - 7
                    anchors.right: km.left
                    anchors.rightMargin: 8
                    color: "white"
                    font.pixelSize: 25
                    text:baoyang.maintain
                }
            }

            Component{
                id:reset_maintance_component
                Item{
                    Image {
                        id: reset
                        x:834 - 460
                        y:308 - 103
                        source: "qrc:/menuImages/images/menu/maintance/reset.png"
                    }
                    SequentialAnimation{
                        running: !HtCarStatus.maintanceOkFlag
                        NumberAnimation{target: reset ; property: "opacity" ; to: 0.1 ; duration: 1000 ; easing.type:Easing.Linear}
                        NumberAnimation{target: reset ; property: "opacity" ; to: 1.0 ; duration: 1000 ; easing.type:Easing.Linear}
                        PauseAnimation {duration: 300}
                        loops: Animation.Infinite
                    }
                }
            }
            Loader{
                id:reset_maintane
                active: HtCarStatus.maintanceMenu1
                sourceComponent: reset_maintance_component
            }

            Loader{
                id:maintain_confirm
                active: HtCarStatus.maintanceOkFlag
                sourceComponent: matian_ok
            }

            Component{
                id:matian_ok
                Item {
                    id: judge_confirm
                    x:-460
                    y:-103
                    Image {
                        id: judge_reset
                        x:460
                        y:103
                        source: "qrc:/menuImages/images/menu/maintance/judge_reset.png"
                    }

                    Image {
                        id: confirm
                        x:685
                        y:277
                        source: "qrc:/menuImages/images/menu/maintance/confirm.png"
                    }
                    SequentialAnimation{
                        running: HtCarStatus.maintanceOkFlag
                        NumberAnimation{target: confirm ; property: "opacity" ; to: 0.1 ; duration: 1000 ; easing.type:Easing.Linear}
                        NumberAnimation{target: confirm ; property: "opacity" ; to: 1.0 ; duration: 1000 ; easing.type:Easing.Linear}
                        PauseAnimation {duration: 300}
                        loops: Animation.Infinite
                    }
                }
            }
        }

        Image {
            id: navigation_box
            x:460
            y:102
            scale: 0.0
            source: "qrc:/menuImages/images/menu/navigation/navigation.png"

            Image {
                id: close
                x:685 - 460
                y:277 - 102
                source: "qrc:/menuImages/images/menu/navigation/close.png"
            }
        }

        Item{
            id:traffic_info
            width: 1440
            height: 540
            scale:0.0
            property int num: HtCarStatus.carInfoIndex
            property int odo: 5752
            property double mileage: 43.4
            property int ev: 5750
            property int recharges: 0

            property double instantOil: 0
            property double energyWaste: 0
            property double averageOil: 0
            property int carspeed: 0

            property int maintain: 4107
            property int voltage: 15
            property int current: 15

            Image {
                id: carInfoBgM
                x:460
                y:102
                source: "qrc:/menuImages/images/menu/carInfo/carInfoBgM.png"
            }

            Image {
                id: select_box
                x:485
                y:{switch(traffic_info.num){
                    case 0:
                        174;
                        break;
                    case 1:
                        215;
                        break;
                    case 2:
                        257;
                        break;
                    case 3:
                        300;
                        break;
                    case 4:
                        174;
                        break;
                    case 5:
                        215;
                        break;
                    case 6:
                        257;
                        break;
                    case 7:
                        300;
                        break;
                    case 8:
                        174;
                        break;
                    case 9:
                        215;
                        break;
                    case 10:
                        257;
                        break;
                    case 11:
                        300;
                        break;
                    default:
                        break;
                    }
                }
                visible: traffic_info.num>=0&&traffic_info.num<=11?true:false
                source: "qrc:/menuImages/images/menu/carInfo/Select_box.png"
            }

            Item {
                id: first
                visible: traffic_info.num<=3?true:false

                Image {
                    id: first_page
                    x:550
                    y:181
                    source: "qrc:/menuImages/images/menu/carInfo/First_Page.png"
                }

                Image {
                    id: hook1
                    x:870
                    y:268
                    visible: HtCarStatus.EVODOFlag
                    source: "qrc:/menuImages/images/menu/carInfo/hook.png"
                }

                Image {
                    id: hook2
                    x:870
                    y:310
                    visible: HtCarStatus.surTripFlag
                    source: "qrc:/menuImages/images/menu/carInfo/hook.png"
                }

                Image {
                    id: km1
                    x:714
                    y:181
                    source: "qrc:/menuImages/images/menu/carInfo/km.png"
                }

                Text {
                    id: odovalue
                    y:179
                    color: "white"
                    anchors.right: km.left
                    anchors.rightMargin: 5
                    font.family: FontName.fontCurrentMiniMicroSoftYahei
                    font.pointSize: 15
                    text: traffic_info.odo
                }

                Image {
                    id: km2
                    x:729
                    y:223
                    source: "qrc:/menuImages/images/menu/carInfo/km.png"
                }

                Image {
                    id: point
                    x:728
                    y:237

                    Text {
                        id: mileage_value
                        y:221-237
                        color: "white"
                        anchors.right: point.left
                        anchors.rightMargin: 5
                        font.family: FontName.fontCurrentMiniMicroSoftYahei
                        font.pointSize: 15
                        text: (traffic_info.mileage).toFixed(1)
                    }
                }

                Image {
                    id: km3
                    x:714
                    y:265
                    source: "qrc:/menuImages/images/menu/carInfo/km.png"
                }

                Text {
                    id: evvalue
                    y:263
                    color: "white"
                    anchors.right: km2.left
                    anchors.rightMargin: 5
                    font.family: FontName.fontCurrentMiniMicroSoftYahei
                    font.pointSize: 15
                    text: traffic_info.ev
                }

                Image {
                    id: km4
                    x:709
                    y:307
                    source: "qrc:/menuImages/images/menu/carInfo/km.png"
                }

                Text {
                    id: rechargesvalue
                    y:305
                    color: "white"
                    visible: traffic_info.recharges>0?true:false
                    anchors.right: km3.left
                    anchors.rightMargin: 5
                    font.family: FontName.fontCurrentMiniMicroSoftYahei
                    font.pointSize: 15
                    text: traffic_info.recharges
                }

                Text {
                    id: xuhang
                    visible: traffic_info.recharges<=0?true:false
                    y:300
                    anchors.right: km3.left
                    anchors.rightMargin:9
                    font.pointSize: 20
                    color: "white"
                    text: qsTr("---")
                }
            }

            Item {
                id: second
                visible: traffic_info.num>=4&&traffic_info.num<=7?true:false

                Image {
                    id:second_page
                    x:550
                    y:180
                    source: "qrc:/menuImages/images/menu/carInfo/Second_Page.png"
                }

                Image {
                    id: hook3
                    x:870
                    y:184
                    visible: HtCarStatus.insOilFlag
                    source: "qrc:/menuImages/images/menu/carInfo/hook.png"
                }

                Image {
                    id: hook4
                    x:870
                    y:226
                    visible: HtCarStatus.avPowerFlag
                    source: "qrc:/menuImages/images/menu/carInfo/hook.png"
                }

                Image {
                    id: hook5
                    x:870
                    y:268
                    visible: HtCarStatus.avOilFlag
                    source: "qrc:/menuImages/images/menu/carInfo/hook.png"
                }

                Image {
                    id: hook6
                    x:870
                    y:310
                    visible: HtCarStatus.avSpeedFlag
                    source: "qrc:/menuImages/images/menu/carInfo/hook.png"
                }

                Item {
                    id: select1
                    visible: true
                    Image {
                        id: select_singleBox
                        x:851
                        y:207
                        visible: HtCarStatus.carInfoIndexOk === 5 && HtCarStatus.carInfoSelectIndex === 0 && HtCarStatus.carInfoSelectFlag
                        source: "qrc:/menuImages/images/menu/carInfo/selectBox.png"
                    }

                    Image {
                        id: select_clean
                        x:50 + 851
                        y:-3 + 209
                        visible: HtCarStatus.carInfoIndexOk === 5 && HtCarStatus.carInfoSelectIndex === 1&& HtCarStatus.carInfoSelectFlag
                        source: "qrc:/menuImages/images/menu/carInfo/selectBox.png"
                    }
                }

                Item {
                    id: select2
                    visible: true
                    Image {
                        id: select_singleBox1
                        x: 854
                        y:41 + 210
                        visible: HtCarStatus.carInfoIndexOk === 6 && HtCarStatus.carInfoSelectIndex === 0&& HtCarStatus.carInfoSelectFlag
                        source: "qrc:/menuImages/images/menu/carInfo/selectBox.png"
                    }

                    Image {
                        id: select_clean1
                        x:50 +854
                        y:41  + 210
                        visible: HtCarStatus.carInfoIndexOk === 6 && HtCarStatus.carInfoSelectIndex === 1&& HtCarStatus.carInfoSelectFlag
                        source: "qrc:/menuImages/images/menu/carInfo/selectBox.png"
                    }
                }

                Item {
                    id: select3
                    visible: true
                    Image {
                        id: select_singleBox2
                        x:854
                        y:83  + 210
                        visible: HtCarStatus.carInfoIndexOk === 7 && HtCarStatus.carInfoSelectIndex === 0&& HtCarStatus.carInfoSelectFlag
                        source: "qrc:/menuImages/images/menu/carInfo/selectBox.png"
                    }

                    Image {
                        id: select_clean2
                        x:50 + 854
                        y:85 + 210
                        visible: HtCarStatus.carInfoIndexOk === 7 && HtCarStatus.carInfoSelectIndex === 1&& HtCarStatus.carInfoSelectFlag
                        source: "qrc:/menuImages/images/menu/carInfo/selectBox.png"
                    }
                }

                Image {
                    id: average_Speed
                    x:550
                    y:307
                    source: "qrc:/traffic_info/images/simple_images/traffic_info/Average_Speed.png"
                }

                Image {
                    id: instantOil_point
                    x:715
                    y:195
                    visible: traffic_info.instantOil>0?true:false

                    Text {
                        id: instantOil_value
                        y:180-195
                        color: "white"
                        anchors.right: instantOil_point.left
                        anchors.rightMargin: 5
                        font.family: FontName.fontCurrentMiniMicroSoftYahei
                        font.pointSize: 15
                        text: (traffic_info.instantOil).toFixed(1)
                    }
                }

                Text {
                    id: shunshi_youhao
                    visible: traffic_info.instantOil<=0?true:false
                    y:172
                    anchors.right: instantOil_point.left
                    anchors.rightMargin: 8
                    font.pointSize: 20
                    color: "white"
                    text: qsTr("--.-")
                }

                Image {
                    id: energyWaste_point
                    x:715
                    y:237
                    visible: traffic_info.energyWaste>0?true:false

                    Text {
                        id: energyWaste_value
                        y:221-237
                        anchors.right: energyWaste_point.left
                        anchors.rightMargin: 5
                        color: "white"
                        font.family: FontName.fontCurrentMiniMicroSoftYahei
                        font.pointSize: 15
                        text: (traffic_info.energyWaste).toFixed(1)
                    }
                }

                Text {
                    id: pingjun_nenghao
                    visible: traffic_info.energyWaste<=0?true:false
                    y:214
                    anchors.right: energyWaste_point.left
                    anchors.rightMargin: 8
                    font.pointSize: 20
                    color: "white"
                    text: qsTr("--.-")
                }

                Image {
                    id: averageOil_point
                    x:716
                    y:279
                    visible: traffic_info.averageOil>0?true:false

                    Text {
                        id: averageOil_value
                        y:263-279
                        anchors.right: averageOil_point.left
                        anchors.rightMargin: 5
                        color: "white"
                        font.family: FontName.fontCurrentMiniMicroSoftYahei
                        font.pointSize: 15
                        text: (traffic_info.averageOil).toFixed(1)
                    }
                }

                Text {
                    id: pingjun_youhao
                    visible: traffic_info.averageOil<=0?true:false
                    y:256
                    anchors.right: averageOil_point.left
                    anchors.rightMargin: 8
                    font.pointSize: 20
                    color: "white"
                    text: qsTr("--.-")
                }

                Image {
                    id: carspeed_unit
                    x:708
                    y:307
                    source: "qrc:/traffic_info/images/simple_images/traffic_info/km_h.png"

                    Text {
                        id: carspeed_value
                        y:303-307
                        visible: traffic_info.carspeed>0?true:false
                        anchors.right: carspeed_unit.left
                        anchors.rightMargin: 5
                        color: "white"
                        font.family: FontName.fontCurrentMiniMicroSoftYahei
                        font.pointSize: 15
                        text: traffic_info.carspeed
                    }
                }

                Text {
                    id: pingjun_chesu
                    visible: traffic_info.carspeed<=0?true:false
                    y:298
                    anchors.right: carspeed_unit.left
                    anchors.rightMargin: 5
                    font.pointSize: 20
                    color: "white"
                    text: qsTr("---")
                }
            }

            Item {
                id: third
                visible: traffic_info.num>=8?true:false

                Image {
                    id: third_page
                    x:550
                    y:180
                    source: "qrc:/menuImages/images/menu/carInfo/Third_Page.png"
                }

                Image {
                    id: hook7
                    x:920
                    y:184
                    visible: HtCarStatus.maintanceFlag
                    source: "qrc:/menuImages/images/menu/carInfo/hook.png"
                }

                Image {
                    id: hook8
                    x:920
                    y:226
                    visible: HtCarStatus.voltageFlag
                    source: "qrc:/menuImages/images/menu/carInfo/hook.png"
                }

                Image {
                    id: hook9
                    x:920
                    y:268
                    visible: HtCarStatus.currentFlag
                    source: "qrc:/menuImages/images/menu/carInfo/hook.png"
                }

                Image {
                    id: hook10
                    x:920
                    y:310
                    visible: HtCarStatus.waterTFlag
                    source: "qrc:/menuImages/images/menu/carInfo/hook.png"
                }

                Image {
                    id: km5
                    x:687
                    y:181
                    source: "qrc:/menuImages/images/menu/carInfo/km.png"

                    Text {
                        id: baoyangText
                        y:179-181
                        anchors.right: km4.left
                        anchors.rightMargin: 5
                        color: "white"
                        font.family: FontName.fontCurrentMiniMicroSoftYahei
                        font.pointSize: 15
                        text: traffic_info.maintain
                    }
                }

                Image {
                    id: dianya
                    x:646
                    y:224
                    source: "qrc:/menuImages/images/menu/carInfo/V.png"

                    Text {
                        id: dianya_value
                        y:220-224
                        anchors.right: dianya.left
                        anchors.rightMargin: 5
                        color: "white"
                        font.family: FontName.fontCurrentMiniMicroSoftYahei
                        font.pointSize: 15
                        text: traffic_info.voltage
                    }
                }

                Image {
                    id: dianliu
                    x:646
                    y:266
                    source: "qrc:/menuImages/images/menu/carInfo/A.png"

                    Text {
                        id: dianliu_value
                        y:262-266
                        anchors.right: dianliu.left
                        anchors.rightMargin: 5
                        color: "white"
                        font.family: FontName.fontCurrentMiniMicroSoftYahei
                        font.pointSize: 15
                        text: traffic_info.current
                    }
                }
            }
        }

        Item{
            id: theme
            x:460
            y:103
            width: 522
            height: 278
            scale: 0.0
            Image {
                id:sportMode
                x:460 - 522 - 400
                y:102 - 278 + 50
                visible: HtCarStatus.themeIndex == 2
                source: "qrc:/menuImages/images/menu/theme/sport_A.jpg"
            }
            Image {
                id:techno_A
                x:460 - 522 - 400
                y:102 - 278 + 50
                visible: HtCarStatus.themeIndex == 3
                source: "qrc:/menuImages/images/menu/theme/techno_A.jpg"
            }
            Image {
                id:classic_B
                x:460 - 522 - 400
                y:102 - 278 + 50
                visible: HtCarStatus.themeIndex == 0
                source: "qrc:/menuImages/images/menu/theme/classic_B.jpg"
            }
            Image {
                id:simple_C
                x:460 - 522 - 400
                y:102 - 278 + 50
                visible: HtCarStatus.themeIndex == 1
                source: "qrc:/menuImages/images/menu/theme/simple_C.jpg"
            }
        }
    }



    ListModel{
        id:secondModel
        ListElement{
            icon0:"qrc:/menuImages/images/menu/bgLightNW.png"
            icon1:"qrc:/menuImages/images/menu/bgLightSelect.png"
            word:"qrc:/menuImages/images/menu/bgLightW.png"
            limitOFF:""
            limit40:""
            limit50:""
            limit60:""
            limit70:""
            limit80:""
            limit90:""
            limit100:""
            limit110:""
            limit120:""
            limit130:""
            limit140:""
            limit150:""
            limit160:""

        }
        ListElement{
            icon0:"qrc:/menuImages/images/menu/carInfoNW.png"
            icon1:"qrc:/menuImages/images/menu/carInfoSelect.png"
            word:"qrc:/menuImages/images/menu/carInfoW.png"
            limitOFF:""
            limit40:""
            limit50:""
            limit60:""
            limit70:""
            limit80:""
            limit90:""
            limit100:""
            limit110:""
            limit120:""
            limit130:""
            limit140:""
            limit150:""
            limit160:""
        }
        ListElement{
            icon0:"qrc:/menuImages/images/menu/limiNW.png"
            icon1:"qrc:/menuImages/images/menu/limitSelect.png"
            word:"qrc:/menuImages/images/menu/limitW.png"
            limitOFF:"qrc:/menuImages/images/menu/limitSet/OFF.png"
            limit40:"qrc:/menuImages/images/menu/l40.png"
            limit50:"qrc:/menuImages/images/menu/l50.png"
            limit60:"qrc:/menuImages/images/menu/l60.png"
            limit70:"qrc:/menuImages/images/menu/l70.png"
            limit80:"qrc:/menuImages/images/menu/l80.png"
            limit90:"qrc:/menuImages/images/menu/l90.png"
            limit100:"qrc:/menuImages/images/menu/l100.png"
            limit110:"qrc:/menuImages/images/menu/l110.png"
            limit120:"qrc:/menuImages/images/menu/l120.png"
            limit130:"qrc:/menuImages/images/menu/l130.png"
            limit140:"qrc:/menuImages/images/menu/l140.png"
            limit150:"qrc:/menuImages/images/menu/l150.png"
            limit160:"qrc:/menuImages/images/menu/l160.png"
        }
        ListElement{
            icon0:"qrc:/menuImages/images/menu/maintanceNW.png"
            icon1:"qrc:/menuImages/images/menu/maintanceSelect.png"
            word:"qrc:/menuImages/images/menu/maintenceW.png"
            limitOFF:""
            limit40:""
            limit50:""
            limit60:""
            limit70:""
            limit80:""
            limit90:""
            limit100:""
            limit110:""
            limit120:""
            limit130:""
            limit140:""
            limit150:""
            limit160:""
        }
        ListElement{
            icon0:"qrc:/menuImages/images/menu/naviNW.png"
            icon1:"qrc:/menuImages/images/menu/naviSetSelect.png"
            word:"qrc:/menuImages/images/menu/naviW.png"
            limitOFF:""
            limit40:""
            limit50:""
            limit60:""
            limit70:""
            limit80:""
            limit90:""
            limit100:""
            limit110:""
            limit120:""
            limit130:""
            limit140:""
            limit150:""
            limit160:""
        }
        ListElement{
            icon0:"qrc:/menuImages/images/menu/tnemeNW.png"
            icon1:"qrc:/menuImages/images/menu/tnemeSelect.png"
            word:"qrc:/menuImages/images/menu/themeW.png"
            limitOFF:""
            limit40:""
            limit50:""
            limit60:""
            limit70:""
            limit80:""
            limit90:""
            limit100:""
            limit110:""
            limit120:""
            limit130:""
            limit140:""
            limit150:""
            limit160:""
        }
        ListElement{
            icon0:"qrc:/menuImages/images/menu/timeNW.png"
            icon1:"qrc:/menuImages/images/menu/timeSetSelect.png"
            word:"qrc:/menuImages/images/menu/timeW.png"
            limitOFF:""
            limit40:""
            limit50:""
            limit60:""
            limit70:""
            limit80:""
            limit90:""
            limit100:""
            limit110:""
            limit120:""
            limit130:""
            limit140:""
            limit150:""
            limit160:""
        }
    }

    property bool wordFlag: true
    property double currentScale: 1.0
    Component{
        id:delegate
        Item {
            id: wrapper
            //            scale: PathView.itemScale
            z:PathView.itemZ
            transform: Rotation{
                origin.x: wrapper.PathView.itemX; origin.y: 0; axis { x: 0; y: 1; z: 0 } angle: wrapper.PathView.itemAngle
            }
            //   for finding location
            //            Rectangle{
            //                x:wrapper.PathView.itemX
            //                y:0
            //                color: "red"
            //                width: 6
            //                height: 6
            //                radius: 3
            //            }

            Image {
                id: menuIcon
                y:wrapper.PathView.isCurrentItem ? -8+4 : 0
                scale:wrapper.PathView.isCurrentItem ? secondMenuRoot.currentScale : 0.9
                source: wrapper.PathView.isCurrentItem ? icon1 : icon0

                Image {
                    id: limitNum
                    anchors.top: menuIcon.top
                    anchors.topMargin: 90
                    anchors.horizontalCenter: menuIcon.horizontalCenter
                    visible: wrapper.PathView.isCurrentItem ? false : true
                    opacity: 0.6
                    source:
                        switch(HtCarStatus.limitIndex)
                        {
                        case 0:
                             limitOFF;
                            break;
                        case 1:
                             limit160;
                            break
                        case 2:
                             limit150;
                            break
                        case 3:
                             limit140;
                            break
                        case 4:
                             limit130;
                            break
                        case 5:
                             limit120;
                            break
                        case 6:
                             limit110;
                            break
                        case 7:
                             limit100;
                            break
                        case 8:
                             limit90;
                            break
                        case 9:
                             limit80;
                            break
                        case 10:
                             limit70;
                            break
                        case 11:
                             limit60;
                            break
                        case 12:
                             limit50;
                            break
                        case 13:
                             limit40;
                            break
                        }
                }

                Image {
                    id: limitNumSelect
                    anchors.top: menuIcon.top
                    anchors.topMargin: 90
                    anchors.horizontalCenter: menuIcon.horizontalCenter
                    visible: wrapper.PathView.isCurrentItem ? true : false
                    source:   switch(HtCarStatus.limitIndex)
                              {
                              case 0:
                                   limitOFF;
                                  break;
                              case 1:
                                   limit160;
                                  break
                              case 2:
                                   limit150;
                                  break
                              case 3:
                                   limit140;
                                  break
                              case 4:
                                   limit130;
                                  break
                              case 5:
                                   limit120;
                                  break
                              case 6:
                                   limit110;
                                  break
                              case 7:
                                   limit100;
                                  break
                              case 8:
                                   limit90;
                                  break
                              case 9:
                                   limit80;
                                  break
                              case 10:
                                   limit70;
                                  break
                              case 11:
                                   limit60;
                                  break
                              case 12:
                                   limit50;
                                  break
                              case 13:
                                   limit40;
                                  break
                              }
                }
            }
            Image {
                id: menuWord
                anchors.top: menuIcon.top
                anchors.horizontalCenter: menuIcon.horizontalCenter
                visible: secondMenuRoot.wordFlag
                source: wrapper.PathView.isCurrentItem? "" :word
            }

            //currentItem limit  changed firstMenuIndex limitValue can display before FirstMenuItem is selected ,this is a small bug
//            Loader{
//                sourceComponent: limitComponent
//                anchors.top: menuIcon.top
//                anchors.topMargin: 80
//                anchors.horizontalCenter: menuIcon.horizontalCenter
//                active: (HtCarStatus.firstCurrentIndex === 2) &&(wrapper.PathView.isCurrentItem)
//            }

        }
    }
    PathView{
        visible: true
        model: secondModel
        delegate: delegate
        currentIndex: HtCarStatus.firstCurrentIndex
        preferredHighlightBegin:0.50
        preferredHighlightEnd:0.50
        pathItemCount:5
        //        snapMode:PathView.SnapToItem
        //        path: Path{
        //            startX:100+ 10
        //            startY: 0;
        //            PathAttribute { name: "itemAlpha"; value: 0.4 }
        //            PathAttribute{name:"itemZ";value: 1}
        //            PathAttribute{name:"itemX";value:10}
        //            PathAttribute{id:angle1; name:"itemAngle";value:0}
        //            PathLine{id:line1;  x:430; y:0}
                    PathLine{id:line1;  x:431; y:0}
        //            PathPercent    {    value:    0.48;    }
        //            PathAttribute { name: "itemAlpha"; value: 1.0}
        //            PathAttribute{name:"itemZ";value: 10}
        //            PathAttribute{name:"itemX";value:40}
        //            PathAttribute{id:angle2;name:"itemAngle";value:0}
                    PathLine{id:line2;  x:470; y:0}
        //             PathLine{id:line2;  x:470; y:0}
        //            PathPercent    {    value:    0.52;    }
        //            PathLine{ x:800-10;    y:0 }
        //            PathAttribute { name: "itemAlpha"; value: 0.4}
        //            PathAttribute{name:"itemZ";value: 0}
        //            PathAttribute{name:"itemX";value:70}
        //            PathAttribute{id:angle3;name:"itemAngle";value:0}
        //        }

        path: Path{
            //            id:pathM
            startX:100+ 10
            startY: 0;
            PathAttribute { name: "itemAlpha"; value: 0.4 }
            PathAttribute{name:"itemZ";value: 1}
            PathAttribute{name:"itemX";value:60}
            PathAttribute{id:angle1; name:"itemAngle";value:0}
            PathLine{id:line1;  x:450 -40; y:0}
            //            PathLine{id:line1;  x:431; y:0}
            PathPercent    {    value:    0.44;    }
            PathAttribute { name: "itemAlpha"; value: 1.0}
            PathAttribute{name:"itemZ";value: 10}
            PathAttribute{name:"itemX";value:60}
            PathAttribute{id:angle2;name:"itemAngle";value:0}
            //            PathLine{id:line2;  x:470; y:0}
            PathLine{id:line2;  x:450 -40; y:0}
            PathAttribute{id:angle4;name:"itemAngle";value:0} //自动插值
            PathAttribute{name:"itemX";value:80}
            PathPercent    {    value:    0.44;    }
            PathLine{id:end; x:800 - 20;    y:0 }
            //            PathPercent    {    value:    1.0;    }
            PathAttribute { name: "itemAlpha"; value: 0.4}
            PathAttribute{name:"itemZ";value: 0}
            PathAttribute{name:"itemX";value:60}
            PathAttribute{id:angle3;name:"itemAngle";value:0}
        }
    }

         //currentItem limit
//    Component {
//        id:limitComponent
//        Item{
//            id: limit_menu
//            width: 40
//            height: 40
//            visible: HtCarStatus.menu1 && !HtCarStatus.menu2
//            Image {
//                id: l40
//                anchors.centerIn: limit_menu
//                visible: HtCarStatus.limitIndex === 13
//                source: "qrc:/menuImages/images/menu/l40.png"
//            }
//            Image {
//                id: l50
//                anchors.centerIn: limit_menu
//                visible: HtCarStatus.limitIndex === 12
//                source: "qrc:/menuImages/images/menu/l50.png"
//            }
//            Image {
//                id: l60
//                anchors.centerIn: limit_menu
//                visible: HtCarStatus.limitIndex === 11
//                source: "qrc:/menuImages/images/menu/l60.png"
//            }
//            Image {
//                id: l70
//                anchors.centerIn: limit_menu
//                visible: HtCarStatus.limitIndex === 10
//                source: "qrc:/menuImages/images/menu/l70.png"
//            }
//            Image {
//                id: l80
//                anchors.centerIn: limit_menu
//                visible: HtCarStatus.limitIndex === 9
//                source: "qrc:/menuImages/images/menu/l80.png"
//            }
//            Image {
//                id: l90
//                anchors.centerIn: limit_menu
//                visible: HtCarStatus.limitIndex === 8
//                source: "qrc:/menuImages/images/menu/l90.png"
//            }
//            Image {
//                id: l100
//                anchors.centerIn: limit_menu
//                visible: HtCarStatus.limitIndex === 7
//                source: "qrc:/menuImages/images/menu/l100.png"
//            }
//            Image {
//                id: l110
//                anchors.centerIn: limit_menu
//                visible: HtCarStatus.limitIndex === 6
//                source: "qrc:/menuImages/images/menu/l110.png"
//            }
//            Image {
//                id: l120
//                anchors.centerIn: limit_menu
//                visible: HtCarStatus.limitIndex === 5
//                source: "qrc:/menuImages/images/menu/l120.png"
//            }
//            Image {
//                id: l130
//                anchors.centerIn: limit_menu
//                visible: HtCarStatus.limitIndex === 4
//                source: "qrc:/menuImages/images/menu/l130.png"
//            }
//            Image {
//                id: l140
//                anchors.centerIn: limit_menu
//                visible: HtCarStatus.limitIndex === 3
//                source: "qrc:/menuImages/images/menu/l140.png"
//            }
//            Image {
//                id: l150
//                anchors.centerIn: limit_menu
//                visible: HtCarStatus.limitIndex === 2
//                source: "qrc:/menuImages/images/menu/l150.png"
//            }
//            Image {
//                id: l160
//                anchors.centerIn: limit_menu
//                visible: HtCarStatus.limitIndex === 1
//                source: "qrc:/menuImages/images/menu/l160.png"
//            }
//        }
//    }


    SequentialAnimation{
        id:bgLightAnimation_in
        alwaysRunToEnd: true
        running: HtCarStatus.lightMenu1
        ParallelAnimation{
            ScriptAction{script: secondMenuRoot.wordFlag = false}
            //            ScriptAction{script: menuWord.visible = false}  ReferenceError: menuWord is not defined
            NumberAnimation{target: line1 ; property: "x" ; to: 160 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: line2 ; property: "x" ; to: 700 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: angle1 ; property: "value" ; to: 60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle2 ; property: "value" ; to: 60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle3 ; property: "value" ; to: -60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle4 ; property: "value" ; to: -60 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: bgLightSet ; property: "scale" ; to: 1.0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: secondMenuRoot ; property: "currentScale" ; to: 0.0 ; duration: 300 ; easing.type:Easing.Linear}
        }
    }

    SequentialAnimation{
        id:bgLightAnimation_out
        alwaysRunToEnd: true
        //        running: !HtCarStatus.menu0&&HtCarStatus.menu1 && !HtCarStatus.menu2 //或则直接用一个标志变量来控制
        running: HtCarStatus.lightCloseFlag
        ParallelAnimation{
            ScriptAction{script: secondMenuRoot.wordFlag = true}
            //            ScriptAction{script: menuWord.visible = false}  ReferenceError: menuWord is not defined
            NumberAnimation{target: line1 ; property: "x" ; to: 410 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: line2 ; property: "x" ; to: 410 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: angle1 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle2 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle3 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle4 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: bgLightSet ; property: "scale" ; to: 0.0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: secondMenuRoot ; property: "currentScale" ; to: 1.0 ; duration: 300 ; easing.type:Easing.Linear}
        }
    }

    SequentialAnimation{
        id:time1SetAnimation_in
        alwaysRunToEnd: true
        running: HtCarStatus.timeSetMenu1
        ParallelAnimation{
            ScriptAction{script: secondMenuRoot.wordFlag = false}
            //            ScriptAction{script: menuWord.visible = false}  ReferenceError: menuWord is not defined
            NumberAnimation{target: line1 ; property: "x" ; to: 160 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: line2 ; property: "x" ; to: 700 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: angle1 ; property: "value" ; to: 60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle2 ; property: "value" ; to: 60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle3 ; property: "value" ; to: -60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle4 ; property: "value" ; to: -60 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: timeSetbg ; property: "scale" ; to: 1.0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: secondMenuRoot ; property: "currentScale" ; to: 0.0 ; duration: 300 ; easing.type:Easing.Linear}
        }
    }
    SequentialAnimation{
        id:time1SetAnimation_out
        alwaysRunToEnd: true
        //        running: !HtCarStatus.menu0&&HtCarStatus.menu1 && !HtCarStatus.menu2 //或则直接用一个标志变量来控制
        running: HtCarStatus.timeSetCloseFlag
        ParallelAnimation{
            ScriptAction{script: secondMenuRoot.wordFlag = true}
            //            ScriptAction{script: menuWord.visible = false}  ReferenceError: menuWord is not defined
            NumberAnimation{target: line1 ; property: "x" ; to: 410 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: line2 ; property: "x" ; to: 410 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: angle1 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle2 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle3 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle4 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: timeSetbg ; property: "scale" ; to: 0.0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: secondMenuRoot ; property: "currentScale" ; to: 1.0 ; duration: 300 ; easing.type:Easing.Linear}
        }
    }

    SequentialAnimation{
        id:limitspeedAnimation_in
        alwaysRunToEnd: true
        running: HtCarStatus.limitMenu1
        ParallelAnimation{
            ScriptAction{script: secondMenuRoot.wordFlag = false}
            //            ScriptAction{script: menuWord.visible = false}  ReferenceError: menuWord is not defined
            NumberAnimation{target: line1 ; property: "x" ; to: 160 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: line2 ; property: "x" ; to: 700 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: angle1 ; property: "value" ; to: 60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle2 ; property: "value" ; to: 60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle3 ; property: "value" ; to: -60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle4 ; property: "value" ; to: -60 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: limitspeed_set ; property: "scale" ; to: 1.0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: secondMenuRoot ; property: "currentScale" ; to: 0.0 ; duration: 300 ; easing.type:Easing.Linear}
        }
    }

    SequentialAnimation{
        id:limitspeedAnimation_out
        alwaysRunToEnd: true
        running: HtCarStatus.limitMenuCloseFlag
        ParallelAnimation{
            ScriptAction{script: secondMenuRoot.wordFlag = true}
            //            ScriptAction{script: menuWord.visible = false}  ReferenceError: menuWord is not defined
            NumberAnimation{target: line1 ; property: "x" ; to: 410 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: line2 ; property: "x" ; to: 410 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: angle1 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle2 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle3 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle4 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: limitspeed_set ; property: "scale" ; to: 0.0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: secondMenuRoot ; property: "currentScale" ; to: 1.0 ; duration: 300 ; easing.type:Easing.Linear}
        }
    }

    SequentialAnimation{
        id:maintanceAnimation_in
        alwaysRunToEnd: true
        running: HtCarStatus.maintanceMenu1
        ParallelAnimation{
            ScriptAction{script: secondMenuRoot.wordFlag = false}
            //            ScriptAction{script: menuWord.visible = false}  ReferenceError: menuWord is not defined
            NumberAnimation{target: line1 ; property: "x" ; to: 160 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: line2 ; property: "x" ; to: 700; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: angle1 ; property: "value" ; to: 60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle2 ; property: "value" ; to: 60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle3 ; property: "value" ; to: -60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle4 ; property: "value" ; to: -60 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: baoyang ; property: "scale" ; to: 1.0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: secondMenuRoot ; property: "currentScale" ; to: 0.0 ; duration: 300 ; easing.type:Easing.Linear}
        }
    }

    SequentialAnimation{
        id:maintanceAnimation_out
        alwaysRunToEnd: true
        running: HtCarStatus.maintanceCloseFlag
        ParallelAnimation{
            ScriptAction{script: secondMenuRoot.wordFlag = true}
            //            ScriptAction{script: menuWord.visible = false}  ReferenceError: menuWord is not defined
            NumberAnimation{target: line1 ; property: "x" ; to: 410 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: line2 ; property: "x" ; to: 410 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: angle1 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle2 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle3 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle4 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: baoyang ; property: "scale" ; to: 0.0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: secondMenuRoot ; property: "currentScale" ; to: 1.0 ; duration: 300 ; easing.type:Easing.Linear}
        }
    }

    SequentialAnimation{
        id:naviAnimation_in
        alwaysRunToEnd: true
        running: HtCarStatus.naviSetmenu1
        ParallelAnimation{
            ScriptAction{script: secondMenuRoot.wordFlag = false}
            //            ScriptAction{script: menuWord.visible = false}  ReferenceError: menuWord is not defined
            NumberAnimation{target: line1 ; property: "x" ; to: 160 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: line2 ; property: "x" ; to: 700 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: angle1 ; property: "value" ; to: 60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle2 ; property: "value" ; to: 60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle3 ; property: "value" ; to: -60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle4 ; property: "value" ; to: -60 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: navigation_box ; property: "scale" ; to: 1.0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: secondMenuRoot ; property: "currentScale" ; to: 0.0 ; duration: 300 ; easing.type:Easing.Linear}
        }
    }

    SequentialAnimation{
        id:naviAnimation_out
        alwaysRunToEnd: true
        running: HtCarStatus.naviSetCloseFlag
        ParallelAnimation{
            ScriptAction{script: secondMenuRoot.wordFlag = true}
            //            ScriptAction{script: menuWord.visible = false}  ReferenceError: menuWord is not defined
            NumberAnimation{target: line1 ; property: "x" ; to: 410 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: line2 ; property: "x" ; to: 410 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: angle1 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle2 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle3 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle4 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: navigation_box ; property: "scale" ; to: 0.0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: secondMenuRoot ; property: "currentScale" ; to: 1.0 ; duration: 300 ; easing.type:Easing.Linear}
        }
    }

    SequentialAnimation{
        id:carInfoAnimation_in
        alwaysRunToEnd: true
        running: HtCarStatus.carInfoMenu1
        ParallelAnimation{
            ScriptAction{script: secondMenuRoot.wordFlag = false}
            //            ScriptAction{script: menuWord.visible = false}  ReferenceError: menuWord is not defined
            NumberAnimation{target: line1 ; property: "x" ; to: 160 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: line2 ; property: "x" ; to: 700 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: angle1 ; property: "value" ; to: 60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle2 ; property: "value" ; to: 60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle3 ; property: "value" ; to: -60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle4 ; property: "value" ; to: -60 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: traffic_info ; property: "scale" ; to: 1.0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: secondMenuRoot ; property: "currentScale" ; to: 0.0 ; duration: 300 ; easing.type:Easing.Linear}
        }
    }

    SequentialAnimation{
        id:carInfoAnimation_out
        alwaysRunToEnd: true
        running: HtCarStatus.carInfoCloseFlag
        ParallelAnimation{
            ScriptAction{script: secondMenuRoot.wordFlag = true}
            //            ScriptAction{script: menuWord.visible = false}  ReferenceError: menuWord is not defined
            NumberAnimation{target: line1 ; property: "x" ; to: 410 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: line2 ; property: "x" ; to: 410 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: angle1 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle2 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle3 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle4 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: traffic_info ; property: "scale" ; to: 0.0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: secondMenuRoot ; property: "currentScale" ; to: 1.0 ; duration: 300 ; easing.type:Easing.Linear}
        }
    }

    SequentialAnimation{
        id:themeAnimation_in
        alwaysRunToEnd: true
        running: HtCarStatus.themeMenu1
        ParallelAnimation{
            ScriptAction{script: secondMenuRoot.wordFlag = false}
            //            ScriptAction{script: menuWord.visible = false}  ReferenceError: menuWord is not defined
            NumberAnimation{target: line1 ; property: "x" ; to: 160 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: line2 ; property: "x" ; to: 720 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: angle1 ; property: "value" ; to: 60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle2 ; property: "value" ; to: 60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle3 ; property: "value" ; to: -60 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle4 ; property: "value" ; to: -60 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: theme ; property: "scale" ; to: 0.3 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: secondMenuRoot ; property: "currentScale" ; to: 0.0 ; duration: 300 ; easing.type:Easing.Linear}
        }
    }

    SequentialAnimation{
        id:themeAnimation_out
        alwaysRunToEnd: true
        running: HtCarStatus.themeCloseFlag
        ParallelAnimation{
            ScriptAction{script: secondMenuRoot.wordFlag = true}
            //            ScriptAction{script: menuWord.visible = false}  ReferenceError: menuWord is not defined
            NumberAnimation{target: line1 ; property: "x" ; to: 410 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: line2 ; property: "x" ; to: 410 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: angle1 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle2 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle3 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: angle4 ; property: "value" ; to: 0 ; duration: 300 ; easing.type:Easing.Linear}

            NumberAnimation{target: theme ; property: "scale" ; to: 0.0 ; duration: 300 ; easing.type:Easing.Linear}
            NumberAnimation{target: secondMenuRoot ; property: "currentScale" ; to: 1.0 ; duration: 300 ; easing.type:Easing.Linear}
        }
    }

    SequentialAnimation{
        id:menu0Tomenu1
        running: true
        PauseAnimation {duration: 100 }
        ParallelAnimation{
            NumberAnimation {target: secondMenuRoot;property: "opacity"; to :1.0;duration: 300;easing.type: Easing.InOutQuad }
            NumberAnimation {target: scaleid;property: "xScale"; to:1.0;duration: 200;easing.type: Easing.InOutQuad}
        }
    }
    Component.onCompleted:{menu0Tomenu1.running = true}
}