QML基础语法六

图形动画

    主要包含颜色、渐变、调色板，如何给Item上色

    集中图片的显示方式

    Item变换，包含缩放、旋转、平移

    状态和动画，让Item动起来

    Flickable弹动、Flipable翻转

    动画的基类 Animation

    1. 颜色

        color，一个ARGB格式颜色值，主要通过SVG颜色名称、十六进制、Qt.rgba()表示

        SVG颜色名称

            主要就是red、lime、blue、black、white、yellow、cyan、magenta、green、pink、gray、gold等

        十六进制

            主要类似#RRGGBB或者#AARRGGBB

        Qt颜色函数

            Qt.rgba(r,g,b,alpha)

            Qt.hsla(h,s,l,alpha)

            Qt.darker(color,factor)

            Qt.lighter(color,factor)

            Qt.tint(color,tintColor)

    2. 渐变

        使用一组GradientStop指定颜色，指定位置、颜色取值范围[0,1]

        Rectangle{
            gradient:Gradient{
                GradientStop{position:0.0;color:"red"}
                GradientStop{position:0.5;color:"blue"}
                GradientStop{position:1.0;color:"green"}
            }
        }

    3. 系统调色板SystemPalette

包含系统标准颜色值对象，通过SystemPalette访问调色板

3个颜色组：Active、Inactive、Disabled

    4.图片Image

 Image用来显示图片，路径由source指定，格式为Qt支持的任何格式，PNG、JPEG、SVG等

本地图片加载完成前会阻塞UI

本地大图片加载需要设置asynchronous为true，将加载放在一个低优先级线程

网络图片为自动异步加载

progress、status可以获得实时进度

status取值

            Image.Ready Image.Loading Image.Null Image.Error

利用sourceSize.width sourceSize.height设置图片在内存中的大小设置    

        Image{
            id:image
            fillMode:Image.Tile
            source:"http://www.baidu.com/img/a.gif"
            sourceSize.width:100;sourceSize.height:100;
            onStatusChanged:{
                if(image.status == Image.Ready)
                    console.log('Loaded')
                else if(image.status == Image.Loading)
                    console.log('Loading')
            }
        }

    5. 边界图片BorderImage

利用图片创建边框，将源图片分成9个区域，图片缩放时，将各个区域进行缩放或平铺

四个角(1、3、7、9)不进行缩放

区域2、8通过horizontalTileMode模式缩放

区域4、6通过verticalTileMode模式缩放

区域5结合horizontalTileMode、verticalTileMode设置的模式缩放

        BorderImage{

            border{left:30;top:30;right:30;bottom:30;}
            horizontalTileMode:BorderImage.Strecth          水平拉伸
            verticalTileMode:BorderImage.Strecth            垂直拉伸

            //horizontalTileMode:BorderImage.Repeat          水平平铺
            //verticalTileMode:BorderImage.Repeat            垂直平铺
            source:"a.png"

        }

    6.动态图片AnimatedImage

        扩展了Image，可以播放帧图片，gif，当前帧currentFrame、总长度frameCount

        playing、paused来控制开始、暂停、停止   

     Rectangle{

            property int frames
            width:animation.width
            height:animation.height+8
            AnimatedImage{
                id:animation
                source:"a.gif"
            }
            Component.onCompleted:{
                frames = animation.frameCount
            }

            Rectangle{
                width
                height
                x:(animation.width-width)*animation.currentFrame/frames
                y:animation.height
            }

        }

    7.缩放、旋转、平移变换

Item拥有一个scale、rotation属性，可以实现缩放、旋转

scale < 1.0 缩小，scale >1.0 放大、默认值是1.0 ，负值会显示镜像效果

缩放效果是按照  transformOrigin指定的点为原点，总共可指定九个点

TopLeft	Top	TopRight
Left	Center	Right
BottomLeft	Bottom	BottomRight

 

        例子：

Rectangle{
    scale:1.6
    tansformOrigin:"TopLeft"
}

 

rotation属性指定顺时针旋转的度数，默认为0，正数为顺时针旋转、负数为逆时针旋转

Rectangle{
    scale:1.6
    rotation:30
}

    8.Transform高级变换

Transform是抽象类无法实例化，需要制定一个列表

常用类型Rotation、Scale、Translate，旋转缩放平移

Rotation：提供坐标轴axis.x  axis.y  axis.z、代表XYZ轴，实现3D；

        8.1 原点属性：origin.x  origin.y

        2D旋转不需要指定坐标轴、3D旋转需要指定原点、坐标轴

        angle属性：指定旋转的度数

        例子：

Item{
    mage{
         source:"xxx.img"
         transform:Rotation{
             origin.x:30;origin.y:30;
             axis{x:0;y:1;z:0}
             angle:72
         }
    }
}

        8.2 Scale

 提供了origin.x  origin.y设置原点

 xScale  yScale 设置在X轴、Y轴方向的缩放比例

Image{
    source:"xxx.png"
    transform:Scale{
         origin.x:25;origin.y:25;xScale:2        //在X轴方向上放大两倍
    }
    transform:Translate{
        x:25;y:25               //在x、y轴的偏移量
    }
}