Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Animate injection to column so that injected item pushes the rest down (a'la iOS phone number types in Contacts app)
Forum Updated to NodeBB v4.3 + New Features

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

Scheduled Pinned Locked Moved QML and Qt Quick
5 Posts 2 Posters 1.4k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    artem.marchenko
    wrote on last edited by
    #1

    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:

    1. Column is expanded instantly, no delay, place for a new item is allocated instantly
    2. 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:

    1. Fly from the element on top of where new one is to be added
      1.1. Fly from behind of the one on top
    2. 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?

    1 Reply Last reply
    0
    • A Offline
      A Offline
      artem.marchenko
      wrote on last edited by
      #2

      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.

      1 Reply Last reply
      0
      • p3c0P Offline
        p3c0P Offline
        p3c0
        Moderators
        wrote on last edited by
        #3

        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.

        157

        1 Reply Last reply
        0
        • A Offline
          A Offline
          artem.marchenko
          wrote on last edited by
          #4

          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!

          1 Reply Last reply
          0
          • p3c0P Offline
            p3c0P Offline
            p3c0
            Moderators
            wrote on last edited by
            #5

            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.

            157

            1 Reply Last reply
            0

            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved