preface
In early February, I wrote an article titled “Exploring the Implementation Principle of Rolling Animation of Ipad Mini on Apple’s official website”, and found a wonderful color switching animation on the product page of Ipad Air when I visited Apple’s official website. At that time, I told brother Lei of the department, “I want to transfer this cool motion effect into our own business” (PS: FITURE Magic Mirror flagship edition also has a business requirement for color switching), later I was busy with business development and switched to another TAB and forgot to close this TAB.
This apple held 2022 spring conference on March 9th, I like everyone to apple’s products are full of expectation, conference got up very early in the day, the first time on the apple website product introduction page browsing, want to see always with cool interactive and dynamic effect eye-catching apple’s official website, in the new page will bring us what kind of fun. I was disappointed to find nothing new after browsing. Even the animation of the iPad Air, which I had promised to switch colors, had been reconfigured after the launch.
Thanks to my laziness, I forgot to close the TAB of the product introduction page of the old iPad Air, so I quickly went to Ctrl+S and saved the page code offline to my machine. You can feel the effect of this color switching animation of iPad Air through the following GIF.
In March, I focused on the learning of SVG technology and posted the article “Using Mind Mapping to Dissect SVG Technology” on Nuggets, so I took this opportunity to try to achieve this animation effect with SVG technology. When I saw this animation for the first time in the early stage, I looked at the page structure and found that Apple was also using SVG technology to implement it, but when I wanted to implement (Chao) and (xi) this effect, I looked at the source code and apple had changed it to Canvas to implement it.
To prepare the material
If we want to realize this animation of iPad Air on Apple’s official website, we need to analyze the components of this animation first. Through observation, it can be found that the animation is realized by scrolling to control the erasure position of the brush on the screen, similar to the effect of using the eraser to erase the blackboard on the blackboard when reading a book, but the erasure mode of each screen is different.
Therefore, based on the analysis idea, first of all, we need to prepare the path we want to erase and product pictures of several colors of iPad Air, and then use SVG tag to build the basic structure of the page. In SVG, we can use the
The official website of Apple uses Canvas for implementation, but I want to deliberately use SVG for implementation, so in order to obtain the complete path used by SVG, it is necessary to convert the path information into the complete path of path D attribute, and finally get the converted result after several twists and turns. However, there are still many defects in the path I converted, so I used Adobe Illustrator software to repair and adjust the flawed path, and finally obtained the following paths and codes.
The technical implementation
With the material preparation above, it is time to start the technical implementation of the animation. To achieve this animation effect, you can use clipping and masking techniques in SVG, both of which have the ability to show one part of an element and hide the other.
Using clipping? Or a mask?
By looking at it, we can see that the effect we want to achieve is very similar to the clipPath clipping shown below. We first lay out a page, then take the path we obtained above and crop it, and finally display the clipped part of our path. Everything was so beautiful that it didn’t take long for the animation to happen, and I actually fell into the pit.
While writing the code, I noticed that clipPath does support clipping by path, but it does not support animating the clipping effects on the path. This is a bit of a catch, and someone on StackOverflow raised the question (how to animate clipping paths defined in SVG elements?). So if you think back to the animation we were trying to achieve, the mouse scrolling would have to slowly use the path to erase the part we wanted to show, so clipPath’s approach wouldn’t work.
In SVG, clipPath clipping only uses the geometry of the graph, and visual elements are not applied, including but not limited to stroke and stroke styles, gradients and fill colors, etc
althoughclipPathThe graphics will only use geometric shapes, can no longer do path animation effects, but his ability is not to be underestimated, can be based ontransformTo achieve some really cool animations like the one below.
clipPathThe things that cannot be achieved will be handed over naturallymaskMask to implement, mask implementation ideas andclipPathThe idea of clipping is the same, but the difference is that the mask supports stroke, gradient, fill and other functions that cannot be used in clipping. With the support of these capabilities, the path in the mask can be ever-changing. The principle of a mask is the same as when the glass is fogged, we use our fingers to wipe an area on the glass, so that we can see the outside world through the area, as shown below.
Path animation implementation principle
Once you understand the core implementation principles above, you are ready to start animating. To animate a path in SVG, you need to use two core attributesstroke-dashoffsetandstroke-dasharray, the former is mainly responsible for setting the offset, and the latter is mainly responsible for setting the length of dotted lines and the gap between them, as shown below in Illustrator
stroke-dasharrayProperty, we can also implement a lot of nice dotted line effects
In the version I implemented, I set the width of the path to be right next to each other, so that there would be no gaps and there would be no leaks in the later screen, and then set the path manuallytransformOffset position and scale so that the path can be spread across the screen while being right in the center
With that in mind, we can calculate a scroll factor by listening for the scroll event, and then calculate the stroke-Dashoffset offset in each mask path in the CSS based on the scroll factor to achieve the animation.
Core structure code
Core style code
Final effect
Use clipping to achieve color switching versions
code
Final full version code -> DEMO code
The last
Due to the limited time and energy, combined with the recent surge in business development effort, to realize the Air switch the color of animation still exist some disadvantages, such as the text of the fading effect of unrealized, screen adaptation, the thickness of the width of the path no control problems, only the core of the animation part.
If this article has helped you, feel free to give a little support by clicking “like”!