forks/go-ethereum
1
0
Fork 1
mirror of https://github.com/ethereum/go-ethereum.git synced 2026-07-22 12:46:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Animation and presale step 01

Browse source
This commit is contained in:
Alexandre Van de Sande 2015-03-26 12:07:46 -03:00
parent ff4631a016
commit f207a7541c
8 changed files with 346 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

430
cmd/mist/assets/qml/Wizard.qml
View file

@ -10,18 +10,12 @@ Rectangle {
state: "State-Initial" state: "State-Initial"
Timer { Timer {
id: startTimerAnimation
interval: 1000 interval: 1000
running: true running: true
onTriggered: wizardWindow.state = "State-0" onTriggered: wizardWindow.state = "State-0"
} }
Image {
anchors.centerIn: parent
source: "../wizard/illustration-wizard.png"
height: 680
width: 993
}
Rectangle { Rectangle {
id: skyGradient id: skyGradient
anchors.left: parent.left anchors.left: parent.left
@ -36,6 +30,7 @@ Rectangle {
} }
Rectangle { Rectangle {
id: oceanGradient
anchors.left: parent.left anchors.left: parent.left
anchors.top: skyGradient.bottom anchors.top: skyGradient.bottom
anchors.right: parent.right anchors.right: parent.right
@ -47,6 +42,28 @@ Rectangle {
} }
} }
Image {
id: mistTitle
source: "../wizard/Mist-title.png"
width: 144
height: 56
x: 135
y: 120
}
Rectangle {
height: 124
anchors.bottom: skyGradient.bottom
anchors.left: parent.left
anchors.right: parent.right
gradient: Gradient {
GradientStop { position: 0.0; color: "transparent" }
GradientStop { position: 1.0; color: "#FFFFFF" }
}
}
Image { Image {
id: iceberg id: iceberg
source: "../wizard/iceberg.png" source: "../wizard/iceberg.png"
@ -54,6 +71,7 @@ Rectangle {
height: 376 height: 376
x: 25 x: 25
y: 190 y: 190
visible: false
} }
FastBlur { FastBlur {
@ -62,23 +80,41 @@ Rectangle {
source: iceberg source: iceberg
radius: 32 radius: 32
transparentBorder: true transparentBorder: true
transform: Scale {
origin.x: 172
origin.y: 188
xScale: 0.75
yScale: 0.75
}
} }
Image { Image {
source: "../wizard/Mist-title.png" id: icebergFront
width: 144 source: "../wizard/iceberg-front.png"
height: 56 width: 344
x: 155 height: 376
y: 120 x: 25
y: 190
visible: false
} }
FastBlur {
id: icebergFrontBlur
width: 344
height: 376
x: 25
y: 190
source: icebergFront
radius: 32
transparentBorder: true
visible: true
}
Rectangle {
anchors.left: parent.left
anchors.top: skyGradient.bottom
anchors.right: parent.right
height: oceanGradient.height / 10
gradient: Gradient {
GradientStop { position: 0.0; color: "#385399" }
GradientStop { position: 1.0; color: "transparent" }
}
}
states: [ states: [
State { State {
@ -86,12 +122,34 @@ Rectangle {
PropertyChanges { PropertyChanges {
target: iceberg target: iceberg
opacity: 0.0 opacity: 0.0
width: 1854
height: 2256
x: -147
y: -260
} }
PropertyChanges { PropertyChanges {
target: icebergBlur target: icebergBlur
opacity: 0.1 opacity: 1.0
radius: 64 radius: 64
//transform: Scale { xScale: 1; yScale: 1; } }
PropertyChanges {
target: icebergFrontBlur
opacity: 1.0
radius: 64
width: 2472
height: 3008
x: -256
y: -440
}
PropertyChanges {
target: mistTitle
y: 280
opacity: 0.1
}
PropertyChanges {
target: step0
opacity: 0.0
x: 600
} }
}, },
@ -100,17 +158,78 @@ Rectangle {
PropertyChanges { PropertyChanges {
target: iceberg target: iceberg
opacity: 0.0 opacity: 0.0
width: 344
height: 376
x: 25
y: 190
}
PropertyChanges {
target: icebergFrontBlur
opacity: 1.0
radius: 0
width: 344
height: 376
x: 25
y: 190
} }
PropertyChanges { PropertyChanges {
target: icebergBlur target: icebergBlur
opacity: 1.0 opacity: 1.0
radius: 0 radius: 0
// transform: Scale { }
// origin.x: 150; PropertyChanges {
// origin.y: 150; target: mistTitle
// xScale: 1 y: 120
// yScale: 1 opacity: 1.0
// } }
PropertyChanges {
target: step0
opacity: 1.0
x: 500
}
},
State {
name: "State-Presale-01"
PropertyChanges {
target: iceberg
opacity: 0.0
width: 344
height: 376
x: 25
y: 510
}
PropertyChanges {
target: icebergFrontBlur
opacity: 1.0
radius: 0
width: 344
height: 376
x: 25
y: 510
}
PropertyChanges {
target: icebergBlur
opacity: 1.0
radius: 0
}
PropertyChanges {
target: mistTitle
y: 610
opacity: 0.2
}
PropertyChanges {
target: step0
opacity: 0.0
x: 500
}
PropertyChanges {
target: skyGradient
height: 600
}
PropertyChanges {
target: stepPresale1
visible: true
opacity: 1
} }
} }
] ]
@ -118,32 +237,86 @@ Rectangle {
transitions: [ transitions: [
Transition { Transition {
from: "State-Initial"; to: "State-0" from: "State-Initial"; to: "State-0"
PropertyAnimation {
target: iceberg SequentialAnimation {
properties: "opacity"
duration: 2000 ParallelAnimation {
} PropertyAnimation {
PropertyAnimation { target: iceberg
target: icebergBlur properties: "opacity, width, height, x, y"
properties: "opacity, radius" duration: 2000
duration: 2000 easing.type: Easing.OutExpo
}
PropertyAnimation {
target: icebergBlur
properties: "opacity, radius"
duration: 2000
easing.type: Easing.OutExpo
}
PropertyAnimation {
target: icebergFrontBlur
properties: "opacity, radius, width, height, x, y"
duration: 2000
easing.type: Easing.OutExpo
}
}
ParallelAnimation {
PropertyAnimation {
target: mistTitle
properties: "opacity, y"
duration: 1000
easing.type: Easing.OutExpo
}
PropertyAnimation {
target: step0
properties: "opacity, x"
duration: 2000
easing.type: Easing.OutElastic
}
}
} }
}, },
Transition { Transition {
from: "State-0"; to: "State-Initial" // from: "State-0"; to: "State-Presale-01"
PropertyAnimation {
target: skyGradient
properties: "height"
duration: 1000
easing.type: Easing.InOutQuart
}
PropertyAnimation {
target: step0
properties: "opacity, x"
duration: 1000
easing.type: Easing.InOutQuart
}
PropertyAnimation { PropertyAnimation {
target: iceberg target: iceberg
properties: "opacity"; properties: "x, y"
duration: 1000
}
PropertyAnimation {
target: icebergBlur
properties: "opacity, radius"
duration: 1000 duration: 1000
easing.type: Easing.InOutQuart
} }
PropertyAnimation {
target: icebergFrontBlur
properties: "x, y"
duration: 1000
easing.type: Easing.InOutQuart
}
PropertyAnimation {
target: mistTitle
properties: "opacity, y"
duration: 1500
easing.type: Easing.InOutQuart
}
} }
] ]
//
// STEPS
//
Rectangle { Rectangle {
id: step0 id: step0
@ -153,6 +326,7 @@ Rectangle {
height: 670 height: 670
color: "transparent" color: "transparent"
Text { Text {
text: "Mist is a Navigator for Ethereum, a decentralized" text: "Mist is a Navigator for Ethereum, a decentralized"
font.family: sourceSansPro.name font.family: sourceSansPro.name
@ -214,7 +388,7 @@ Rectangle {
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
onClicked: { onClicked: {
wizardWindow.state = "State-Initial" //wizardWindow.state = "State-1"
} }
} }
} }
@ -247,7 +421,7 @@ Rectangle {
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
onClicked: { onClicked: {
wizardWindow.state = "State-0" wizardWindow.state = "State-Presale-01"
} }
} }
} }
@ -337,48 +511,124 @@ Rectangle {
} }
Rectangle {
id: stepPresale1
anchors.fill: parent
color: "transparent"
opacity: 0
visible: false
Behavior on opacity { PropertyAnimation { duration: 2000 } }
Rectangle {
// Content
x: 350
y: 0
color: "transparent"
Text {
text: "Import your Presale Wallet"
font.family: sourceSansPro.name
font.weight: Font.Light
font.pixelSize: 30
color: "#57637B"
x: 0
y: 90
}
Text {
text: "When you bought ether, you were given a wallet file with a name similar to 
wallet-SOMEADDRESS.json.
Find it and drag it to this box."
font.family: sourceSansPro.name
font.weight: Font.Light
font.pixelSize: 18
wrapMode: Text.WordWrap
width: 320
color: "#57637B"
x: 260
y: 200
}
Rectangle {
width: 220
height: 150
color: "#FFFFFF"
border.width: 4
border.color: "#E1D9D9"
radius: 4
y: 200
Rectangle {
id: dropIcon
anchors {
top: parent.top
left: parent.left
right: parent.right
}
height: 100
color: "transparent"
Image {
anchors.centerIn: parent
source: "../wizard/drop-icon.png"
}
}
Text {
anchors {
top: dropIcon.bottom
left: parent.left
right: parent.right
bottom: parent.bottom
}
text: "DROP OR OPEN YOUR WALLET.JSON HERE"
font.family: sourceSansPro.name
font.weight: Font.Bold
font.pixelSize: 14
font.italic: true
wrapMode: Text.WordWrap
color: "#4A90E2"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignTop
}
}
}
Rectangle {
//bottom buttons
anchors.left: parent.left
anchors.bottom: parent.bottom
anchors.right: parent.right
height: 80
color: "transparent"
MouseArea {
anchors.verticalCenter: parent.verticalCenter
x: 60
height: 60
width: 120
Text {
text: "BACK"
font.family: sourceSansPro.name
font.weight: Font.Light
font.pixelSize: 24
color: "#FFFFFF"
anchors.fill: parent
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
onClicked: {
wizardWindow.state = "State-0";
console.log( "state-0 bak")
}
}
}
}
} }
// Rectangle {
// anchors.fill: parent
// color: "blue"
// Image {
// anchors.centerIn: parent
// source: "../wizard/illustration-wizard.png"
// height: 680
// width: 993
// }
// Rectangle {
// x: 520
// y: 0
// width: 475
// height: 670
// ColumnLayout{
// anchors.fill: parent
// Rectangle {
// color: "red"
// Layout.preferredHeight: 280
// Layout.fillWidth : true
// }
// Rectangle {
// color: "green"
// Layout.preferredHeight: 70
// Layout.fillWidth : true
// }
// Rectangle {
// color: "blue"
// Layout.preferredHeight: 40
// Layout.fillWidth : true
// Layout.fillHeight: true
// }
// }
// }
// }

3
cmd/mist/assets/qml/main.qml
View file

@ -186,6 +186,9 @@ ApplicationWindow {
shortcut: "Ctrl+shift+i" shortcut: "Ctrl+shift+i"
onTriggered: { onTriggered: {
onboardingWizard.visible = true; onboardingWizard.visible = true;
wizardWindow.state = "State-Initial";
startTimerAnimation.running = true;
startTimerAnimation.start();
} }
} }

BIN
cmd/mist/assets/wizard/drop-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 913 B

BIN
cmd/mist/assets/wizard/drop-icon@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
cmd/mist/assets/wizard/iceberg-front.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
cmd/mist/assets/wizard/iceberg-front@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 105 KiB

BIN
cmd/mist/assets/wizard/iceberg.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 54 KiB

BIN
cmd/mist/assets/wizard/iceberg@2x.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 208 KiB

After

Width:  |  Height:  |  Size: 151 KiB