Animate injection to column so that injected item pushes the rest down (a'la iOS phone number types in Contacts app)

artem.marchenko

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?

artem.marchenko

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.

p3c0

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.

artem.marchenko

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!

p3c0

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.