Getting Started with the Mojs Animation Library: Explore the Shapes Module

In the previous tutorial, we used mojs to animate different HTML elements on the web page. We use this library mainly to animate div elements that look like squares or circles. However, you can use the Html module to animate various elements such as images or titles. If you do intend to use mojs to animate basic shapes, then you should probably use the Shape module from the library.

Shape module allows you to create basic shapes in the DOM using SVG. All you have to do is specify the type of shape you want to create and mojs takes care of the rest. This module also allows you to animate the different shapes you create.

In this tutorial we will cover the basics of the Shape module and how to use it to create and animate different shapes.

Creating shapes in Mojs

You need to instantiate the mojs Shape object to create different shapes. The object will accept different parameters that can be used to control the color, size, angle, etc. of the shape you create.

By default, any shape you create will use the document body as its parent. You can specify any other element as its parent using the parent attribute. You can also assign a class to any shape you create with the help of the className attribute. If you skip this property, the library will not assign any default class.

Mojs comes built-in with eight different shapes, so you can create them directly by setting a value for the shape property. You can set its value to circle to create a circle, rect to create a rectangle, and polygon to create a polygon. You can also draw straight lines by setting the value of shape to lines. If the shape value is cross, the library will draw two vertical lines; if the shape value is equal. Likewise, you can create zigzag lines by setting the property value to zigzag.

Shape objects also have a points attribute, which has different meanings for different shapes. It determines the total number of sides in the polygon shape and the total number of parallel lines in the equal shape. The points property can also be used to set the zigzag number of bends in the line.

As I mentioned before, mojs uses SVG to create all of these shapes. This means that Shape objects will also have some SVG-specific properties to control the appearance of these shapes. You can set the fill color of a mojs shape using the fill property. When no color is specified, the library will use the deepink color to fill the shape. Likewise, you can specify the stroke color of a shape using the Stroke property. When no stroke color is specified, mojs keeps the stroke transparent. You can control a shape's fill and stroke opacity using the fillOpacity and StrokeOpacity properties. They can be any value between 0 and 1.

Mojs also allows you to control other stroke-related properties of the shape. For example, you can use the StrokeDasharray property to specify a pattern of dashes and gaps in a stroke path. This property accepts strings and numbers as valid values. Its default value is zero, which means the stroke will be a solid line. The width of the stroke can be specified using the StrokeWidth property. By default, all strokes are 2px wide. You can specify the shape at different line endpoints using the StrokeLinecap property. Valid values ​​for StrokeLinecap are butt, round, and square.

By default, any shape you create will be placed in the center of its parent element. This is because the shape's left and right properties are both set to 50%. You can change the values ​​of these properties to place elements in different locations. Another way to control the position of a shape is with the help of the x and y properties. They determine how much the shape should move horizontally and vertically, respectively.

You can specify the radius of a shape using the radius property. This value is used to determine the size of a specific shape. You can also specify the size of a shape in a specific direction using radiusX and radiusY. Another way to control the size of a shape is with the help of the scale property. The default value for scale is 1, but you can set it to any other number you like. You can also use the scaleX and scaleY properties to scale a shape in a specific direction.

By default, the origin of all these transformations of a shape is its center. For example, if you rotate any shape by specifying a value for the angle property, the shape will be rotated about its center. If you want to rotate the shape around another point, you can specify it using the origin property. This property accepts a string as its value. Setting this to '0% 0%' will rotate, scale, or translate the shape around its upper left corner. Likewise, setting it to '50% 0%' will rotate, scale, or translate the shape around the center of its top edge.

You can use all of these properties we just discussed to create a variety of shapes. Here are some examples:

var circleA = new mojs.Shape({
  parent: ".container",
  shape: "circle",
  left: 0,
  fill: "orange",
  stroke: "black",
  strokeWidth: 5,
  isShowStart: true
});

var circleB = new mojs.Shape({
  parent: ".container",
  shape: "circle",
  left: 175,
  fill: "orange",
  stroke: "red",
  radiusX: 80,
  strokeWidth: 25,
  strokeDasharray: 2,
  isShowStart: true
});

var rectA = new mojs.Shape({
  parent: ".container",
  shape: "rect",
  left: 350,
  fill: "red",
  stroke: "black",
  strokeWidth: 5,
  isShowStart: true
});

