Note: CSS, Canvas and SVG animate elements along circular paths, respectively

The CSS part

One of the first references to using CSS to move elements in circular paths came from Chapter 8 of Lea Verou’s book CSS Uncovering, Animation of Panning along circular Paths. Although there are some grammatical differences with the development of CSS, Moving an Element Along a Circle was a blog post written by The author back in 2012.

demo

The following is an example made according to its ideas, made some simple evolution, easy to demonstrate.

The key to understanding the above method is to understand the position of the element itself and the process of using transform-Origin: x y to find an appropriate center position for the rotation motion:

1. The mover (pink moving sphere) in the demo is set at twelve o ‘clock of the container and starts from there, so find the center of the circle:
   1. You need to puttransform-originOn the X-axis, the value is set to the center of mover itself, which is 50%;
   2. As for the Y-axis, since Mover is now at the top of the circle, the radius of the entire circle is exactly equal toyValue of (corresponding to the sphere motion to the left of the CodePen below);
2. With a slight change, the initial position of the mover itself is in the center of the circle, and the mover is expected to move in a circle around the container starting from the nine-point position. A simple idea is to first position the element to the nine-point direction through absolute positioning, and then set ittransform-origin.xThe value is exactly the radius²⁵⁰/₂= 125 px.yThe value on the axis is exactly half the size of Mover³⁰/₂= 15px (corresponding to the ball movement to the right of CodePen below).

The starting position of a circular motion

To understand what transform-origin does with transform: rotate(), we can annotate the animation declaration of.mover in CodePen and observe the starting position of the.mover itself.

Canvas part

Use canvas (

) to create the effect of objects moving along the circle, which can be understood at two levels:

1. The first is the general principle of canvas animation, that is, how to make the content on the canvas move;
2. The second was to deal with the more concrete subject of circles, involving simple mathematical problems such as the sine of trigonometric functions (sin), cosine (cos).

demo

General principles of Canvas animation

Use the

element to realize the movement of elements along the circular path. Due to the “canvas” characteristic of the

element itself, this process is somewhat similar to “flip book” animation: draw different states of the animation on different pages of the book, and then use the visual difference caused by fast page turning to achieve the target visual effect.

1. In the same way as turning a book,<canvas>It’s also usingRapid changes in element statePoor vision;
2. The difference is “turn the book” “turn the page” in<canvas>This side becomesClear (clear).

So the whole animation process is similar: first draw the first state, then wipe the canvas clean, then draw the second state, erase, and draw the third state… Until the end of the last state, erasure back to the first state, and so on.

With this in mind, there are three basic apis for creating a target animation effect using < Canvas > :

1. Animation itself is painting, in the sphere movement of the demand itself is more specific, need to usectx.arc()Method (as for how to draw circular motion, it will be written below);
2. The “erase” operation corresponds toctx.clearRect() ；
3. Control animation to keep drawing, erasing, drawing, erasing… This process, we need torequestAnimationFrame()Help.

Circular motion and trigonometric functions

Since the circle is drawn on the canvas itself, there is one more step than CSS and SVG: you need to calculate the circle and the specific position of the moving sphere in different states (the value of x and y on the coordinate axis), which requires trigonometry knowledge.

As shown in the figure above, there are several factors in the trigonometric relationship: The current Angle, the length of the sides adjacent to the angles (suppose x), the length of the sides opposite the angles (suppose y), and the hypotenuse (the radius of the circle r). From these factors, it can be obtained that sine is the ratio of the opposite side to the hypotenuse. Sine (Angle)= y/r, Cosine (cos) is the ratio of adjacent side to hypotenuse cos(Angle)= x/r. After analysis, it can be obtained:

1. rIs a given quantity, is the radius length of the circle we set ourselves;
2. Whether it issinorcos, JavaScript itself has provided us with a constant light can be used directly:Math.sin(angle) 和 Math.cos(angle);
3. The specific Angle can also be passedrequestAnimationFrame()Get: The circular motion itself is a cycle from 0 to 360°, so each time the method is called, exposing the current Angle will get the desired value.

Pseudo code to help understand

SVG part

Just as CSS cannot animate on its own with DOM elements, SVG itself cannot animate with SVG elements in two different ways (the specific syntax of both methods, and varying degrees of compatibility issues, will be explained later) :

1. The first approach uses another markup Language, SMIL (Synchronized Multimedia Integration Language). Instead of SVG using SMIL for animation, Rather, use the tags in SMIL to make SVG work.
2. The second one uses CSSoffset-pathThis attribute may seem strange because it was newly drafted to replace it with a deprecated onemotion-pathProperties.

Use SVG with animateMotion and mpath elements in SMIL

The SVG approach is more pleasing, or easier to understand, than the CSS approach above, which computes radii, angles, etc., to move along a circular path: you first have a path: Path, and then declare a mover to move along that path.

A few points need to be made in reference to the above source code

1. SMIL’s animation has two elements interacting, one is a moving path, the other is a moving object: a mover;
2. There is only one element in SMIL’s tag element that you can animate along the path, and that is animateMotion:
   1. The animateMotion declares that “we need to move along a path”, but does not specify where the path is. Time of movement (DUR), repeatCount, etc., can be written as attributes on the animateMotion element.
   2. But the specific “motion path” needs to be declared in the animateMotion using another flag, mpath;
