Forums » QC Tutorials

iOS 7 Chat View Interaction

    • 4 posts
    July 22, 2013 7:06 AM PDT

    Hey guys, I tried to use Quartz Composer to emulate some iOS 7 effects in my spared time. Here comes a simple chatting view interaction with three iOS 7 effects: scrolling with bounce effect, translucent navigation and toolbar, and depth interaction(the whole screen zoom in or zoom out).


    I'd like to share the quartz composition with you. The .qtz file includes following components: 
    - An iPhone 5 template with a screen view. 
    - Momentum Scrolling patch with additional patches for that bouncing effect . 
    - Translucent backgrounds. 
    - Zoom in and Zoom out effects. 
    - Some single patches inside like "Button", "Delay", "Switch", "Offset from Left Top" might be helpful for your own Quartz work.(you can search these names in the file to locate them in second)


    You can see the demo and download the Quartz file here: http://dribbble.com/shots/1164814-iOS-7-Chat-View-Interaction-Animation-and-Freebie


    Discussion and feedbacks are welcome! :)


    This post was edited by Neway Lau at July 22, 2013 7:07 AM PDT
  • July 22, 2013 2:52 PM PDT

    This is excellent! Would love to include some of these patches in a future release of jQC.

    • 5 posts
    March 13, 2014 10:38 PM PDT

    There are some errors when I open the Quartz file in my Mac(10.9.2) as below:

    > Switch On / Off
    Cannot create connection from ["output" @ "Splitter_3"] to ["On" @ "Patch_1"]

    > Switch On / Off
    Cannot create connection from ["Result" @ "Patch_2"] to ["Off" @ "Patch_1"]

    > Switch On / Off
    Cannot publish output port ["Switch_State" @ "Patch_1"]

    > Zoom Effect
    State restoration failed on node "Patch_4"

    > Zoom Effect
    Cannot create connection from ["Switch_State" @ "Patch_4"] to ["_enable" @ "Clear_1"]

    > Zoom Effect
    Cannot create connection from ["Switch_State" @ "Patch_4"] to ["inputAlpha" @ "ColorTransform_2"]

    > Chat View
    State restoration failed on node "Patch_4"

    > Screen
    State restoration failed on node "Patch_7"

    > Switch On / Off
    Cannot create connection from ["output" @ "Splitter_3"] to ["On" @ "Patch_1"]

    > Switch On / Off
    Cannot create connection from ["Result" @ "Patch_2"] to ["Off" @ "Patch_1"]

    > Switch On / Off
    Cannot publish output port ["Switch_State" @ "Patch_1"]

    > Smooth
    State restoration failed on node "Patch_1"

    > Smooth
    Cannot create connection from ["Switch_State" @ "Patch_1"] to ["inputIndex" @ "Multiplexer_1"]

    > Image
    State restoration failed on node "Patch_12"

    > Switch On / Off
    Cannot create connection from ["output" @ "Splitter_3"] to ["On" @ "Patch_1"]

    > Switch On / Off
    Cannot create connection from ["Result" @ "Patch_2"] to ["Off" @ "Patch_1"]

    > Switch On / Off
    Cannot publish output port ["Switch_State" @ "Patch_1"]

    > Image
    State restoration failed on node "Patch_3"

    > Image
    Cannot create connection from ["Switch_State" @ "Patch_3"] to ["inputAlpha" @ "ColorTransform_2"]

    > Screen
    State restoration failed on node "Patch_3"

    > Image onClick
    Cannot create connection from ["Mouse_Up" @ "Patch_4"] to ["Off" @ "Patch_3"]

    > Image onClick
    Cannot create connection from ["outputResult" @ "Logic_2"] to ["On" @ "Patch_3"]

    > Image onClick
    Cannot create connection from ["Mouse_Up" @ "Patch_5"] to ["inputValue2" @ "Logic_4"]

    > Image onClick
    Cannot create connection from ["Switch_State" @ "Patch_3"] to ["input" @ "Expression_6"]

    > Image onClick
    Cannot publish output port ["Switch_State" @ "Patch_3"]

    > Screen
    State restoration failed on node "Patch_10"

    > Screen
    Cannot create connection from ["Image_Trigger" @ "Patch_10"] to ["Trigger" @ "Patch_1"]

    > Screen
    Cannot create connection from ["Image_Trigger" @ "Patch_10"] to ["Trigger" @ "Patch_3"]

    > Screen
    Cannot create connection from ["Image_Trigger" @ "Patch_10"] to ["Trigger" @ "Patch_7"]

    > Screen
    Cannot create connection from ["Image_Trigger" @ "Patch_10"] to ["input_proxy_1" @ "Patch_2"]

    > Macro Patch
    State restoration failed on node "RenderInImage_1"

    > (null)
    State restoration failed on


    Anybody can help me to solve this case?

     

  • March 13, 2014 10:43 PM PDT
    lamsion chan said:

    There are some errors when I open the Quartz file […]

    Anybody can help me to solve this case?

     

    In the Dribbble comments, Neway says it is incompatable with Origami. You can uninstall Origami if you want to play with this and it should work fine.

    • 5 posts
    March 13, 2014 10:59 PM PDT

    Thanks,

     

    But it till not work, when i unintall my Origami.

  • March 13, 2014 11:14 PM PDT

    Ahh, it could also be a problem introduced by Mavericks. You can always check your Quartz Composer Patches folder to make sure Origami uninstalled properly, too.

    • 4 posts
    March 14, 2014 12:03 AM PDT

    Hi guys, I just updated the qtz file. It should work with Origami now: http://cl.ly/2W2f3B3N3v0a

    • 5 posts
    March 14, 2014 2:39 AM PDT
    Neway Lau said:

    Hi guys, I just updated the qtz file. It should work with Origami now: http://cl.ly/2W2f3B3N3v0a

    Wow, it's great!

    • 5 posts
    March 14, 2014 2:40 AM PDT

    I downloaded your Mac APP, and run it, is it clickable? It seems no in my Mac.

    • 4 posts
    March 14, 2014 9:01 AM PDT

    Yeah you can drag or click the first image. But since you already installed Quartz Composer, you don't need to try that app version. They are totally the same...

    • 1 posts
    March 25, 2014 9:44 AM PDT

    I can't get this composition to work properly. Everything is non-interactive and looks very sqwooshed. I get a long notification telling me about different functions that 'aren't restored properly'.

     

    It could be because my OS is a bit of a senior citizen (Lion 10.7.5.). I've been waiting on upgrading because there's a bunch of plug-ins and whatnot which I'm using in other software which aren't compatible with a system change.

     

    However it might be something else. Does anyone have any insight on this?


    Christian


    Btw here's the notification:


    > Bounce Effect
    Cannot create connection from ["output" @ "Splitter_1"] to ["Spring_Center" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["outputResult" @ "Expression_3"] to ["Spring_Stiffness" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["Output_Value" @ "Patch_15"] to ["y" @ "Expression_1"]

    > Search
    State restoration failed on node "Patch_12"

    > Messages
    State restoration failed on node "Patch_4"

    > Bounce Effect
    Cannot create connection from ["output" @ "Splitter_1"] to ["Spring_Center" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["outputResult" @ "Expression_3"] to ["Spring_Stiffness" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["Output_Value" @ "Patch_15"] to ["y" @ "Expression_1"]

    > Message
    State restoration failed on node "Patch_12"

    > Messages
    State restoration failed on node "Patch_3"

    > Bounce Effect
    Cannot create connection from ["outputResult" @ "Expression_3"] to ["Spring_Stiffness" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["output" @ "Splitter_1"] to ["Spring_Center" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["Output_Value" @ "Patch_15"] to ["y" @ "Expression_1"]

    > Message
    State restoration failed on node "Patch_12"

    > Messages
    State restoration failed on node "Patch_1"

    > Bounce Effect
    Cannot create connection from ["output" @ "Splitter_1"] to ["Spring_Center" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["outputResult" @ "Expression_3"] to ["Spring_Stiffness" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["Output_Value" @ "Patch_15"] to ["y" @ "Expression_1"]

    > Message
    State restoration failed on node "Patch_12"

    > Messages
    State restoration failed on node "Patch_12"

    > Bounce Effect
    Cannot create connection from ["output" @ "Splitter_1"] to ["Spring_Center" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["outputResult" @ "Expression_3"] to ["Spring_Stiffness" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["Output_Value" @ "Patch_15"] to ["y" @ "Expression_1"]

    > Message
    State restoration failed on node "Patch_12"

    > Messages
    State restoration failed on node "Patch_2"

    > Bounce Effect
    Cannot create connection from ["output" @ "Splitter_1"] to ["Spring_Center" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["outputResult" @ "Expression_3"] to ["Spring_Stiffness" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["Output_Value" @ "Patch_15"] to ["y" @ "Expression_1"]

    > Message
    State restoration failed on node "Patch_12"

    > Messages
    State restoration failed on node "Patch_5"

    > Bounce Effect
    Cannot create connection from ["output" @ "Splitter_1"] to ["Spring_Center" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["outputResult" @ "Expression_3"] to ["Spring_Stiffness" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["Output_Value" @ "Patch_15"] to ["y" @ "Expression_1"]

    > Message
    State restoration failed on node "Patch_12"

    > Messages
    State restoration failed on node "Patch_6"

    > Bounce Effect
    Cannot create connection from ["output" @ "Splitter_1"] to ["Spring_Center" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["outputResult" @ "Expression_3"] to ["Spring_Stiffness" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["Output_Value" @ "Patch_15"] to ["y" @ "Expression_1"]

    > Message
    State restoration failed on node "Patch_12"

    > Messages
    State restoration failed on node "Patch_7"

    > Bounce Effect
    Cannot create connection from ["output" @ "Splitter_1"] to ["Spring_Center" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["outputResult" @ "Expression_3"] to ["Spring_Stiffness" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["Output_Value" @ "Patch_15"] to ["y" @ "Expression_1"]

    > Message
    State restoration failed on node "Patch_12"

    > Messages
    State restoration failed on node "Patch_8"

    > Bounce Effect
    Cannot create connection from ["output" @ "Splitter_1"] to ["Spring_Center" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["outputResult" @ "Expression_3"] to ["Spring_Stiffness" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["Output_Value" @ "Patch_15"] to ["y" @ "Expression_1"]

    > Message
    State restoration failed on node "Patch_12"

    > Messages
    State restoration failed on node "Patch_9"

    > Bounce Effect
    Cannot create connection from ["output" @ "Splitter_1"] to ["Spring_Center" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["outputResult" @ "Expression_3"] to ["Spring_Stiffness" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["Output_Value" @ "Patch_15"] to ["y" @ "Expression_1"]

    > Message
    State restoration failed on node "Patch_12"

    > Messages
    State restoration failed on node "Patch_10"

    > Bounce Effect
    Cannot create connection from ["output" @ "Splitter_1"] to ["Spring_Center" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["outputResult" @ "Expression_3"] to ["Spring_Stiffness" @ "Patch_15"]

    > Bounce Effect
    Cannot create connection from ["Output_Value" @ "Patch_15"] to ["y" @ "Expression_1"]

    > Message
    State restoration failed on node "Patch_12"

    > Messages
    State restoration failed on node "Patch_11"

    > Chat View
    State restoration failed on node "RenderInImage_1"

    > Screen
    State restoration failed on node "Patch_7"

    > Macro Patch
    State restoration failed on node "RenderInImage_1"

    > (null)
    State restoration failed on

     


    This post was edited by Chrille Brun at March 25, 2014 4:07 PM PDT
  • March 25, 2014 5:45 PM PDT

    If it's been updated to work with Origami, that could be your problem. Origami only works with 10.8+, so you may need to upgrade for this to work.

We'd like to hear from you. Sign in or join now: