preface
One day in a meeting, the product manager said impassioned in front of everyone:
Scrolling Douyin and Weibo has been getting a lot of news lately, and it’s nice to see that China has finally come up with an operating system that may become a big thing in the future. Feeling Google was slapped in the face, just announced that Android 12 will not be used by Huawei, after turning the head, someone else took out a Hongmeng OS and directly labeled Google Fuchsia OS in its baby. Google, that’s embarrassing, right? What about Android? This just announced Android 12 ah! It can’t be like Huawei directly prompting users to upgrade to a new system, which is proof of the elimination of Android! Don’t talk to you? Now Huawei’s Internet of Everything operating system is already available. If it does not release Fushsia, it will quickly seize the market share. Especially when the Hongmeng ecosystem becomes a climate, it will be more difficult to regain the market share!
I personally think it is the US sanctions that have helped the Hongmun system. Why? First of all, although Hongmeng has been in development before, Huawei has not bet on the system, which means it has given some support to the project, but not to a great extent. Later, when the United States imposed sanctions, everyone felt that one day sooner or later, Android would not be used by Huawei, so Huawei greatly increased its support for the project of Hongmeng. The developers of the project were determined to break through the technical blockade of the United States, and Hongmeng greatly accelerated its pace of progress. Then the whole world knew how the US bullied Huawei, especially the Chinese people thought it was too bullying! Now that we have a new system, a lot of people want to do their part to support it.
Imagine, if the founding of sichuan (Trump) comrade not lift up high the flag of trade protection to under the pain killer, huawei can also purchase chip and other semiconductor products, Google GMS huawei also use the good, the mobile phone market nor malaise, make it a year eight billion, android 12 conference also invited together to…
So now Huawei launches a Harmony OS, will people still have the same attitude as now? Do you think this system is just a system developed by Huawei for its own business interests? What’s Android messing with? How many Huawei phone users will be willing to upgrade to the Hongmeng system? And everybody is in general to domestic goods doubt attitude, in difference not big even under the circumstance that small range leads everybody would rather spend more money to buy foreign goods. OPPO if still and a few days before the spray Hongmeng, we will also say: if OPPO is not suitable for Hongmeng later will not buy OPPO? Will major short video platforms such as Douyin Kuaishou and various news channels on CCTV continue to give Hongmeng so much exposure? Even with all this exposure, wouldn’t people be offended?
Listen to his speech I thought this is to let us develop the Hongmeng application, but I have done homework, looked at the grammar, feel with small program some similar, this front end will begin to roll again… Later, when the interview is estimated to ask HongMeng application knowledge…
Just then the product took out a Huawei Mate40 with the Hongmeng operating system from his pocket and asked: Has everyone upgraded the Hongmeng operating system? A: We all use iPhones… Sure, I use Android myself, but it’s not Huawei either, it’s cheap Realme (tears of no money), so I can’t upgrade either.
Product: Let me show you my boot animation:
I hope the animation of the letter “○” will be ported to our website, because many of our products also have a “○” in them!
Analysis of the animation
Now that the requirements are clear, it’s time to analyze the animation. When I saw it for the first time, it was amazing, because it felt like a hollow moon rising on the water, and the moon was reflected on the water. It reminded me of the sentence by Li Bai, the famous romantic poet of the Tang Dynasty: Raise a glass to invite the moon, and the shadow becomes three:
I couldn’t make out what it was for the first half of a second, until the full, hollow moon came up and I realized it was a letter: ○
Since it is a reflection, it is proved that the upper and lower displays are the same, but are reversed, so we have (including but not limited to) the following options:
-webkit-box-reflectAn attribute that specialises in reflections or silhouettesFirefox and IE are not supported)-moz-element()You can render parts of the DOM as imagesOnly Firefox supports it)- Copy the DOM and use it
transform: rotate(180deg);Turn it upside down
The last one is the most troublesome, but the most appropriate one, not only because it has the best compatibility, but because of the close observation of Hongmeng’s opening animation, the reflection is a certain degree of blur. -webkit-box-reflect can only control direction and opacity or gradient opacity, but cannot add blur effect. -moz-element() is very powerful, but it won’t work only with Firefox. Firefox has a very small share of the browser market, so the third option is not so elegant. First, we need to draw a semi-circular circle, how many ways can you think of?
The first:
Two semicircles, one large and one small. The background color of the smaller semicircles is the same as the background color of the page. Then cover the background color of the larger semicircles (just like the annular eclipse), so it looks like a circle (principle diagram) :
The second:
First write a semicircle, do not add background color, just add border, and finally remove the bottom border, so it looks like a semicircle (schematic diagram) :
The third:
Overflow: hidden; overflow: hidden; overflow: hidden; overflow: hidden; The part that is hidden and exposed (schematic diagram) :
Fourth:
Take the third overflow: hidden; Change to clip-path(schematic diagram) :
Fifth: Draw directly with SVG or Canvas (schematic diagram) :
Finally, I chose overflow: hidden; , because it is suitable for the effect of the ring rising, hiding the exposed part of the circle, and then controlling the position of the circle, it looks like a hollow moon rising from the sea (schematic diagram) :
Then put the two semicircle rings together (schematic diagram) :
After removing all the clutter of animation to show you how it works, the final result looks like this:
Is it a little bit like that? However, compared with the opening animation of Hongmeng, it is still much worse in details. For example, later I found another version of the opening animation of Hongmeng. If compared with the previous animation, the present version is more flexible in details:
First of all, we can see that this ○ has an external luminous effect, against a black background is particularly bright, the first version of the Hongmeng animation actually has external luminous, you can turn up to carefully compare, the version of the external luminous is not as obvious as this version, and the details are not as good as this version. That version is in the full appearance of the elimination of external light immediately, a little bit stiff. A closer look at this version reveals that the external light is disappearing in an imperceptible process. The external glow effect in CSS is easy to do by using a box-shadow on a black background to add a slightly blurred white shadow to the element and then finding the area of the shadow:
Overflow: hidden; The disadvantages of this scheme will be exposed. Since the area of our shadow in the four directions has exceeded the width and height of the outside box, it is hidden. We have to add padding padding to the outside box to solve this defect:
We also made our boxes white and thick, but if we look closely, we can see that the default box shadow only adds shadows on the outside of the element. Our box shadow does not have any shadows on the inside of the element.
And this effect uses filter: drop-shadow(); The same can be done, but because in the browser of the Google kernel, filter: drop-shadow(); Rendering on dynamically changing elements is not as good as box-shadows:
So we decided to go with the box-shadow solution, which looks pretty good now, but it’s still missing something. What’s missing is the blurring effect of the ring reflected on the water, because in everyday life, the reflected pattern on the water is usually a little bit more blurring than the real view:
This is because the surface of the water is not a completely flat surface, and even the slightest wind can produce waves:
It is these waves that cause the pattern reflected in the water to produce a certain degree of blur, and the finer the ripples, the finer the blur. As in the image above, the ripples are not thin enough and we can see the texture of the waves, as shown in this renderings of Hong Meng:
The texture of his waves is like a fingerprint… It is very difficult to write such a filter, but fortunately the opening animation of Hongmong does not see the texture of the water wave, so we can use the blur effect (Filter: blur(2px)). To write:
This effect is not even a bit different from the opening effect of Hongmeng, so although the animation of Hongmeng looks simple, like a ring rising from the water, it actually contains details that you can only know when you try it yourself.
Fuzzy details
Let’s compare the effect of the rising of the circle we made with the effect of the rising of the humongous circle:
Do you see? We use CSS fuzzy, fuzzy direction is up and down, left, right, southeast, northwest and other directions, and the fuzzy direction is along the Y axis is the fuzzy up and down direction, if it is not too obvious then let’s cut a picture to see:
This is the effect of ring not entirely at sunrise, this time should be able to more clearly see that below the surface of the ring by the fuzzy degree is higher and higher, and its fuzzy mainly along the two directions to fuzzy, fuzzy degree and in the downward direction than in the upward direction of fuzzy degree to be high on many, it will look more real, In order to give the user an illusion of rising in the water.
If blurred indiscriminately in all directions, it would not look at all like being on the water:
For this kind of orientation and gradients and varying degrees of blur, we can’t count on CSS. What is needed in this scenario is a lower level and more complex SVG filter!
Actually, a lot of CSS properties are from
SVGInspiration from there, like the ones we use a lot
pointer-events,
filterAnd so on, there are some less commonly used
clip-path,
mask, etc…
Since the blur provided by CSS can only be blurred in all directions, and in this case we want to blur along the Y-axis, the SVG code could be written like this:
<svg>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0 5"/>
</filter>
</svg>Don’t understand it doesn’t matter ah, you only need to remember that stdDeviation this attribute is control fuzzy can, if only to give a number, it is equivalent to a full range of fuzzy, with CSS filter: blur(); The effect is the same. But if you give two numbers, then the first number is the X-axis blur, and the second number is the Y-axis blur. Here we set the X axis blur to 0 and the Y axis blur to 5. Be careful not to add units (px) like we did when writing CSS. Just write numbers instead of units.
Because of the CSS filter properties
filterIt was originally from
SVGIt’s absorbed over there, so
You can use SVG filters in CSS! Here’s how to use it:
filter: url(#blur);We added an ID attribute to the SVG
tag, which can be written in the URL of the CSS filter. I don’t know if Google’s filter doesn’t render well on dynamically changing elements or something, but in Chrome it looks like this:
In Safari it looks like this:
It works best in Firefox:
That can not do ah, Google browser is the highest market share of the browser, the product side must not pass! But it’s not impossible. The problem with the Google browser is that there is a crack at the beginning. Margin-top: -2px; margin-top: -2px; To make the two semicircles come into contact with negative distance, do not use -18px or -2px for both semicircles:
The last step is to remove the blurring effect from the bottom half of the circle and make it actually a letter ○ :
Use requestAnimationFrame to dynamically change the stdDeviation attribute on
in SVG:
After the product manager looked very satisfied, said to see which of our products with ○ in the name, all to change this animation!
But actually, I think this animation is still a bit different from Hongmeng’s boot animation in many details. I have to admire the development of the engineering team, in this fleeting one or two seconds can contain so many small details. You can find a gap in the details, if free, let’s optimize it again.
The complete code
<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta </ span > </ p > < p style =" text-align: center; "> </ p > < p style =" text-align: center; "> < span style =" text-align: center; margin: 0; } html, body { height: 100% } body { background: black; display: flex; align-items: center; justify-content: center } .ul { position: relative; width: 100px; height: 50px; padding: 10px; list-style: none; overflow: hidden } .ul:first-of-type { padding-bottom: 0 } .ul:last-of-type { padding-top: 0; /* margin-top: -2px; */ /* animation: container-move.1s 1.2s forward */}. Harmony {position: absolute; top: 10px; left: 10px; width: 70px; height: 70px; border: 15px solid white; border-radius: 50%; transform: translateY(50%); box-shadow: 0 0 6px white, inset 0 0 6px white; Animation: move 1.2s forward}. Ul :last-of-type >. Harmony {top: auto; bottom: 10px; transform: translateY(-50%); filter: url(#blur) } svg { width: 0; height: 0 } @keyframes move { to { transform: none } } /* @keyframes container-move { to { margin-top: 0 } } */ </style> </head> <body> <div class="container"> <ul class="ul"> <li class="harmony"></li> </ul> <ul class="ul"> <li class="harmony"></li> </ul> </div> <svg> <filter id="blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="0 6"/> </filter> </svg> <script> const filter = document.querySelector('feGaussianBlur') const clearFilter = () => { const Value = parseFloat(filter.getAttribute('stdDeviation').split(' ')[1]) -0.06 if (value > 0 0) { filter.setAttribute('stdDeviation', `0 ${value}`) requestAnimationFrame(clearFilter) } else { return } } setTimeout(clearFilter, 1200) </script> </body> </html>The comment part of the code is to solve the Google browser has a gap in the code, you can unlock the comment and compare the effect in the Google browser. It works best when you open it in Firefox without unlocking the comment. The most important thing is that we can change the animation by changing the numbers in the code:
Which of these three do you think looks better? Of course, if you like HongMeng as a boot animation, must be the faster the better. Because this animation is probably just the first two times it looks a little bit fresh. But each boot to see such an animation, will soon be aesthetic fatigue, just hope to be able to quickly boot.
But if you throw away the application scenes, do you think the first one looks better when the blur slowly disappears, or the last one looks better when the blur is wiped away as it rises?
This article is published on the official account:
The front end doesn’t work