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. import QtQuick 2.0 Rectangle { color: '#33b5e5' radius: 120 Text

    { anchors.centerIn: parent font.pixelSize: 24 text: "Hello, world!" } }
  2. text: { var date = new Date() return ("<b>" +

    d.getHours() + "</b> 讫") }
  3. 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. }
  4. 㢵䎂〵佅䴂 ˙ 4ZNCJBO ˙ .FF(P)BSNBUUBO ˙ #MBDL#FSSZ ! ˙ 4BJMGJTI04

    ˙ 6CVOUV5PVDI ˙ 8JOEPXT ˙ 049 ˙ -JOVY9 ˙ "OESPJE "3.WW Y  ˙ J04 } } 2U2VJDL 2U2VJDL