![]() Launching the preview window I can now click and drag the cards over to the left and, since I made sure to change the size and masks, everything beautifully animates. I'll also wire one up from the second artboard back to the first again making sure that drag is the trigger. Now within the properties instead of a tap trigger I'll want to choose drag which will automatically select auto-animate as the action with that one in place. I can either select the entire group of cards, or individual ones, but seeing that I may want to use the cards to determine the drag direction I'll select just one, and then pull the blue handle over to the second artboard. So now that both views are set up and ready to go let's hop into Prototype mode and wire them up. I'm also going to jump into the shapes and adjust the masks, again making the centered one larger and the others smaller. ![]() I'll not only shift the cards over but I'll also adjust their sizes making the center card larger and the ones off to the side a touch smaller. Duplicating this artboard over to the right I can now create the second view. ![]() I already have the first view created with the cards extending off the artboard and they've all been placed inside of a group, which ensures that they don't get thrown onto the pasteboard. ![]() In this first example, we may want to create a draggable photo gallery that shows off many of the team members. Whether you want to prototype a photo gallery, a pull-to-refresh animation, or other interactions to help your users navigate throughout your application, the drag trigger and auto-animate can help you get going. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |