Shulou(Shulou.com)06/01 Report--

Most people don't understand the knowledge points of this article "How to suspend animated animation on iOS side of Weixin Mini Programs (Mini)," so I summarize the following contents for you. The contents are detailed, the steps are clear, and they have certain reference value. I hope you can gain something after reading this article. Let's take a look at this article "How to suspend animated animation on iOS side of Weixin Mini Programs" together.

animation-play-state

Let's introduce today's protagonist animation-play-state.

The animation-play-stateCSS property defines whether an animation runs or pauses. You can query it to determine if an animation is running. In addition, its value can be set to pause and resume playback of animations.

Resuming a paused animation starts at the time it was paused, not at the beginning of the animation sequence.

This is an experimental feature, but it's still powerful, as seen in MDN documentation. You can control/get the animation state of the element (paused, running)

Therefore, this animation parameter is used to control the playback state of the animation. Voiceover: You haven't thought about compatibility yet! Yes! This is the compatibility issue. This parameter is supported on chrome, but not on iOS devices... Sigh.

Handling on iOS

Of course, you can't use this parameter because of compatibility problems. Of course, you can't let every iOS user download a chrome browser. Of course...

So how do we solve this?? Use JS

Through the Window.getComputedStyle() method, we can get the CSSStyleDeclaration object of the element's real-time style, which represents the collection of CSS attribute key-value pairs. That is, we can use this method to get the current style value of an animated element.

PS: The values for the Window.getComputedStyle() method can be found on MDN, and are not expanded here. Give an example of syntax (from MDN)

let style = window.getComputedStyle(element, [pseudoElt]); copy code

So how exactly do you do that?

achieve

See the Penanimation-play-state by luogao (@luogao) onCodePen.

The code has been shown in the codepen preview above. If reality does not come, please click here:point_right:Roy Luo's codepen

A rough explanation is:

Add the style calculation attribute of the animated element to the wrapper element of the outer layer of the element, so that the animated element pauses.

So what about Weixin Mini Programs?

In fact, the first time I encountered this problem was when I was doing Mini programs. A player interface with an album image in the middle. Rotate in a circular vinyl frame. When playback stops, the picture stops rotating. Stop at the current rotation position

A seemingly simple requirement at the time, using animation-play-state, worked as expected, in the simulator.

Yes, smug thought that the requirements were completed, and the result was a test on the real machine (iOS), the original appearance was revealed.

The above is about the content of this article "How to pause animated animation on iOS side of Weixin Mini Programs." I believe everyone has a certain understanding. I hope the content shared by Xiao Bian will be helpful to everyone. If you want to know more relevant knowledge content, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.