Some time ago, the article imitating Tantan gained a lot of praise (thanks for the encouragement and support 🌹🌹🌹). Here is a practical video tutorial of Village Head Yang using Vue3 development. Please use our wide selection of hand to a wave of three even ~ www.bilibili.com/video/BV11p…
So let’s go to the body
Salute to VueMastery
The VueMastery is an official Vue recommended platform for video courses. The Videos at the VueMastery are very thorough, and the powerpoint slides are well made, with appropriate animations to help us understand the ideas in the videos more quickly. To use animation to explain the knowledge point clearly, which requires a lot of time and energy to carry out original design, typesetting. Rui, thanks ~
In the original video, I copied the PPT frame by frame, comparing the video with the naked eye
Eyes fast to blind 👀~ friends point a praise 👍 good?
If you see any technical PPT with excellent animation in the future, you can also reply to the comments of this article, and I will help you imitate it. By the way, I would like to ask you what you think of the imitation PPT. If you think it is wrong to share it after imitation, I will not share it in the future. Please let me know your opinion in the comments section.
Finally finished, a total of 26 pages, and has been translated into Chinese, friends who need to go to wechat search: ezfullstack, after following the reply: reactivity to get the download link.
Of course, there is no way to teach you how to do design for a while, so this article mainly teaches you how to quickly use Keynote to create code demo animations and generate high-quality GIF files.
The execution scene of the animation
The scenes of animation in the presentation are divided into component appearance, component disappearance, action and transition between pages. The options for prefabricated animation are different for different scenes.
Image from Internet, these basic animation effects will not say more, everyone to try their own
I’ll focus on animation techniques related to code
The code in
We do code class lecture notes, one of the most commonly used prefabricated animation is the keyboard. This is a typewriter effect…
Curly bracket expansion
We want the parentheses of this code to be expanded for our subsequent animation-insert blocks.
It’s a little bit complicated, but once you understand it, it’s easy, so follow me
1. Copy the same page
Remember to remove the animation from the new page when you’re done copying it. No “… “under thumbnail There’s just no animation.
2. Adjust the spacing
Note the cursor position. The default line spacing is 1.5, which is a multiple of 1.5 depending on the number of lines you want to insert. For example, to insert a line of code, we set it to 3
3. Magic move
After completing Step 2, we return to the first page. Click the mouse in the blank, that is, do not select any element of the state.
Then go to the animation and select “Magic Move”. Magic move is a transition effect between pages, but it is actually automatic tween animation. Front-end developers are not familiar with this term
After applying the magic move effect, we can see the parentheses really unfold magically!!
Insert the code
Note that you should not add content to the text box where the code was. Once the content changes, the magic move will not work. This is because the magic move uses the content to determine whether it is the same element or not.
Once again, we apply the pre-animation of the keyboard, and we have the desired effect.
Export the GIF
From the menu “Export”, select the animated GIF and enter the range of pages to export. I won’t explain the resolution, we all understand. The lower the framerate value, the smaller the animation file will be, but the more frames the animation will lose and the less smooth it will look.
conclusion
Animation can greatly improve the reading experience and the look and feel of the lecture notes. But animation is a delicate business that requires constant experimentation with combinations and tuning. Whether the time is worth it depends on the purpose of the speech and whether you value the enhanced look and feel of the animation.
BTW
I have to useKeynoteHave done a paragraph of introduction animation to myself, share a short paragraph of content here, and we share! After learning the content of this article, you can also think, which animation combination is achieved by this?
Pay attention to the big handsome doing full stack
Recent articles (thanks for your encouragement and support 🌹🌹🌹)
- 🔥 made a night of animation, in order to make you better understand Vue3 Composition Api 858 likes
- 🔥2020 update, Vue explore the effects of dragging cards 916 likes
- 🔥 Use Vue to create an arcade joystick with 57 likes
- 🔥 2020, outbreak hit my third startup | Denver annual essay 138 praise