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

This article introduces the example analysis of motion path animation Motion Path in css, the content is very detailed, interested friends can refer to, hope to be helpful to you.

There is a very interesting module in CSS-CSS Motion Path Module Level 1 [1], which translates to motion path.

What is the CSS Motion Path motion path?

What is the CSS Motion Path motion path? Using the attributes specified in this specification, we can control the animation in which the element changes its position according to a specific path. Moreover, this path can be a very complex path.

Before going any further into CSS Motion Path, let's take a look at the ability to use traditional CSS and how we can implement path animation.

CSS traditional way to realize straight Line path Animation

Previously, we wanted to move an object in a straight line from point A to point B. generally speaking, we can use attributes such as transform: translate (), top | left | bottom | right or margin that can change the position of the object.

A simple Demo:

Div {width: 60px; height: 60px; background: # 000; animation: move infinite 1s alternate linear;} @ keyframes move {100% {transform: translate (100px, 100px);}}

For a simple straight line motion from point A to point B, the effect is as follows:

CSS traditional way to realize Curve path Animation

Of course, CSS can also achieve some simple curve path animation. What if we want to move from point A to point B instead of a straight line, but a curve?

For some simple arc curve paths, you can still use some ingenious ways to achieve, take a look at the following example.

This time, we use two elements, and the child element is the ball that we want to be moved by the curve, but in fact, by setting the transform-origin of the parent element, we let the parent element make a transform: rotate () movement to drive the ball of the child element:

.g-container {position: relative; width: 10vmin; height: 70vmin; transform-origin: center 0; animation: rotate 1.5s infinite alternate;}. G-ball {position: absolute; width: 10vmin; height: 10vmin; border-radius: 50%; background: radial-gradient (circle, # fff, # 000); bottom: 0; left: 0 } @ keyframes rotate {100% {transform: rotate (90deg);}}

To make it easier to understand, I let the outline of the parent element appear in the course of the movement:

In this way, we can barely get a non-linear path motion animation, and its actual trajectory is a curve.

However, this is basically the limit that CSS can do before, using pure CSS method, there is no way to achieve more complex path animation, such as the following path animation:

Until now, we have a more powerful specification for doing this, that is, the protagonist of this article-CSS Motion Path.

Realizing straight Line path Animation with CSS Motion Path

The CSS Motion Path specification mainly consists of the following attributes:

Offset-path: receives a SVG path (similar to path in SVG and clip-path in CSS) and specifies the geometric path of motion

Offset-distance: controls the distance of the current element based on offset-path motion

Offset-position: specify the initial location of the offset-path

Offset-anchor: defines the anchor point of the element positioned along the offset-path. It is also easy to understand that the element of motion may not be a point, so you need to specify which point in the element is attached to the path for motion.

Offset-rotate: defines the direction of the element when positioning along the offset-path. Speaking human speech is the angle orientation of the element in the process of motion.

Next, we use Motion Path to implement a simple linear displacement animation.

Div {width: 60px; height: 60px; background: linear-gradient (# fc0, # f0c); offset-path: path ("M 00 L 100100"); offset-rotate: 0degg; animation: move 2000ms infinite alternate ease-in-out;} @ keyframes move {0% {offset-distance: 0%;} 100% {offset-distance: 100%;}}

Offset-path receives a path path for SVG, where the content of our path is a custom path path ("M00 L 100100"), which translates to move from 00:00 to the 100px 100px point.

Offset-path receives a SVG path that specifies the geometric path of the motion. Similar to path in SVG and clip-path in CSS, if you don't know much about this SVG Path, you can check the contents of the SVG path here: SVG path [2].

We will get the following results:

Animate the path of the element by controlling the offset-distance of the element from 0% to 100%.

Of course, the above animation is the most basic, I can make full use of the characteristics of path, add several intermediate keyframes, slightly modify the above code:

Div {/ / only change the motion path, others remain consistent offset-path: path ("M 00 L 100L 2000 L 300100L 4000L 500100L 6000L 700100L 8000"); animation: move 2000ms infinite alternate linear;} @ keyframes move {0% {offset-distance: 0%;} 100% {offset-distance: 100%;}}

The most important thing here is to use the L instruction in path to get a straight path like the following figure:

Image

The final effect is as follows, similar to adding multiple keyframes with transform: translate ():

You can poke the complete Demo here: CodePen Demo-- CSS Motion Path Demo [3]

Realizing Curve path Animation with CSS Motion Path

The above trajectories are all made up of straight lines, so let's take a look at how to animate the curve path using CSS Motion Path.

In fact, the principle is exactly the same, only need to add curve-related paths in offset-path: path ().

In SVG's Path, we take one of the methods to draw the curve-Bezier curve, such as the following path, where the path is d = "M 10 80 C 80 10, 130 10, 190 80 S 300 150,360 80":

Corresponding to such a continuous Bezier curve:

Apply the corresponding path to offset-path: path:

Div:nth-child (2) {width: 40px; height: 40px; background: linear-gradient (# fc0, # f0c); offset-path: path ('M 10 80 C 80 10,130 10190 80 S 300 150,360 80');} @ keyframes move {0% {offset-distance: 0%;} 100% {offset-distance: 100%;}}

You can get the following motion effects:

As you can see, the element moves along the path of the Bezier curve, and since there is no dead offset-rotate this time, the orientation of the element follows the direction of the path. (can be associated with driving, the front of the car has been following the road will change, driving the whole body angle change)

You can poke the complete Demo here: CodePen Demo-- CSS Motion Path Demo [4]

Understanding offset-anchor Motion Anchor

OK, so next, let's see how offset-anchor understands it.

Again in the DEMO above, we replace the small square with a triangle and draw the curve of the motion on the page, like this:

Where triangles are implemented through clip-path:

Width: 40px; height: 40px; clip-path: polygon (00,100% 50%, 0100%); background: linear-gradient (# fc0, # f0c)

Generally speaking, what moves along the curve is the center point of the object (analogy transform-origin), where we can change the anchor point of motion through offset-anchor, for example, we want the bottom of the triangle to move along the curve:

.ball {width: 40px; height: 40px; clip-path: polygon (00,100% 50%, 0100%); offset-path: path ('M 10 80 C 80 10,130 10190 80 S 300 150,360 80'); offset-anchor: 0 100%; background: linear-gradient (# fc0, # f0c); animation: move 3000ms infinite alternate linear;} @ keyframes move {0% {offset-distance: 0% } 100% {offset-distance: 100%;}}

After testing, it is written on the Can i use that the compatibility of the offset-anchor attribute is Chrome 79 + and Firefox 72, but it is only supported by Firefox and cannot take effect under Chrome.

You can poke the complete Demo here: CodePen Demo-- CSS Motion Path offset-anthor Demo [5]

Using Motion Path to make Animation effect

OK, we have basically gone over the principle above, and let's take a look at how the use of Motion Path can be applied in practice.

Using Motion Path to make Button effect

Using the motion path, we can make some simple button clicks. I've seen this button click effect on CodePen before:

The principle is to use background-radial to generate each dot, and control the displacement of the dot by controlling background-position. You can stamp the detailed Demo code here:

CodePen Demo-Bubbly button (Design by Gal Shir) [6]

However, the motion paths of small dots are basically straight lines. Using the Motion Path in this article, we can also achieve some similar effects. The core code is as follows: HTML, we use the Pug template here, and CSS uses SASS:

.btn

-for (var item0; I

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.