3. When using SVG ring elements directly in HTML, you don’t need to use the path element and use a shortcut circle element instead, but in this case, due to the limitations of mpath in animateMotion, Instead of declaring the “path of motion” as a circle element, you need to convert the circle element to a path element.

To convert a circle or ellipse element to a path element in SVG, you can use the online tool SVG Circle/Ellipse to PATH Converter.

Motion direction control of animation

update 2017-08-19

³

1. KeyTimes: CSS3 @keyframes: 0, 10%, or 100% are represented by 0, 0.1, and 1, 0% ~ 100% is represented by 0 ~ 1;
2. KeyPoints: specifies the states of motion at each point in time specified by keyTimes. Different states are separated by a semicolon (;). Here, clockwise and counterclockwise are 1 respectively. 0 and 0; 1;
3. When you use keyTimes and keyPoints to declare the state of motion at a point in time, you also need to specify the calcMode attribute of the current SVG. This is not the same thing as the default calcMode value for animateMotion, but is not valid under Chrome. It only works if you change it to Linear.

A simple expansion of SMIL

Not only can SMIL implement the above path animation, but there is an example you must have seen: Animations of the geometry of elements in web pages, from rectangles -> circles -> triangles, as well as the colors of the geometry itself, are implemented using SVG and SMIL, known as SVG Morph4. In addition to animateMotion, there are animate, animateColor, animateTransform, and other attributes that can be used to animate objects.

SMIL compatibility issues

It can be seen from caniuse related support:

1. Except that IE has never supported SMIL, and Microsoft’s new son, Edge, doesn’t seem ready to implement it at all.
2. Chrome (Blink) V45 and Opear V32 have started to alert the console to pages using SMIL and will deprecate them in the future. SMIL, so the use of time still need to be careful, now Chrome and Opera which even if the effect is in place, but I don’t know one day announced to abandon support.

In the issue, Microsoft also replied that although it will not implement SMIL, it will implement Web Animation API and offset-path motion-path based on the new standard. The next part will introduce another implementation of SVG with offset-path. (The Web Animation APi has not done the learning work, but we will come back to supplement if we can implement path Animation.)

Use SVG with offset-path (motion-path) in CSS

Attribute name changes

For details, see Motion Path Module Level 1-changes. Offset-path is actually motion-path, but the name has been changed during evolution. Offset-distance corresponds to the past motion-offset.

The following sections use the new names offset-path and offset-distance.

A few points need to be made in reference to the above source code

1. Similar to SMIL’s implementation principle, CSS implementation is divided into two complementary elements, one is the path of movement: path, the other is the moving object: mover;
2. The path of the movement is moved to CSS for declaration. The W3C document defines paths with many keywords, such as Angle (), circle(), ellipse(), etc., but currently only path() can be used.
3. Specific animations are implemented using the existing @keyframes to change the value of the offset-distance attribute at different time points. The combination of offset-path and offset-distance here produces an effect much like the combination of stroke-Dasharray and stroke-dashoffset in SVG stroke animations. For details, please refer to notes: SVG Loop Animation (Progress bar) Principles.

Compatibility problems with offset-path

Not just offset-Path, but actually the entire Motion Path Module compatibility issue.

1. The Motion Path Module is poorly supported across browsers, almost exclusively in Chrome and Opera. In addition, take Chrome as an example, version 46+ to version 56+ before and after the name is also different, frommotion-*Changed tooffset-*;
2. From the perspective of mobile terminal excluding Microsoft series: CSS Motion Path, except Chrome in Blink, Webkit in Safari did not make any progress, even under consideration 6.

As for the Motion Path Module, WHEN I wanted to find out how many possibilities it has to realize the movement of elements along the circular Path, I found that although it is a very good animation property, it is really not compatible, so I can only wait for future development, and it is not recommended at present.

Version 46+ Chrome provides an example for developers to consider when implementing motion-Path support in browsers: CSS Motion Path Sample, but if you use Chrome Version 56+ to access this page, there is no effect.

For this sample to work properly, we need to replace all motion-* attributes with offset-*, fork one to CodePen, and do not make compatible processing between the two versions. You also need Version 56+ Chrome to see the scissor motion.

When looking for resources, I found that the demo of several articles on CSS-Tricks had no effect at all due to the name change. Similarly, you need to replace all motion-* attributes with offset-* to make the demos in those articles work.

---

1. CSS Secret Garden: Animating Along a Path is almost verbatim posted online for reference from Moving an Element Along a Circle. ↩
2. The SVG section does not expand on the basic concepts and uses of SVG itself, for exampleviewport,viewbox<g>, <use>, <defs>, <symbol>, etc.SVG Quick Start – Basic concepts”,”Knowledge of SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio”,”Understanding SVG Coordinate Systems and Transformations (Part 2) — The transform Attribute”,”Understanding SVG Coordinate Systems and Transformations (Part 3) — Express New Viewports”,”Structuring, Grouping, and Referencing in SVG — The<g>, <use>, <defs> and <symbol>Elements”.↩
3. SVG Animation Path Direction SVG animation path direction ↩
4. For more details on SVG Morph, see An Intro to SVG Animation with SMIL. ↩
5. For a SMILanimate,animateColor,animateTransformAnd so on, as summarized in the CSS-Tricks chapter,A Guide to SVG Animations (SMIL) “.↩
6. See WebKit Feature Status. ↩