Animate injection to column so that injected item pushes the rest down (a'la iOS phone number types in Contacts app)
-
Hi all
I am trying to clone iOS7 Contacts app (mostly for studying how well QML is fit for quick prototyping iOS apps) - https://github.com/amarchen/CuteContacts-iOS
Right now I am trying to replicate the animation when you add (or remove) a new phone line as you can see on this YouTube video http://youtu.be/huneI2u76Ik?t=1m28s from about 1:28
In the current design, list of phones is a Column and "add phone" button is a separate element under the Column.
So when element is being added to Column, I want it to appear from behind of one on top and push the column down step by step and.. I can't figure how to do it.Default add transition functions as:
- Column is expanded instantly, no delay, place for a new item is allocated instantly
- Element flies from the very top to it's place (how exactly it flies you can control by animating x.y properties)
I want instead to:
- Fly from the element on top of where new one is to be added
1.1. Fly from behind of the one on top - Column height is to be expanded bit by bit together with the element being added
Can't quite figure how to do it. Please, help
P.S.
I believe I am able to implement it fully manually: forget Column completely and just manually control a bunch of elements being added/removed, but that's quite labor intensive and probably error-prone. There should a way to go with positioners, shouldn't it?
-
BTW, If you want to have a look at the code, you can find it https://github.com/amarchen/CuteContacts-iOS
Current addition animation experiments are in branch phone-editor and you don't have to have anything iOS to play with it. It should work on Desktop just fine (just with a couple of wrong window scrollbars).
In fact it is one of the project goals, to validate the possibility for super-fast iOS prototyping using QML on desktop.
-
Hi,
Is it possible for you to use a ListView instead of Column ? Since it has "displaced":http://qt-project.org/doc/qt-5/qml-qtquick-listview.html#displaced-prop property which moves the item's below when new item is inserted in between.
Check "viewtransition":http://qt-project.org/doc/qt-5/qml-qtquick-viewtransition.html for more info.
-
Column is not the requirement certainly. I used it just because I didn't need extra scrolling area services from ListView. Will try ListView, thanks!
-
bq. I used it just because I didn’t need extra scrolling area services from ListView
Well you can disable scroll using "interactive":http://qt-project.org/doc/qt-5/qml-qtquick-flickable.html#interactive-prop property.
