hello everyone, I am a gray license. I am very happy to bring you another dry goods tutorial.
the content of the tutorial, whether it is design or code, is 100% original by me. The code has been prepared for everyone. It is very simple for you to use. Open source has no copyright, so you can use it ~
I don't know since when, many cloud websites of large factories have become small icons with a very three-dimensional sense. Mouse movement in and out will have an interesting small effect.
▲ Alibaba Cloud homepage https:// www.aliyun.com/
▲ Move the mouse in and out of the small icon.
▲ Tengxun Cloud Homepage
▲ Move the mouse in and out of small icons
In order to help everyone understand the implementation process of this dynamic effect, Ahui specially wrote a very detailed tutorial. Teach you to make and achieve these effects. For designers, you can only learn to make icons and let programmers copy my code directly. 100% ensure that your design can fall to the ground.
not to say much nonsense, let's take a look at the final results I have made (visit the blue link below to view):
https://www.pslkzs.com/demo/cloud/index.html
▲ This is the effect I developed and produced.
the models intutorial are very simple, because I can't teach you modeling, lighting and rendering for hours... I must let you know the whole process of implementation in the shortest time. In the future, you can use your own way to complete your own Aliyun stereo icon and dynamic effect.
Special note: This article has nothing to do with Alibaba and Tencent. I have no idea how his design is made and how his code is written. I just use my own experience to think about the good results they make, and teach everyone to make and achieve similar dynamic effects.
In order to let junior designers see the whole process more clearly, I recorded a very detailed video tutorial. I strongly recommend that you learn through video so as to ensure that each step is very clear. If it is not convenient for you to watch the video in the company, you can also watch our graphic tutorial directly.
-Video Tutorial
You can manually copy the following blue underlined text links and go to station B to view them.
teaching video 1: daily foreplay
https:// www.bilibili.com/video/BV1sS4y1o7Yk
Teaching Video 2: Using C4D to Make Small Models
https://www.bilibili.com/video/BV1sS4y1o7Yk?p=2
Teaching video 3: Use Adobe Xd to create layered small icons
https://www.bilibili.com/video/BV1sS4y1o7Yk?p=3
Teaching Video 4: Using Code to Realize Effect
https://www.bilibili.com/video/BV1sS4y1o7Yk?p=4
repeatedly stressed that UI designers do not need to learn how to write code. You just need to focus on how the pictures of the delivery part are made. Of course, if you watch the whole video, it will help you to broaden your knowledge. Know more about the workflow and relationship between you and R & D. The more you know, the more you have the right to speak. No one can use "unachievable" to deny your design.
-Tutorial
Tutorial 1:C4D creates a three-dimensional icon.
final effect
Step 1: Open C4D to create a new cube.
Step 2: Use the zoom tool to flatten the cube a little bit (you can also adjust the property panel in the lower right corner and enter a specific value)
Step 3: Copy one by Ctrl + C and paste by Ctrl + V. Then use the move tool to drag the copied up. So you get 2 cubes. 
Step 4: Use the zoom tool again to flatten the top one.
Step 5: Copy the top cube and drag it up. In this way, you have completed the whole icon.
▲ Yes, it is as simple as that.
Step 6: Double-click the red box in the lower left corner to add a material.
▲ Double-click 3 times in total so that you can create 3 new shaders.
Step 7: Select the new shader and change it to white, orange, and black.
▲ Look at the lower left corner. There are now three shaders.
Step 8: Drag the three shaders onto the three cubes.
▲ Note that each cube has a shader in the upper right corner. In this way, we have finished the icon with material.
Step 9: Select the top white cube. In frame 0, the H attribute K of the coordinates in the lower right corner is a key frame.
In step 10, set the H attribute to another key frame at the position of frame 16, and change the attribute to 180 °.
in this way, you have completed the rotation animation at the top. The effect is as follows: 
use the same method for orange cube k frames. The whole animation is done. But this time we let the orange cube rotate in reverse (the H attribute in frame 16 is changed to -180), so that the whole dynamic effect is completed.
Step 11: Click Rendering> Edit Rendering Settings. Then select PNG as the input format, and be sure to check Alpha channel. The PNG exported in this way is the transparent background. 
In step 12, change the output frame to Manual. The start frame is 0 and the end frame is 16.
▲ Because we made 16 frames of this animation.
Step 13: Click Rendering> Add to Rendering Queue.
Step 14: Click Render. In this way, 0-16 frames, a total of 17 pictures are rendered.
▲ There will be a cyan progress bar in the middle. According to the configuration of your computer, determine the rendering speed.
these are the 17 rendered pictures. They are all PNG pictures with transparent background, which is perfect. We will do some splicing of them in tutorial 3 for delivery to programmers.
Tutorial 2 uses Adobe Xd to create a hierarchical calendar.
final effect
The origin of making this tutorial is that some students asked the WeChat group if there is any quick way to make it. So I thought of Adobe Xd's 3d transformation function. He was animated.
▲ This picture is from a screenshot of WeChat group friends. I don't know which great god made it. This is only for free tutorials, not for commercial use. If you accidentally infringe your rights, or if you are unhappy that I used your pictures, you can delete them privately.
Step 1 Draw a front view of the calendar in Adobe Xd. I simplify it here and draw only 4 rounded rectangles. And get into a group. 
Step 2: Select this group and click the 3D conversion button on the right.
Drag and drop the calendar icon to make it have a perspective.
select the green button layer in step 3 and adjust its z axis to 250. In this way, the button is suspended.
Select the white rectangle in Step 4 and adjust its z axis to 150. In this way, the white rectangle is also suspended.
Step 5: Select the penultimate layer and adjust its z axis to 80.
in this way, we will do a good job in the final effect of this dynamic effect. Next, we only need to export multiple pictures to complete all the work.
Step 6: Select this group, change the group name to Group 20, and Ctrl + E to export PNG images. This is our picture of frame 20. To be exact, it is our last frame of picture, because there may not be as many as 20 frames.
Step 7, change the z-axis of the third-layer rectangle to 0 (originally 80), and then change the group name to Group 19 ". Ctrl + E exports the picture of frame 19 after selecting the group again.
Step 8, change the z-axis of the white rectangle to 75 (originally 150) and then change the group name to Group 18 ". Ctrl + E exports the picture of frame 18 after selecting the group again. 
Step 9 changes the z-axis of the white rectangle to 0 (originally 75) and then changes the group name to Group 17 ". Ctrl + E exports the picture of frame 17 after selecting the group again.
Step 10: Select the green button, change the z-axis to 0, and then change the group name to Group 16 ". Ctrl + E exports the picture of frame 16 after selecting the group again.
so far, there are 5 pictures on the Z axis. This is all the animation that the Z axis rises. Next, we make an animated picture of the rotation angle again. After selecting the whole group, you will find that the X-axis rotation is manually adjusted to 12 and the Y-axis rotation is adjusted to -43
Step 11: Rotate the y-axis to -33 °, and then change the group name to Group 15 ". Ctrl + E exports the picture of frame 15 after selecting the group again.
Step 12: Rotate the y-axis to -23 °, and then change the group name to Group 14 ". Ctrl + E exports the picture of frame 14 after selecting the group again.
Step 13: Rotate the y-axis to -13 °, and then change the group name to Group 13 ". Ctrl + E exports the picture of frame 13 after selecting the group again.
Step 14: Rotate the y-axis to -0 °, and then change the group name to Group 12 ". Ctrl + E exports the picture of frame 12 after selecting the group again.
we have completed the animation of the y-axis rotation, and then we have the animation of the x-axis rotation, and the method is basically the same.
Step 15: Rotate the X-axis to 6 °, and then change the group name to Group 11 ". Ctrl + E exports the picture of frame 11 after selecting the group again. 
Step 16: Rotate the X-axis to 0 °, and then change the group name to Group 10 ". Ctrl + E exports the picture of frame 10 after selecting the group again.
in this way, our whole calendar is coming. All the frames and pictures needed for animation have been obtained. Look at the pile of pictures just saved. From group 10 to group 20, there are actually only 11 pictures. In other words, we actually only have 11 frames.
ha ha, maybe you can't imagine that our production process of this effect is so simple and crude. In the process of creation, we must think boldly and try bravely. Brothers remember: as long as you are bold, female ghosts can also let her take maternity leave!
this is the end ofXd's dynamic tutorial. We will splice them in tutorial 3 and deliver them to programmers.
Tutorial 3 uses code to move in and out of the mouse.
Next, we will splice the two previously prepared dynamic effects into long pictures to be delivered. You need to cut off the extra blanks in the picture and splice them into a long vertical picture. Please see the following figure for details:
the above step, you need to use software such as PS to do it manually, and remember the width, height and total of several pictures after cutting. With these three key information, programmers can write code to complete all the work.
Next, I will use my own plug-in "PS Dynamic Code Assistant" to complete all the work. The plug-in will automatically generate and grow pictures.
Download the plug-in:
https://www.pslkzs.com/animate/index.php
The next step is generated by using the plug-in. If you don't use plug-ins, it doesn't matter, you can manually splice pictures yourself. Manual splicing is not difficult, just a little troublesome. Splicing growth pictures is the basis of PS (or other design software) operation, so I won't write a special article here to explain it.
Step 1, open PS, create a blank document with a size of 1920*1080 and a resolution of 72dpi, and open the plug-in "PS Dynamic Code Assistant.
Step 2: Click the first button to import the plug-in. Select the folder where you previously stored C4D export sequence frames (the folder must have only png pictures and nothing else) so that all pictures are "placed" in PS.
▲ In the lower right layer panel, you can see that there are 17 pictures from 0-16.
Step 3: Click the second button of the plug-in to sort the plug-in automatically. After clicking, the order of the layers will be ready for you.
Step 4: Click the third button of the plug-in to minimize the cut-out. In this way, the blank space in the picture will be cut off automatically.
Although the extra size has been cut off, the width of the icon is still more than 400 pixels. We only need a small icon and reduce it as a whole.
Step 5 Image> Image Size, change the width to 100 so that the entire icon becomes smaller.
▲ Remember to select the equal scale reduction button. In this way, the width and height are smaller as a whole.
Step 6: Click the fourth button of the plug-in to generate an active file. It contains an html and a spliced long picture.
there will be a generated folder on the desktop with an html file and a spliced png picture. if you open this html file, you can see the generated code. 
▲ The dynamic code assistant is a tool for generating circular dynamic effects, but this time we do not need this kind of dynamic effect that has been played all the time. We just need it to generate a good long map.
this is the long map it generates, which is what we need. Very perfect.
▲ The plug-in is also very considerate and gives the generated picture a meaningful name. The name of the picture is: w100h1343steps17.png, where w represents the width, h represents the height of the whole long picture, and steps represents how many frames there are. In other words, the width of a single small picture is 100px, the height is 1347/17=79, and there are 17 frames in total. This key information is to be used for programming.
here, the UI designer's work will be completed. The rest is done by the front-end programmer. If you want to learn code, or your programmers don't know how to implement it. You can watch this video, which records my implementation process of writing code line by line.
Video tutorial address:
鄂公网安备 42010202002647号