| 2015-11-20 11:12:59 |
Femma |
description |
PullToRefreshStyle has two text options: "Pull to refresh" and "Release to refresh". It tries to animate between them, using an opacity fade in/out. But unfortunately, the text itself changes immediately before the fade out. So it looks very unsightly.
Maybe some code like the following, that I've used as a workaround in unity8. Note the PropertyAction between the two NumberAnimations.
states: [
State {
name: "pulling"
when: styledItem.target.dragging && !releaseToRefresh
PropertyChanges { target: pullLabel; text: i18n.tr("Pull to refresh…") }
},
State {
name: "releasable"
when: styledItem.target.dragging && releaseToRefresh
PropertyChanges { target: pullLabel; text: i18n.tr("Release to refresh…") }
}
]
transitions: Transition {
SequentialAnimation {
UbuntuNumberAnimation {
target: pullLabel
property: "opacity"
to: 0.0
}
PropertyAction {
target: pullLabel
property: "text"
}
UbuntuNumberAnimation {
target: pullLabel
property: "opacity"
to: 1.0
}
}
} |
PullToRefreshStyle has two text options: "Pull to refresh" and "Release to refresh". It tries to animate between them, using an opacity fade in/out. But unfortunately, the text itself changes immediately before the fade out. So it looks very unsightly.
Maybe some code like the following, that I've used as a workaround in unity8. Note the PropertyAction between the two NumberAnimations.
states: [
State {
name: "pulling"
when: styledItem.target.dragging && !releaseToRefresh
PropertyChanges { target: pullLabel; text: i18n.tr("Pull to refresh…") }
},
State {
name: "releasable"
when: styledItem.target.dragging && releaseToRefresh
PropertyChanges { target: pullLabel; text: i18n.tr("Release to refresh…") }
}
]
transitions: Transition {
SequentialAnimation {
UbuntuNumberAnimation {
target: pullLabel
property: "opacity"
to: 0.0
}
PropertyAction {
target: pullLabel
property: "text"
}
UbuntuNumberAnimation {
target: pullLabel
property: "opacity"
to: 1.0
}
}
}
UX Solution:
We should get rid of the text 'pull to refresh and release to refresh'. Mobile users should now be accustomed to the affordance of pulling and releasing to refresh. Instead we should use an indeterminate indicator to provide feedback to the user when they have pulled to refresh (such as the one in the UITK spec: https://docs.google.com/document/edit?hgd=1&id=1nFm8xiYhKXXuEO_IvMXoD0lASbYzYXva1BWMVanU3iw#heading=h.37zlmvphdoig)
This functionality will be added to the UITK document for the pull to refresh component. |
|