var rectB = new mojs.Shape({
  parent: ".container",
  shape: "rect",
  left: 500,
  fill: "blue",
  stroke: "blue",
  radiusX: 40,
  radiusY: 100,
  strokeWidth: 25,
  strokeDasharray: 20,
  isShowStart: true
});

var polyA = new mojs.Shape({
  parent: ".container",
  shape: "polygon",
  top: 300,
  left: 0,
  fill: "yellow",
  stroke: "black",
  strokeWidth: 10,
  points: 8,
  isShowStart: true
});

var polyB = new mojs.Shape({
  parent: ".container",
  shape: "polygon",
  top: 350,
  left: 175,
  radiusX: 100,
  radiusY: 100,
  fill: "violet",
  stroke: "black",
  strokeWidth: 6,
  strokeDasharray: "15, 10, 5, 10",
  strokeLinecap: "round",
  points: 3,
  isShowStart: true
});

var lineA = new mojs.Shape({
  parent: ".container",
  shape: "cross",
  top: 350,
  left: 375,
  stroke: "red",
  strokeWidth: 40,
  isShowStart: true
});

var zigzagA = new mojs.Shape({
  parent: ".container",
  shape: "zigzag",
  top: 500,
  left: 50,
  fill: "transparent",
  stroke: "black",
  strokeWidth: 4,
  radiusX: 100,
  points: 10,
  isShowStart: true
});

var zigzagB = new mojs.Shape({
  parent: ".container",
  shape: "zigzag",
  top: 500,
  left: 350,
  fill: "blue",
  stroke: "transparent",
  radiusX: 100,
  points: 50,
  isShowStart: true
});

The shape created by the above code is shown in the CodePen demo below:

Animate shapes in Mojs

You can animate almost any property of the shape we discussed in the previous section. For example, you can animate the number of points in a polygon by specifying different initial and final values. You can also change the shape's origin from '50% 50%' to any other value, such as '75% 75%'. Other properties such as angle and scale behave the same as in the Html module.

The duration, delay and speed of different animations can be controlled using the duration, delay and speed properties respectively. The Repeat attribute also works the same way as in the Html module. If you only want the animation to play once, you can set it to 0. Likewise, you can set it to 3 to play the animation 4 times. All easing values ​​that are valid for the Html module are also valid for the Shape module.

The only difference between the animation capabilities of these two modules is that you cannot specify animation parameters individually for properties in the Shape module. All properties you animate will have the same duration, delay, repeat count, etc.

Here is an example where we animate the x position, scale and angle of a circle:

var circleA = new mojs.Shape({
  parent: ".container",
  shape: "circle",
  left: 175,
  fill: "red",
  stroke: "black",
  strokeWidth: 100,
  strokeDasharray: 18,
  isShowStart: true,
  x: {
    0: 300
  },
  angle: {
    0: 360
  },
  scale: {
    0.5: 1.5
  },
  duration: 1000,
  repeat: 10,
  isYoyo: true,
  easing: "quad.in"
});

One way to control the playback of different animations is to use the .then() method to specify a new set of properties to animate after the first animation sequence has completely completed. You can specify new initial and final values ​​for all animated properties in .then(). Here is an example:

var polyA = new mojs.Shape({
  parent: ".container",
  shape: "polygon",
  fill: "red",
  stroke: "black",
  isShowStart: true,
  points: 4,
  left: 100,
  x: {
    0: 500
  },
  strokeWidth: {
    5: 2
  },
  duration: 2000,
  easing: 'elastic.in'
}).then({
  strokeWidth: 5,
  points: {
    4: 3
  },
  angle: {
    0: 720
  },
  scale: {
    1: 2
  },
  fill: {
    'red': 'yellow'
  },
  duration: 1000,
  delay: 200,
  easing: 'elastic.out'
});

Final Thoughts

In this tutorial, we learned how to create different shapes using mojs and how to animate the properties of these shapes.

The

Shape module has all the animation capabilities of the Html module. The only difference is that properties cannot be animated individually. They can only be animated as a group. You can also control animation playback by using different methods to play, pause, stop, and resume the animation at any time. I detailed these methods in the first tutorial of this series.

If you have any questions about this tutorial, please feel free to leave a comment. In the next tutorial you will learn about the ShapeSwirl and stagger modules in mojs.

The above is the detailed content of Getting Started with the Mojs Animation Library: Explore the Shapes Module. For more information, please follow other related articles on the PHP Chinese website!