The idea comes from a god of Codepen, a group of robots with the same pace as god in the mass dance, but, but, open a look, pure JS implementation, JS! Anyway, I must try using SVG+CSS3 can make this effect, o(￣ヘ￣o #). That’s the premise.

1. Basic graphics and basic animation

A simple version of the robot is to first, because the focus is on work, so I can’t easy to simple, the style of the rectangle to make all capsule, but in order to facilitate after replacement arms and legs, I obediently put up each parts are split into different layers, and played a screw to the joint parts. Ok, ok, simple screw, with a black dot, ok? After drawing in AI, the product drops like this. (I added transparency to make it easier to overlay, but it turns out that transparency actually lends itself to design, so leave it at that)

Although there is no sense of science and technology, and the weird black spots all over the body make it look like eighteen bronze people or traditional Chinese medicine acupuncture point ah something, but it does not hinder our robot movement, come on, say hello to everyone, move the head first, walk.

The transform:rotate property is very simple. The only thing you need to note is that when you define the animation, you need to define transform-origin, which is the origin of the rotation. That’s why I put a bunch of black dots on the joint. Because in the SVG exported by my AI, the values of cx and CY at the center of

of each joint are the origin of rotation of each part.

Very good, very obedient. Now that it comes to life, silicon or carbon, it has a handsome name and a convenient name. Baymax can’t be called Baymax. Let’s call him Ice. “Hi~, I am Xiao Ice”

Ice, I’m ordering you to move your left leg and swing it wide.

Okay, now, let’s get the rest of the body moving.


This is? Each other, no one to talk to each other? Come on, you guys are a team. Now the problem is, when we define the CSS animation properties, the rotation origin of each movable shape is given a fixed value, so how can we make the origin of the last limb move with the swing of the upper limb?

SIML path animation solution

Do everything slowly, with the first disassembly, moving only the upper part of the limb.

In order to facilitate the view (now dazzled can not look directly), small ice listen to order, first suspend swing, right thigh with right calf move a. (Thigh and calf are defined by the same rotation animation, including the origin, which is uniformly defined as the origin of thigh rotation)

Is there anything wrong with it? There are! It doesn’t conform to the laws of physics. Let’s analyze it with a picture, and then we’ll get to the right answer.



<animateMotion rotate="auto">

Seems to have solved the problem. However, a new problem has emerged, that is, I want to shake the thigh in the process of natural leg swing, how to do?

3. Disassemble SVG and use a standalone coordinate system solution

To his path animation, positive solution here, because a SVG is a coordinate system, that is to say, we define the origin of its rotation is to follow the same rules, in a cube rotation animation, we have made, six, six SVG, inside their animation, mutual interference, the train of thought in our animation, still workable.








SVG{position:absolute}

The CSS for the motion is as follows (with only the right leg in place) :

@keyframes rightLeg{transform:rotate(0deg); transform:rotate(0deg); } 100%{transform:rotate(-90deg); } } .rightLeg{ animation:rightLeg 1s ease alternate infinite; Transform :rotate(-50deg); transform:rotate(-50deg); transform:rotate(-50deg); transform:rotate(-50deg); } 100%{transform:rotate(50deg); }}. RightLeg path{animation:rightLeg2 0.4s ease alternate infinite; Transform-origin: /* O2*/}Copy the code

The DOM part, thigh, elbow, head, and body is the same SVG, and the part that makes up the leg is a separate SVG

<svg class="rightLeg">
<path d=""/ > <! -- It could be path, it could be rect, whatever the AI exports. --> </svg>Copy the code

All right, Ice, listen. Now let’s take a look at a normal mechanical leg.


The rest is physical work, now the rest of the above ideas can be disassembled. I did some random definitions (random, but a bunch of them) and got the following animation.






Remember our jump animation, see this article juejin.cn/post/684490… Inside made some effects, such as “click click” clock, our small ice can also “click click” to move. When defining the animation, remove ease, Linear, or Cubic brazier from the values that define the speed and replace them with steps(), which will result in the ice without any lube. The n values in steps(n) can be defined as follows: It would be more rigorous to keep the frequency of the click bar consistent. I made the effect can see:

Or let’s do a cool assembly process. (The first part of the animation is the assembly of parts, that is, the transform: Translate animation is mainly used.)


If you feel that part of your body is too rigid and motionless, no problem, first clarify your thinking. Firstly, all parts move together, while the thigh rotates in its own coordinate system and the calf rotates in its own coordinate system. To do this, add a container

to the original DOM structure. Place all SVG in this

. CSS section original unchanged, add a body moving part definition as follows: 

 @keyframes base{        
 0%{transform:translateX(-100px); }
 100%{transform:translateX(100px); }
 }
.base{
animation:base 1s ease alternate infinite;
}Copy the code

Or add a little wiggle and you get the following effect:

On the basis of the basic kinetic effects, the robot Ice can be embellished in various ways, such as replacing parts of SVG, such as the following:



Remember to redefine the origin of rotation!

The key point about dynamic and effect linkage is the use of relative coordinate system, that is, if an element needs “automatic” and “common motion” (from rotation and revolution, make up your own word), the method is to put it into a separate SVG, each SVG has its own coordinate system, and the “automatic” component of the element follows its own coordinate system.

Once you’ve mastered this method, you can do anything you want with it. It’s easy to make a robot arm, right? How easy is it to build a ferris wheel? Interested partners can try their own. In addition, in addition, in fact, I know the best way is to use JS, such as our animation, js can get the coordinate value of the joint part, and then assign the value to the rotation origin, but, it is not not ~~ manual (*￣) ￣)