Taxi Mobile App Animation In After Effects | ⚡️ Sergey Basharin | Skillshare

Taxi Mobile App Animation In After Effects

⚡️ Sergey Basharin, Motion Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Lessons (43m) View My Notes
    • 1. Taxi App Introduction

    • 2. Map Ps File Review / Imort In After Effects

    • 3. Camera setup

    • 4. Map And Geo Marker Animation / Tint The Map

    • 5. Create And Animate Tap Shape Layer

    • 6. Destination Menu Animation

    • 7. Set The Destination Address

    • 8. The Request Menu Animation

    • 9. Route Animation

    • 10. Camera Animation / Path Animation / B Marker Animation / Clone The Map Image

    • 11. Create Search Ellipse

    • 12. Driver Menu Animation

    • 13. Integrate Animation Into Mockup

    • 14. Render GIF

    • 15. Thank you!


About This Class

"UI Animation Camp" is a series of classes for the animation of mobile interfaces. You are a web designer, a designer of mobile solutions and want to improve your skills or you are the one who is interested in the motion design welcome to the camp! We will create many cool cases.

In this class, we will make the taxi mobile app animation. You will learn about shape layers, paths, masks, key framing, null object and key frame velocity.


What You'll Learn

  • Ps file. Organize layers for animation.
  • Import in After Effects. How to correctly import a Ps file for further animation.
  • Animation in After Effects. I'll walk you through the process of animation of messenger animation. Integrate animation in mock up.
  • Export your animated GIF. I'll show you how to export for getting your animation shareable and out there!


