ConstraintLayout Deep Dive (Android Dev Summit '18)

[Music] hello good afternoon I'm super excited to be here and today we're gonna be talking about constraint layout with a focus heavily on the visual editor how to use the visual editor to effectively make constraints in Android studio so I'm gonna start out by talking about the basics and then oh I'm Chris UX designer on Android studio and I'll be talking about some of the new features we've added to Android studio for constraint layout awesome awesome and I'm Shawn McMullen developer advocate for Android after we talk about the basics the features that shifting constraint Liat 1.

0 1.

1 we're gonna talk about some of the new features that are coming out and constraint layout 2.

0 so let's dive in what are constraints so when I add a view to a constraint layout in the visual editor I'm gonna get these four new handles one on the Left top right and bottom if I click one of those or if I go over to the view inspector over here and I click that I'm gonna go ahead and add a constraint to this view so I want to pause for a second here and mentioned the in constraint layout before I added this constraint constraint it's gonna add that view to the view hierarchy but it's just gonna lay it out somewhere on the screen so I'm gonna have that constraint it's 30 DP off the top and if I had another one to the left I've now fully constrained this view now constraint layout knows how to solve where this view goes we're gonna see starting with this very simple example how to kind of build up more complex examples of constraints and of course I could change this 30 DP margin to be 50 DP or it could set both of them to 0 DP and then add a constraint over on the right side if I do that I'm actually going to Center this view if I add another constraints on the bottom I'm gonna Center this view on the entire constraint layout and this trick of constraining equally on the right on the left is going to work everywhere and constrain it this is how you Center a view inside or on top of another view so let's take a look at one more thing I can do with just a single element using constraint layout so if I look at this slider that's over on the left it starts at 51 I've constrained the top and the bottom like this and I can change that I can change it up to 25 and when I do that instead of centering it exactly it's going to introduce a bias it's the later its going to introduce a bias to the layout now it's gonna lay that out 25% along the way 75% along the way and of course there's of course a horizontal slider as well so let's dive even further into this view inspector and taking a look at what's available in the visual editor so there's this triple chef going on here inside of this view inspector and I asked John Hufford about this and he said that's because it's wrapped content so it's like trying to pull in as hard as it can from both sides so this is what it's going to show for rap content I can change that of course to fix width that's 100 DP that's not too exciting I can also change that to match constraints so match constraints is a new feature for constraint let it's a new way to layout views and what it says is take up all of the views all of the space available by the constraints given so in this case I'm constrained off the right on the left so it's basically the same thing as full parent and this is how you would take up the full screen in constraint layout you wouldn't want to use fill parent and constraint layout and when I'm in match constraints I get this really interesting icon here and I originally thought this was a heartbeat for the longest time I thought this was like a heartbeat icon I asked John about this it turns out that's actually a spring and on some versions of Android studios you get two Springs on some versions you get one so I guess it's more springy for some of us than others so let's switches back over to wrap content and let's add another view so we can start building more complex layouts so I'm just gonna add an image view then I'm gonna constrain it so it's you know 20 DP off of this text view then I'm gonna constrain it on the right and it does you know what we'd expect right it's gonna go ahead and move that image view so it's 20 DP off the left and the ends are aligned now I'm going to add another constraint over on the right and we'll see that this image view is gonna Center itself as here we can see the centering trick that we did for the whole screen we can do this on another view as well now I want to change the width of this view from wrap content to match constraints and this time instead of match constraints meaning it's going to take the whole screen it's gonna take the width of this text view whatever size that text view is this image user I'm gonna try to match that constraints as well and when I do that this new control shows up in the visual editor so this little Y it creates a little triangle I'm gonna click it actually enable an aspect ratio on this image view and this is this is a really nice feature if you want to display an image with an aspect ratio images you know when we get them from designers are from the web they come in whatever aspect ratio and our designer always wants them to be one by one or two by one or sixteen by nine you're laughing because you're a designer and it's my fault sorry and so we can set up exactly what our designers asked for we'd have to write a lot of code to do the resizing or to fix this aspect ratio and also resize this view as that text view changes at the same time well maintaining this aspect ratio now if I set this aspect ratio to 3 to 1 I kind of introduce these conflicting constraints here I've set 1 aspect ratio that says I'd like this to be 3 to 1 aspect ratio or 1 constraint 3 to 1 aspect ratio and then another constraint saying this can be no wider than this text box it's good its constraint light has to solve both of these at the same time and it's gonna choose to use the constraints from the text box above the aspect ratio I can free up another dimension for constraint layout to solve so if I change the height to be matched constraints it's capable of resizing both dimensions so now it can set the 3 to one aspect ratio by making this image view less tall so that's all we can do with just a single you know element or two elements let's add a little bit more of a complex view and talk about how to lay things out with more features from constraint layout so my designer just sent me this lovely email form thank you and so I want to pause for a second I mentioned this is a talk about constraint layout this is not a talk about how to design login forms I did one of those earlier today please don't copy this login form there's many problems but we can see here there's a couple things going on the labels are right aligned to some sort of invisible line in the center of the screen the edit text appeared to be left aligned to that same line and then the login a new account button are kind of hanging off and there appear to be aligned to the you know edit text right and then at the same time email and password appear to be vertically centered on the screen we're gonna try to do all of those things in constraint layout so before we do that how are we gonna lay out those you know text views right we have the email texting Mel edittext we could align like the top of the text you to the top of the text or the bottom of the text feeder the bottom of the edit text that would actually be incorrect if we take a look at how fonts work just dive into fonts for a second and look at font metrics we have a bunch of them we have this base line at the bottom which in English in most languages almost everything sits on then at the very top we have the ascender line which nothing goes above and then out at the bottom that dashed line is the descender line and it turns out that the metric that really matters is this base line and if we land out two texts that have completely different fonts next to each other along the base line that creates a single line of text for our eyes and it allows us to read it as a coherent unit so we want to do that in constraint layout so if I select this email label I'm gonna get this controlling constraint layout it looks like this I've been enlarged it substantially so you can see it when I click it I get my favorite control in all of Android studio it actually blinks in the editor and I call it the green glowing orb of baseline so we can go over to the edit text and click that same thing and now we can drag from one constraint or sorry one base line to the other and create a constraint saying these text views should have the same baseline and we'll do that for all of the other text views on the screen here in order to set up all the baseline alignments and when you line up text next to text you almost always want to use the baseline that's the correct way to do it all the time especially in constraints layout so now let's go ahead and put that login button on the screen as well so the login button has to be constrained off this edit text and then it's also going to get constrained on the right side this figure out how to do this centering write the email and password is vertically centered on the screen how am I gonna do that so we've been doing this thing where we put a constraint on both sides of a view and it's Center so let's try to do that so I'm gonna put them straight from email up to the top of the screen it's gonna pull stuff up to the top from password down to the bottom of the screen and it's gonna pull stuff down to the bottom and so far this makes sense now I guess I'm gonna have to add a constraint from password to email right because I want these things to go back together so I'm gonna do that and this is actually gonna Center password between email on the bottom of the screen which is not quite what I wanted let's pull email back down with another constraint and when I do that I'm actually going to solve this problem like a little bit differently than how I did before this introduces what's called a chain and constraint lad and it's gonna solve it with the chain solver now of course setting up all of those constraints by hand individual editor is kind of tedious so there's a helper for this you can go into right click on center and choose vertically when I have email and password selected and when I do that it's going to set up all of the constraints that I just talked about so inside of a chain there's actually three different ways that can get laid out for technically the three that I use all the time so we have spread which means evenly distribute everything so this looks similar to what we did with linear layout we have spread inside which is basically the same thing except the first and the last elements get pushed to the edges and then the one I used most of the time is packed so this says push everything towards the center of the screen and center it as a group and so that's what we're going to use here right we're going to use a packed chain in order to Center both of these views together so there's one more thing we need to do right we need to put this invisible line in the middle of the screen but everything's kind of based around so to do that I'm gonna go to helpers I'm gonna add a vertical guideline so a vertical guideline is basically you can think of it as a new edge of the screen so it's like I have one on the left of the screen I have one on the right screen and now I've put an edge of the screen in the middle of the screen that I can use as an anchor for constraints I'm gonna head and move that to where I'd like it in my design and now I could just take those text views and create constraints from those two this guideline and the kind of visualize what this is doing underneath if I move the guideline it's actually gonna move the entire layout now so let's move that back and then let's get another design because it turned out that design was not performing very well so after many user studies we've discovered the solution to our login form is left aligning the labels so my job is now at implement this so let's try to do that well I did it and I translated its German and this is what happened this is not not great so what happened here so it turns out if I lay this out similar to the way I just did right so passwords the longest field in this in these labels so if I set up a constraint from the edit text over to password and then another constraint from the it takes down to the password edit text this is gonna work great in English but then when I translate it to German these constraints this invariant I had that password is the longest field isn't no longer correct so what I'm gonna need is something that's dynamic that's based on all of these things it's kind of like a view group you know basically I might want like a linear layout to hold these things but actually I'm in constraint layout so how do I do that in constraint layout well it turns out there's another helper and we're gonna use that now so we've to go into helpers and we use add vertical barrier this allows you to add a barrier to the screen what a barrier is is it's kind of like a view proof in text it's actually called a grouping code so we can open up the component tree select our email and password and drag that down to be inside of our barrier now it's not actually a view group it's just a view that's added to the screen it's positioned on one side or the other of all of the views that are inside of it right by default it's on the left but if I open up the attributes pain and scroll down to the bottom I'm going to find a barrier direction which I can set to the end and now that I've done that I'm going to set up my constraints and then translate my English over to German and everything's gonna relay out and do exactly what I expected so that's really it that's all of the features and constraint lay out 1.

0 and constraint lay out 1.

1 so now I'm gonna pass it over to Chris who's going to talk more about more tricks that can be used to use the visual editor to build constraints cool thanks Sean so with constraint layout we've you know over time introduced many concepts and so you know we started with the basics which is just constraints margins baselines and chains but over 1.

1 and 2.

0 alpha we've introduced things like guidelines and barriers and groups and then there's many more helpers to come and then of course there's motion layout but one thing that we've heard consistently is that as we've added more concepts and the layouts have become more complex it's actually become increasingly harder to manage all of these with constraint layout and so what I'm here to tell you today is that we've actually been improving a lot of this in the visual editor in the Android studio and so the four areas I'll talk about are creating constraints and how we improve that also some new view options we added to the design surface and then some tricks around zooming and panning which are super useful when you're dealing with constraint layout and then of course using sample data which we introduced back in the 3/2 so creating constraints so you know in this case we have two components it's pretty simple we have an image view in a text view and so if we want to Center the image view then we just put one constraint on the top and one on the bottom but let's take that lovely login form from before so from a UI perspective this is actually not too complicated we just have some labels we have some inputs and we have some buttons but from the constraint point of view there's actually a lot going on so you know we have this guideline in the middle we have the login button constrained at the bottom and the right of the input we have the inputs themselves constrain to the guideline and so because all these components are pretty close to each other you know when you're dragging these constraints around in the layout editor it can actually be pretty challenging to get that get it right even when I made that slide I hid half the constraints because it was too busy yeah that was very simplified so one thing we've done is actually is we've added the ability to add constraints directly with the context menu so in this case you know if you have components that are really close to each other this makes it a lot more precise and more direct to actually set those constraints so in this case and this is available in 3 3 beta as well so you can try it out today and so in this case if we select one component which we have this a lovely cat picture you can just simply constrain it to the parent so what does it look like if you have multiple multiple components so in this case we have these two text views that are really close to each other and so I'm not sure if people have tried to create constraints between two text views that almost overlap it becomes a little painful when you're going from the bottom of one to the top of the other and so with this new context menu you can actually just keep the two selected and then when you open them the context menu there's now this constrained menu and so you can actually just see that the two elements that you want to use are there and then you can easily cascade to the right constraint that you want and in this case you know we only have we're only showing the start and end and that's because in this case the top and bottom constraints have already been set so we don't show them so we can look at another example so here we want to constrain the location icon to this vertical guideline that's all the way on the left so if you use the drag-and-drop method what you'll notice is that as you drag from the left or sorry from the right all the way to the left you get all these I guess Sean's favorite little green flashing stuff a lot of these targets that all show up when you try to create the constraint and so if you're trying to target some of these smaller things like the following text or the numbers it actually gets pretty hard when you're trying to do drag and drop with constraint layout and so again this makes it a lot more direct so you can select the guideline and the icon and just use the context menu and if you really don't want to select these things on the design service you can totally use the component tree this is becomes even more useful depending on how deep or how complex your hierarchies get and does the exact same thing but if you do like drag and drop you know you can still do it and one thing that we've tried to make easier is actually when you drag it and so in this case we have this new gesture which pending is called drag to Center and so I think as I mentioned before as you drag you now see all these like little targets and so instead of trying to actually target those specific green dots you can just simply drag to the middle of the thing that you want actually constrain to and so in this case this is just some screenshots if I drag from the mountain view text view I can just drag all the way to the middle of the cat picture release the mouse and then I get this nice pop-up menu that just shows me the two constraints that I can set and so in this case because the mountain view we're going from the left of the mountain view text view to the cat picture the two constraints that make sense are actually the left and the right or start and end and we actually have this as well which comes in handy when you have overlapping views and so this one's pretty simple but sometimes you know you have views that you want to hide and show it run and so all you have to do is drag to wherever you to the target and what we'll do is actually figure out what fuse are under that pixel that you released the mouse and then show you a context menu accordingly so if we move on to view options so the design surface has always had a bunch of view options to meet to take advantage of when you're working with your layouts so the two I'll talk about specifically are which we added is show all constraints and live rendering so if we go back to our login form gonna reuse this a lot you know the constraints are set here but the thing is you know when you're trying to like let's say you're new to this layout and you're trying to actually edit constraints on one of these controls there's actually a lot going on and actually again this is pretty simplified compared to the normal design surface and so what we've done in Android studio 3.

3 is we've added this option to show all constraints but it's actually turned off by default and so here's a quick video to show you what that looks like and so what we'll do instead is we only show the constraints on the actively selected component so this makes it easier to just you know work with the component that you're actually working with and not be distracted by all the arrows and margins that usually come with the layout of course you can easily turn this back on if you do want to see all the constraints at the same time and so this is kind of showing you a side-by-side and so on the left we have it turned off and on the right we have it turned on and so especially in the design surface or design mode it actually cleans it up a lot because you don't have all these little arrows and margins especially for elements that are really close to each other like the 3:22 and following and the 20 followers and then in blueprint mode it's the same thing even though blueprint mode is heavily simplified because we don't render the components it still gets a little hairy to look at and so we think this is a good option as well here the other view option we have is live rendering so we've actually done live rendering by default in constraint layout for quite some time go back can I go back and so it's on by default but depending on the specs of your machine in AK it can actually be a little slow so as you drag around you might you know make a mistake or oftentimes when I've tried to use it it's I'll try to create a constraint and then the button will move way after I drag it and so that actually causes me to make more mistakes and so and so if you turn it off it's actually much faster as you drag and move things around you can still see the bounding boxes when you're dragging around and so you'll know where things end up the only downside is that it just doesn't render as you drag and alternatively you can use blueprint mode so here we don't do any live rendering we usually recommend this is the best way to work with constraint layout because you can just focus on the constraints and so you know as a refresher to set these options there in the top left corner under the eyeball and if you want to switch between design and blueprint mode that's using the blue layers icon as well so the other thing I'll talk about zooming and panning so you've actually been able to zoom in pan in the layout editor for a while now and it comes really in handy when you're dealing with constraint layouts especially when again when things are really small or when they're really close to each other overlapping well what we've done in 3/3 is we've actually changed the keyboard shortcuts to match more of what we expect from the design tools like Photoshop and sketch and so to zoom in you can use commander control depending on what OS you're on and then the equals sign so you don't have to actually hit shift and then the equals sign to get the plus just hit equals but if you really want to shift it actually still works and then with the mouse wheel you can use you can hold commander control and scroll up and then if you have a trackpad you can just pinch in to zoom then the opposite is for zoom out so it's command control – and then command and control with the mouse wheel scroll down and then pinch in the opposite direction and then zoom to fit so if you're zoomed in and you want to get back to that layout where you can see the whole thing you just use command and control plus zero and so then if you're zoomed in and you don't actually want to zoom out but you want to pan around you can actually do so by holding space and then using the mouse to kind of click and drag and this is kind of a familiar gesture if you've used Photoshop or other design tools and so the last tip I'll talk about is using sample data and so a sample data in constraint layout it's actually easier to preview how your layouts will respond to different content types at runtime and so we actually introduced sample data helpers in the Android studio 3 to to make it easier to work with in the design surface specifically for image views text views and recycler views but before that you could use tools attributes in XML which are still useful but we just didn't find where as discoverable on the design surface and so with the image view we have two sample sets we have avatars and we have scenic backgrounds and so if you and if you want to add your own images to the sample data you can do so you just create a sample data directory at the root of your project and so with sample data and with your image views constrained you can actually just you know quickly switch between different types of images and then also set different aspect ratios and constraints so you can quickly see how your layout responds without actually having to run your app and the same goes the text view so a text view we have a bunch of sample data so we have cities we have lorem ipsum we have dates full name and again if you want your own sample data you can create it at the sample data directory at the root of your project and I think we support flat text files and JSON and actually with text views I think this is even more important because oftentimes you know you'll have text views that are meant for more open-ended content such as profile descriptions so in this case we have you know domestic shorthair is a very short description but then on the right this one's just you know a bunch of text plopped in there and so you know without having to run out your app you can see just with sample data how your layout responds so I don't need to copy lorem ipsum off the internet every time now yeah just and I think as the you mentioned in the previous example this is great for testing out across different languages and so with that I'll hand it back to Sean to talk about some new features thanks Chris all right so that covers everything in constraint Liat 1.

1 1.

0 some of the new features in the design service coming out in 3.

3 they should hopefully help you use that to build constrained layout and now I want to move on to new features coming out at constraint layout 2.

0 and by that I mean motion editor the thing we're all very very excited about so I want to show of hands like who has tried playing with motion editor already so I see five people so hopefully we can give like a nice introduction here to the basic concepts of motion editor and then Chris is gonna go back onstage and talk again about the design surface so motion editor is their motion layout allows you to build dynamic layouts using all of the features of constraint layout we talked about earlier but then just changing the constraints over time so here we can see an example of building a collapsible header that Chris Bane's put together that does a pretty dramatic animation that would be pretty hard to build with a collapsible header itself so you see that that title image actually hides itself behind the view as it Scrolls up it's a pretty dramatic animation so before we get to something like that let's talk a little bit about what we can build with motion layout motion layout can be used to build collapsible headers you can build state feedback or transitions maybe the open and closed state of a drawer and you could also make most of the animations that are in this presentation as well to understand motion to understand animation in general it's really important to take a step back and think about like what actually defines an animation not not just on Android but like even if a Disney movie what how do they make an animation all animations are defined by a start and an end so I start over here I'm here and then I'm ending over here and in between over time I created an animation by doing that walking so that's a very complex motion let's talk about a very simple one and talk about the same concept I'm gonna put a blue dot on the screen and I'd like to build an animation in order to do that I have to define a start I'm gonna put it in the top left corner with constraints I have to define an end I'm gonna put that in the bottom right corner with constraints and now in order to build an animation all I do is transition from one from the start to the end over time and that's what motion layout will do for you it'll figure out how to transition that blue dot from the start down to the end to build a motion layout you have to start with emotion layout in your XML so motion layout is a subclass of constraint layout so we did that so that it would have all of the features of constraint layout while adding all of the new features in order to support animations a motion layout then points to a motion scene which is a separate XML file from your main layout and the motion scene is where you encode that start and end information that defines your animation the start and end are defined in terms of constraints sets and what are constraints us you may be familiar with this already but if not what we've been talking about so far looks like this right so this is what I would call a constraint layout it's the views the actual labels plus all of the constraints and all the sizing information a constraint set is just this part it's just the constraints and just the sizing information it points to IDs of actual views but it doesn't actually contain the views themselves and if I animate a constraint set it would look like that and if I apply that to a real view and did that same animation it would look like that so let's build a a fairly you know easy to follow along animation in constraint layout with motion layout so here we have a pretty dramatic reveal animation where the title comes down to the top the subtitle expands down below and then the description comes in from the bottom and at the same time the image in the background is also resizing itself so there's a lot of things going on here this might be actually hard to write in code but it's fairly easy to write using motion layout so let's take a look at how we're gonna do that so to make a motion layout I'm just going to add I'm going to define the start in the end so the start I'm gonna move that title off the screen and I'm gonna do that by making a constraint from the end of the title to the start of the the viewport to the constraint layout and constraint layouts very happy to lay your views out off the screen if you asked it to so please intend to do that if you ask it to then we are also going to do the same thing on the bottom where we're gonna put a constraint from that description text to the bottom of the screen to push that description start description text off the screen then to actually build that we're gonna go ahead and make a motion layout so again this is a subclass of constraint layout and it has one new tag it has this layout description tag which is going to point over to that motion scene file here I'm gonna call it space scene then I have to define my layout which is just the views I don't give it widths and Heights I don't constrain anything I'm literally just gonna make a list of three text views in an image view now I'm gonna go over to that space scene file I was talking about earlier this is the motion scene file so it has a motion scene tag and inside that it defines a transition and a transition has a start and an end and again that's the thing that defines an animation animation always has a beginning and it always has an end to define start I'm gonna make a constraint set and a constraint set is just a tag it has an ID and then it defines a list of constraints and it's gonna have to define a constraint for every single view that its constraining here I'm just gonna show one of the views and leave the others off the slide deck because I got a little long but will give will say which idea I'm constraining I'm gonna constrain the title I'm gonna set its height width and I'm going to set its padding and then I'm also going to constrain to push it off the screen I'm gonna constrain the end to the start of parent let me do the same thing for the constraints that end I'm going to just go ahead and make the title view constrain the start to the start of parent and this brings that title onto the screen I'm gonna do the same thing for all of the other views in this layout as well and that's all I have to do it's just a little bit of declarative XML and I've built this animation so now I'm gonna pass it back to Chris he's going to talk a little bit more about the motion editor so at i/o this year we gave you a sneak preview of the motion editor when we had announced motion layout since then we've been working pretty hard on it but it's not quite ready yet sorry to say but we're still very excited about it but we also wanted to make sure that we focus on getting some foundational pieces in place before we release it we also don't want to be too impatient and really make sure we get it right unlike some things we've released too early in the past like instant run so the first foundational piece is really the motion layout library itself so we just talked about that and it's been out for a while and so before we got too far in building the tool we wanted to make sure that we actually nailed the right animation concepts and controls that are required to make these simple and beautiful animations on top of that the library also needs to be performant and integrate well with your existing views and so John Hufford and Nicolas have been really working hard on the library and so they love all your feedback and all the really cool demos that have been coming out so please keep it coming and thank you but the other thing is actually the quality of Android studio and so this is the second foundational piece and it's been the primary focus for us in three three and the upcoming three four release and so in this case we've made a lot of performance dinner sorry performance and interaction improvements to the design surface because it actually has to be able to render animations at 60 frames per second and also making it easier to work with constraints because one of the biggest prerequisites of motion layout is you have to know how to use constraint layout and so we think that if we invest in the quality now in the tool it will actually make the motion editor experience much better in the future and so with that I'm here to show you some very early explorations of the motion editor these are just mock-ups this is not the build I'm the designer remember so this is all made in Photoshop yeah this is all four of course we'd love to hear your feedback so feel free to find me or Shana and I think John is here as well I will be at the speaker QA to talk more about it so if we take the example from before where we have the space picture and we have some text views animating in let's just use that as kind of the context of what we'll see in the motion editor so what does that actually look like so here we have a new perspective on the componentry which for now we're just calling the transitions view and so for the purpose of the talk I'm just going to talk about this new view because we think this is the most significant animation part of the new UI of course you know later on you'll actually have the other views like the property panel and the palette but we we haven't quite figured out the details of how that integrates with this timeline or this transition view so stay tuned for that so in this case we have the start of the transition and so you can see that the text views are actually off the viewport but you can see that there's a motion path that goes from without side and then in we don't actually render the text views outside the viewport today but that's definitely something that we will need to have for animation because we know that's a very typical animation example to have things fly-in and so if we kind of fast-forward through halfway through the transition so now you can see that the text views have moved about half way in and in this case we have the space image zoom back out and that's kind of what we intended here so free if we were wined let's go deeper on what this transition view actually does so we're only showing one transition right now and it's uniquely named by its start and end constraint set which simply is just start and end in this case you can have multiple transitions per motion layout and so with this drop down you'll be able to switch between the different transitions and of course we'll load the corresponding constraint sets and change the timelines so you can see how the components change and so each transition has its own properties which is of course the start and the end constraint set it has the duration which is expressed in milliseconds and the stagger property which allows you to actually stagger the the animation itself so if we move down we have the timeline and so you have starting from the left you have the playback bar so you can loop the animation as many times as you want just to get the animation right you can quickly jump to the start or the end and if you want to speed down or sorry to speed up or slow down the animation we also allow that as well again just to like tune the animation perfectly and we have this time control here so you can actually step through millisecond by millisecond just to see how the animation plays out and then for the timeline itself you know we show from 0 to 100 100 being the end and so you can use this slider here to actually make the timeline bigger or smaller depending on which part of the transition you want to focus on and so if we move down we can actually see all the components that you can animate in the motion layout and so in this case each component will show that they have a start and an end constraint set which are required in order to actually animate anything and so if we look specifically at the space flash image it has a key attribute in the middle or a keyframe which we're actually going to change the scale type halfway through the animation and so if we zoom out those icons on the timeline actually correspond to the same icons on the design surface that way you can actually kind of correlate okay here's my components that I'm animating and where they're starting and ending and what are the actual motion paths and so that's kind of where we are with the motion editor we hope to get it out soon but I can't promise anything and so your next year yeah sometime in 2019 and that's it [Applause] [Music].

Hãy bình luận đầu tiên

Để lại một phản hồi

Thư điện tử của bạn sẽ không được hiện thị công khai.