I'm going to confirm the destination aIs that second artboard.
Under Action instead of Transition I'm going to select the new Auto-animate feature, and this gives me a different set of options. In the Trigger drop-down I'm going to stick with tap as a gesture source. I'll switch over to Prototype mode, and I'm going to select that album cover basically, and I'm going to drag a wire the way I ordinarily would and release it on the second artboard. So I'm ready to now wire these two objects together. For my auto-animation, I want the behavior to be such that when you click on this album, it brings you to the second artboard. There's also a subtle behavior where the play button here on the album turns into a pause button to indicate that you're actually playing the music, along with a little bar here that appears to show that that sound is playing. I've taken the text here from the top and moved it down towards the bottom.
Other things I've done to the design are to take this album cover basically and make it a full-screen background image. When I come here on the right and click, I see that that same button "Book Tickets" is there. If I bring up the layers panel, I can see that that's the button "Book Tickets". When I click on this first artboard, notice that I have an object here that's off the actual artboard. If we look at this design there's a couple of subtle things that I do want to point out. The rule in XD is if an object has different attributes applied to it - this could be opacity, color, text attributes, the size of the object, the position of the object - any changes that I made, XD will animate between them any content that is the same will just appear to not change between artboards. The next thing I did was duplicate the artboard, and then change each of the elements being really careful to keep the names of all of the layers exactly the same. I'm here on the design canvas, and what I've done is defined the start state for my animation in this first artboard. Now, this is definitely a feature that's easier to show than it is to explain, so let's go ahead and jump into a design. When you wire to artboards together in Prototype mode using auto-animate, XD automatically animates the difference in properties between each artboard. Auto-animate in XD is an incredible feature that allows you to animate individual objects across artboards, creating more robust interactions and transitions in your XD prototypes than ever before.
0 kommentar(er)
