Upgrade to Pro — share decks privately, control downloads, hide ads and more …

跨界的優雅 / Crossing Platform with Elegance

Poren Chiang
November 01, 2015

跨界的優雅 / Crossing Platform with Elegance

「多平台的 QML 應用程式架構設計」
2015/11/1 @ MOPCON 2015, International Convention Center Kaohsiung (ICCK), Kaohsiung, Taiwan.

Poren Chiang

November 01, 2015
Tweet

More Decks by Poren Chiang

Other Decks in Technology

Transcript

  1. 騗歲涸⮛꧉
    㢵䎂〵涸2.-䥰欽玑䒭卺圓鏤鎙
    34$IJBOH!.01$0/ $$#:4"58

    View full-size slide

  2. 34$IJBOH
    荩㣐岁䖒禺♲䎃秹
    㷸欰鎙皿堥䎃剚ⶰ〮
    荩㣐Ꟛ彂爢涮饱➃껷㾂爢Ꟁ
    IUUQQPSFOUX

    View full-size slide

  3. 鸏㜥怵闍㼟剚䱳鎣
    ˙ 騗䎂〵涸植剤倰呪⿻Ⱖ㔮㞯
    ˙ 2.-僽➊랃⟃⿻捀➊랃銴⢪欽㸐
    ˙ 㥶⡦⢪欽2.-鿈縭㢵䎂〵涸䥰欽玑䒭 "QQ

    ˙ 㢵䎂〵玑䒭鏤鎙䌢鋅涸㉏겗莅㻜⡲倰岁

    View full-size slide

  4. 騗䎂〵ˋ
    8SJUFPODF SVOFWFSZXIFSF

    View full-size slide

  5. ⾲欰
    鸒欽
    笪갤䥰欽玑䒭
    5JUBOJVN.PCJMF
    $PSEPWB 3FBDU/BUJWF
    9BNBSJO
    +BWB

    View full-size slide

  6. QML
    Qt Meta Language / Qt Modeling Language
    1IPUPGSPN2UPDJBMTJUF

    View full-size slide

  7. 2UGSBNFXPSL
    8JOEPXT"1* "OESPJE/%, J044%,
    䎂〵
    /FUXPSLJOH % 2U2VJDL 8FC,JU
    ⢿㥶
    ⢿㥶
    䬄韍
    䥰欽玑䒭

    View full-size slide

  8. 䎙⦐⢪欽2.-涸㥪贖
    ˙ 腋㣁㸤䱾ⵖ䥰欽玑䒭涸遤捀邍植
    ˙ ⾲欰⟃⿻炽넓⸈鸠滑곃涸鸠䏞
    ˙ 鞮㺢涸"1*⟃⿻仍⯏䚍 FYUFOTJCJMJUZ

    ˙ 玑䒭焺〳伟䚍 TPVSDFQPSUBCMF

    View full-size slide

  9. import QtQuick 2.0
    Rectangle {
    color: '#33b5e5'
    }

    View full-size slide

  10. import QtQuick 2.0
    Rectangle {
    color: '#33b5e5'
    radius: 120
    Text {
    anchors.centerIn: parent
    font.pixelSize: 24
    text: "Hello, world!"
    }
    }

    View full-size slide

  11. text: {
    var date = new Date()
    return ("" +
    d.getHours() +
    " 讫")
    }

    View full-size slide

  12. import QtQuick 2.0
    import QtQuick.Window 2.0
    import QtGraphicalEffects 1.0
    !
    Window {
    id: root
    color: "#689881"
    width: 800
    height: 600
    visible: true
    AnimatedImage {
    id: wheel
    width: radius * 2
    height: radius * 2
    source: "slippy.gif"
    fillMode: Image.PreserveAspectCrop
    visible: false
    !
    property int radius: 96
    }
    Rectangle {
    id: mask
    width: wheel.width
    height: wheel.height
    radius: wheel.radius
    color: "#000"
    visible: false
    }
    Rectangle {
    id: clock
    color: "orange"
    width: (parent.width >= parent.height) ?
    parent.height : parent.width
    height: width
    radius: width / 2
    anchors.centerIn: parent
    opacity: 1
    property int hour: 9
    property int minute: 41
    property int second: 0
    OpacityMask {
    id: secondCircle
    width: wheel.width
    height: wheel.height
    !
    source: wheel
    maskSource: mask
    visible: (x != 0 || y != 0)
    x: clock.radius + (clock.radius -
    wheel.radius) * Math.cos((6.0 * clock.second - 90.0)
    / 360.0 * 2 * Math.PI) - wheel.radius
    y: clock.radius + (clock.radius -
    wheel.radius) * Math.sin((6.0 * clock.second - 90.0)
    / 360.0 * 2 * Math.PI) - wheel.radius
    z: 1
    Behavior on x {
    NumberAnimation {
    easing.type: Easing.OutBack
    duration: 200
    }
    }
    Behavior on y {
    NumberAnimation {
    easing.type: Easing.OutBack
    duration: 200
    }
    }
    }
    }
    Text {
    id: label
    anchors.centerIn: clock
    text: (clock.hour > 12 ? clock.hour - 12 :
    clock.hour) + ":" + (clock.minute < 10 ? "0" +
    clock.minute : clock.minute)
    font.family: "Roboto"
    font.pointSize: 84
    font.weight: Font.Bold
    color: "#fff"
    }
    !
    Text {
    id: creditLabel
    anchors {
    top: label.bottom
    horizontalCenter: label.horizontalCenter
    }
    text: "岄傀य़䋊樄რᐒ"
    font.family: "Source Han Sans TC"
    font.pointSize: 24
    color: "#fff"
    }
    !
    NumberAnimation {
    id: minuteAnimation
    target: label
    property: "opacity"
    from: 0.7; to: 1
    duration: 1000
    easing.type: Easing.OutExpo
    }
    Timer {
    id: timer
    interval: 1000
    running: true
    repeat: true
    onTriggered: {
    var date = new Date()
    clock.hour = date.getHours()
    clock.minute = date.getMinutes()
    clock.second = date.getSeconds()
    !
    if (clock.second == 0)
    minuteAnimation.start()
    }
    }
    // (C) NTUOSC 2014. Released under MIT License.
    }

    View full-size slide

  13. HJUIVCDPNSTDIJBOHOUVPTDRNMJOUSPDMPDL

    View full-size slide

  14. 矦㋲涸玑䒭

    2.-㽠〳⟃䵆㹁✫

    View full-size slide

  15. 醳꧹♧럊涸梖岁
    ˙ 2.-㛇劥♳僽0QFO(-㜥兞
    ˙ 醳꧹⯋⟝〳⟃欽Ⰹ䒊涸2U2VJDL$POUSPMT
    ˙ 亼⡂8$4QFD涸"1*〳⟃䒸Ⰵ♶㼱+4MJC
    ˙ 殹搭銴荈䊹ⵠ⛳僽〳⟃
    4*5$0/'SJFOETTUJDLFST
    $$#:/$34$IJBOH$+0,&3㣐⸔

    View full-size slide

  16. 眕⢿
    5ISFFKT–2.-

    View full-size slide

  17. 㢵䎂〵佅䴂
    ˙ 4ZNCJBO
    ˙ .FF(P)BSNBUUBO
    ˙ #MBDL#FSSZ
    !
    ˙ 4BJMGJTI04
    ˙ 6CVOUV5PVDI
    ˙ 8JOEPXT
    ˙ 049
    ˙ -JOVY9
    ˙ "OESPJE "3.WW Y

    ˙ J04
    }
    }
    2U2VJDL
    2U2VJDL

    View full-size slide

  18. 矦㋲♲姿끐
    ˙ 酤湡垦䎂〵涸4%,
    ˙ 管䧭湡垦䎂〵涸玑䒭
    ˙ 駵㖈湡垦䎂〵♳

    View full-size slide

  19. 眕⢿
    .BUFSJBM2.-MJCSBSZ!.01$0/

    View full-size slide

  20. ꣳⵖ
    ˙ 剤❉䎂〵涸4%,㼩橇㞯剤暶婌꨾宠
    ˙ 2U尝剤巒覈涸"1*꨾銴鷴麕⾲欰⺫酤
    ˙ 暶ⴽ岤䠑J04"QQ4UPSF鸤䧭涸-(1-㉏겗

    View full-size slide

  21. 5IBOLT
    㢵䎂〵涸2.-䥰欽玑䒭卺圓鏤鎙
    34$IJBOH!.01$0/ $$#:4"58

    View full-size slide