1. Taxi App Introduction: Hey, this is so gave a Sharon and this is user interface animation camp. In this class, I'll show you how to animate Takes him a bile application in after effects, I walk in through every step of my process. PS file Review. Import file Animation Integrate animation into iPhone Mocha expertise it as a looping GIFs . By the end of this class, you have a Texan mobile app. Animated GIF. You can design your own Texan mobile app or you can use mine. All of my project files are available for you to download. Anyone can take this class hands full of my instructions. Even if you never use aftereffects, I'll see you in class. 2. Map Ps File Review / Imort In After Effects: first of all, are installed the front in this product. I use the front amounts. Raj, you can find a link to the front in the description. Okay. Ah, PS file. Here. Regard the map image layer. I made Google map Prince Green and paste it in for Chuck Actuate the blue and the red buttons layer. Let's open it. And here we got their address. Text and bottom shape. Layer the same layers inside the red button. Leader actuated the change location, text layer and that Gil marker shape layer. Okay. Ah, hide all red layers. Activate their destination. Many folder here. We got their destination text later. The line shape clear These small shape marker the close Aiken. The location. He's too released. Open the folder it contains with text layers the bottom shape plane. The point to a map text were and small. Gail, marker shape later. And the big round shape leader. Okay. Hi. Destination menu folder actuated the request folder. And here we get the location and races. Text layers, the shape lines, the markers shape players, the basic of the premium texi offers Open the folder. And here we got a basic car shape icon The price and the name text layers and the big round shape. Clear the comment hand the payment text layers the request bottom folder. Well, but it And here we got title text later. And the bottom shape leader. Okay, hide the request folder Egg to age the driver folder. And here we got the car and car number. Text layers the driver in full folder. Open it. And here, regard there temp, defecation, text, layer, user peak and rating layers the name and this statistic takes layers. The call and the shot buttons Folders in the folder are the text layer in the background shape layer and the big round shape. Later, at the end of this class, you will learn how to do these animations. Let's create temporary composition set 30 in frame read change duration to 12 seconds. The setting several ex will takes from the next project file when we will import it. SISE off. Ah, the composition. And who will takes from P s file? Let's delete it. Double click on project panel area The UN Select first Select P s file. Ah, said Regina Leader sizes with Ah. These mouldy usually has his anchor points it at the center, off the cropped graphic subject radiator. Then at the center, off the composition frame. Learn more about importing communally. Swipe Manu class. Okay, click import and click OK. 3. Camera setup: opened the map. Comp right click and let's rename it to map Main Click. OK, select the map and the gill makar layers for comfort. Press shift control C on your keyboard Analysts rename it to the MIP. Okay, moving down on the timeline. Open this composition and the best way to control this layers. If is a camera, go to the layer new camera. Okay, there. Default settings are good, so click OK. The camera will work correctly only with three dealers. Select the layer sent actuate three d mode. Check to eight these columns on the timeline. Click on this button. Let's try to control the camera. Open the settings open transform, Find the position parameters. Analysts try to move the camera left and right. It's so hard to control it with all off default settings. Okay, Actuate top view off our scene and select the camera. Earlier on the timeline set 25 over the preview 25%. And when we changed the values, old movements goes from the camera anchor point. From here, there's where the camera is so uncomfortable to control. Let's fix it. Change the view. Two of the activate active camera back to the default values and open the cameras, headings and click reset. Go to the later new no and act waged this remote parent camera to that now open settings open transform, and let's try to change the position off camera. Let's try to zoom the map. Let's try to retain the camera. Now it's easy to control the camera. Okay, click, reset, click enter and renamed the NAL. Object to the control camera or camera control and hide the nal object. 4. Map And Geo Marker Animation / Tint The Map: go to any frames forward from the beginning. Select the control now open position at key free. 30 Dreams forward at key frame back to the first hand. Move the camera to the right. So, like the key brings, go to the graph editor. Select the points using select the right point and move the handle to the lift to actuate the points handles. Go to the brave type menu and set auto select mode, said the work area. Press the play button and let's see what we got. Okay, let's activate map earlier. Motion blue and don't forget to activate composition Motion blue. So, like the gill mark earlier, set the pound behind tool. Actuate the snapping mode and move the anchor point down to the center over the later select the your marker. Go to the first key frame. Open scale. Yes, keep cream change well. 20 Go to the second key frame and set a value to 100. Selling the key frames right Click. Give a Revilla city and actuate look dimensions and change the values to 85 8 Life and let's offset Now Gil marker key frames go to the effect fine teen effect applied to the meme player Go to the effect controls and said the first color to dark blue The first color work for dark parts off image Click OK, and if you need night Mortal them MEP just swept colors. Okay, Uh, awesome. We will work with the demote so swept back. Okay, um set the work area and let's plea the play button and let's see what we got. 5. Create And Animate Tap Shape Layer: If you like what you hear so far, if you enjoy my teaching style. If you're feeling productive, if you want to be the 1st 1 who know about the upload of the new class, please click these buttons and follow B guilties and may encompass. Let's a tip. Go to the layer. Do you shape lever? Go to the ad manual yet ellipse at a stroke, and now it's white. You can see open color setting sand's pink blue from top button. Enter and let's rename it to tip Open She Preminger's open Ellipse path at key frame. I mean, at size key free, and I'll change whether to zero 20 frames forward and change whaler to 100. Go to the first key frame. Open stroke. Add stroke with keep cream and change well over 20 Go to any Prem's and at give Dream 10 frames. Background change. Well, you to 12th Select top. Give dreams right click. Differing velocity empt Change will use to 95 95. Select with GIF reams. Go to graph editor. Select points and let's build these kind of riff All handless moving to the center. Okay, lets dream the layer. Go to the first key Prem's select layer and press out plus square brick. It left square brick. Go to the last. Give frames, select the layer and press out plus right square bracket. Okay, I want to make the movement much faster. In the beginning, let's cut the layer a little more from the beginning. So said the work area and bread the play button and let's see what we get. 6. Destination Menu Animation: Let's at destination menu information. Activate the red button and the change location. Layers. Find the moment when the gale marker has appeared. Move the tape to this point on the timeline and move it to the writ button. Okay, uh, actuate the destination meaning and move it to of the tape player on the timeline open position. Keep cream 10 frames forward at Keefe, cream back to the first and move the camp down out of frame. Select the key Prem's Go to the Graph editor. Select the points click using as Move right, handled to the left. Okay, let's switch off collapse transformation and activates a layer motion blur. And don't forget actuated composition. Mark motion blur. Open Kump Actuate Ruler. Zoom in preview and pull the tub guide right right here and select their locations. Compositions and make recomposed. Analysts rename it to locations. Least opened these Kump. If it's a preview and Tuggle Transparence agreed and select first layer. Okay, open position 30 frames forward at key. Frame back to the composition beginning and move the layer down right here. Select the key frames, right click kifri velocity and set of values to note five and 95. Select the key frames, copy it, select other layers and pasted Zoomlion timeline and offset each layer to one frame, says the work area and press play button back to the destination. Manu come selectors allocation released locations, least composition and double. Click on that Rick Tingle tool and a mask added to the layer. Zoom in prayer vigil and select bottom points and move it to the guide. Okay, feed the preview. Go to the main camp says it will carry. Um, ants. Press the play button. I want the least in mission to start from the from this point, go to the Locational East, select all ears and cottage and move it to the beginning. Off the composition. Go back to the main camp, press the play button and let's see what we got. Awesome. 7. Set The Destination Address: OK, uh, let's set the destination. Idris, um, duplicated the tape player and find the moment when the least has appeared. Press the play button and let's see what we got. Okay, the address should appeared in Destination line. Go to the destination Manu Comp and cut the destination at rest layer. Go to the occasional east camp opened allocation to least select the address layer and copy it. Go back to the destination lier and paste it and move it to the address top line right here and cut it. Go back to the main comp and press the play button opened their destination menu Key frame sent less at a reverse animation. Copy the key frames. Paste it right here and right click. Ask Ephraim a C stand and click time reversed key frames, and let's change the red button at risk. Go to the red button composition. Set the Type two and type 12 05 Atlantic. Ever go to the character menu? Set more throughout. Formed size 18 Drinking 75 Ah Peake White color font style medium. Go to the paragraph and center of the text and align it with the button. Cut the text layer and cut the original layer. Go to the main competent press the play button 8. The Request Menu Animation: Let's add the request menu animation. Activate their request composition. Opened their destination. When you keep reams open, position off the request composition. Guilty the last. Keep cream and at the key frame, go to the first key frame and said the value and move the man you down. Select the key frames. Go to the graph editor. Select the points and click easing. Select the right point and move the handle to the left. Okay, um deck to eat. Collapse transformations and actuate motion boot. Copy their 10 player and move the layer full, which on the timeline and move the shape to the basic car. Go to the request composition. Select the premium camp and open the position it's Keep cream Siri frames forward and move the layer out of the frame. Select the key frames, right click l'm Change the Baileys to 85 85. Copy these. Keep reams. Select the basic completion and paste the key frames. Go to the sick and keep cream and move the layer to the center. And let's offset the leers. Key frames. Go to the main comp, duplicated the tape player and move it forward on the timeline and move the shape layer to the request title. Open the key frames. Copy the first key frames and paste it right. Click key frame assistant and click time reverse key frames. Ants briskly button. 9. Route Animation: Let's at wrote animation plan the moment when the request. When you has disappeared, go to the map composition and pull the marker to this point on the timeline. Open the position key frames off the now off the control. Now right click on the map composition on the project panel and said the size well is to 22 22 and TANF You've to you. Now we can see all the map is only in preview. Set the pan tool. Make sure that no layer is selected on the timeline at point. One more point here, here and to move the prayer you Holtz that's pays button on your keyboard. Okay, if you born to continue built path, open the settings open contents open shape. Select the pass here and select last point and continued to add new points. Opened the field setting sand. Switch it off and change the stroke. Will you to eight And let's fix the angles off the pet. Go to the stroke settings and said round kept and let's speak violet. Okay, let's try to control the camera. Open position off now and move the camera. Road is not moving. Activates three d Moten to move the camera, and now you can see now it works. Correct. Answer and rename it to wrote and move it down on the timeline. Duplicated the Gill marker and move it to the second destination point. Enter answer naming To be gill marker, Select first Gil Micro Answer and rename it to a gale marker. Go to the effects. Find field and a blood two of the A gale marker layer look. The effect controls manual. Go to the map. Main peak blue color from the bottom back to the map. Composition on look. The effect controls go to the project panel and right click on the map composition and back to the original values 3 75 and 8 12 10. Camera Animation / Path Animation / B Marker Animation / Clone The Map Image: Okay, let's Ah! As camera animation Beth Animation markers, animation and clone the map image. Go to the marker. Open is in our position. Its key frame. Go 40 frames forward and change Zet value and zoom out camera and move them up. Right. Move a top and find these position, says the work area. The answer. Press the play button and let's see what we got. Okay. Ah, select the key frames. Right Click. Keep Greenville ISTEA and change values to 85 85. Open Nalle rotation. It is that rotation. Keep cream open All key Prem's go to the second position. Keep cream. L said the value and set the position value. Okay, select rotation. Keep reams right click. Give free velocity and changed the values to eight wife and 85 said the ball carrier and press the play button. Select the role cheap. Go to the ad man. You and at dream Pieth, go to the first key Prem's and change the first failure to zero. Yeah, keep me go to the second key, Prem's and said the whale You to 100. So, like the key frames, right? Click and change values to 70 and 70 said they will carry um and press the play button, select the B gil marker, open skill and move it to second now key frames. What is the timeline? Said the war, Kerry, Um, and press the play button. Okay, Lets fix these black holes, go to the effects, find the rep a tile effect applied to the MIP and said the expense down value and the rabbit I'll repeat image. Ah, the larger the value of more clones off image. And let's set all directions values to ah, 1000. Also, you can change the modes off the dealing play with this Most I said the basic the repeater mold. Okay, go to the main comp, said the book here. IAM and brisk, Deeply button. 11. Create Search Ellipse: Let's at search a lips, Go back to the map composition. Go to the L. A or new shape layer. Go to the admin you at ellipse at fuel, enter and rename it to search ellipse and activate. Three. Demote and move the later to the A marker in composition and move the layer down on the timeline. Open the color settings and a let's speak. Read from B marker. Open the shape scale as keep cream. Change failure to zero 40 frames forward and set their sights. Select the key frames right. Click defraying the lusty and changed values, too. 95 95. Go to the first. Keep cream, open a busty keep cream and said the value to zero. Go to the next. Keep cream at key cream. Go 10 frames back and change. Well. You do 50 says the work area and press the play button. Let's see what we got. Select all key frames. Copy. Go 55 frames forward and paste it. Go to the main camp, says the work area and Chris the play button 12. Driver Menu Animation: find the moment after the second helps animation actuate their driver manual, hoping the position at the keep cream. Go 20 frames forward at the keep cream, Go back to the first and move the menu down. Select the key frames right click. Keep Rainville ISTEA and change the values to 85 85. Go to the first key frame. Select the blue button, opened their capacity at Keefe cream, go to the second and change failure to zero. Select the key frames copy and pasted to the change location. Later, go to the first key frame, go to the driver menu and select their driver in four menu open, thereby city at key frame and change. Whether to zero 20 frames forward and change value to 100. Go back to the main camp. Go to the first driver. Keep cream. Go to the MIP camp. Open the camera controlling at position. Keep cream. Go 2020 frames forward and move the map up. Select Dickie Frames right click Kifri Village City and change the values to 85 85. Go back to the main camp and, uh, leads Plea the preview and let's see what we got 13. Integrate Animation Into Mockup: okay, lets integrate animation into a mock up. First of all, let's select all leaders on the timeline. You can press control a on your keyboard and make ProComp aunt. Rename it to map Mr. And let's double click on the Project panel area. Set the PS file and set Retain Lee Rece ices Imbert PS file. Create new folder. Rename it to mock up and drop mocha players into link on these free Maccabi will find in the description. Off this class opened the Layers folder and find iPhone X comp and let's get the composition out of the folder. Open it right click and change size values to 806 100. Also, let's rename it to chart iPhone X. I mean, open the composition and let's kills it. Leaders down created the now select all layers and parented to the Now open the scale off the now aunt change value to 34. Or you can play with this value and find your Ah, will you actuate tight election safe and move the iPhone to the center. Open this screen composition and hide the screen. You I later open screen comp drop MIP Mr Comp Insight select the Lear Open Skill and Change value to 201 and it landed with the screen actuate, transparency mort toe actuate masks, columns. Click on these button. Go to the chart iPhone X comp and creating. You. Sell it big, the white color or pique your color and Renee me too big round and move it down on the timeline, said the book area and press the play button and let's see what we got. 14. Render GIF: Okay, said the Walk area. Go to the composition at to render queue output model former PNG sequence output to select folder and click the rendered button and less weight open foot shop file Open and find the fuller with the sequence. Select the first image and actuate the image sequence mode. Frame rate. 24. OK, go to the first frame and you can see that it's empty so user will see empty Tom. Nail off your gift. Let's fix it Open folder with the PNG sequence and find some, uh, picture. Let's take the last free and drop it to the PS project. Just drug and drove it. Move these layer to the left, Cut it toe one free. Okay, and go to the file expert and safe for Whip said the looping options to forever click safe . Set a folder, click safe. Wait and let's see what we got 15. Thank you!: All right, This is the end of this class. And now you can create a class project. Let me know what your place project He's and share as much information about the class issued like. And if you'd like feedback, let me know if there is anything that you can still have questions. I'll be happy to answer. Thanks so much for taking this class. If you liked it, I'd love if you gave me a review. Thanks again. And I'll see you next time.