In the previous tutorial, we delved into using mojs to add animation effects to various HTML elements on a Webpage, mAInly focusing on square or circular divs. However, the HtML module in mojs allows you to animate different elements like images or headings. If your primary aim is to animate basic shapes, the Shape module in mojs is the way to go. This module lets you create and animate fundamental shapes using SVG within the DOM.
In this tutorial, we’ll cover the basics of the Shape module and dEMOnstrate how to create and animate diverse shapes.
To create shapes in mojs, you need to instantiate a `mojs.Shape` object. This object accepts several parameters that control aspects like color, size, and angles of the shape you want to create. By default, any shape you create will have the document body as its parent. You can specify another element as the parent by using the `parent` property. The `className` property can be used to assign a class to the shape you create; if omitted, no default class is assigned.
mojs offers eight built-in shapes, which can be directly created by setting the `shape` attribute’s value. For instance, setting it to ‘circle’ creates a circle, ‘rect’ for a rectangle, ‘polygon’ for a polygon, ‘line’ for a straight line, ‘cross’ for two vertical lines, and ‘zigzag’ for a zigzag line.
The `points` property has different meanings depending on the shape. It determines the number of sides for a polygon shape and the number of parallel lines for equal shapes. It also controls the number of bends for a zigzag line.
Since mojs uses SVG to create these shapes, some SVG-specific properties are available to control their appearance. The `fill` property sets the fill color of the mojs shape, defaulting to dark ink if not specified. Similarly, the `stroke` property defines the stroke color, with transparent strokes if left undefined. You can adjust the fill and stroke Transparency using `fillOpacity` and `strokeOpacity`, which accept values between 0 and 1.
Mojs also lets you control other stroke-related attributes. For example, `strokeDasharray` specifies a pattern of dashes and gaps in the stroke path. Its default value is 0, meaning a solid line. `strokeWidth` sets the stroke width, which defaults to 2px. `strokeLinecap` determines the shape of line endings and can be set to ‘butt’, ’round’, or ‘square’.
By default, any shape is placed at the center of its parent element, as both `left` and `right` properties are set to 50%. You can change these values or use `x` and `y` properties to position the element differently. The `radius` attribute specifies the radius for shapes, defining their size. You can use `radiusX` and `radiusY` to control size in specific directions. Alternatively, the `scale` property (defaulting to 1) can be adjusted to resize shapes, and `scaleX` and `scaleY` for scaling in particular directions.
The origin of all these transformations is the shape’s center by default. To rotate a shape A-Round a different point, use the `origin` property. Setting it to ‘0% 0%’ rotates, scales, or translates the shape around its top-left corner. ‘50% 0%’ would do so around the top edge center.
Here are some examples showcasing these properties:
“`javascript
var circleA = new mojs.Shape({
parent: ‘.container’,
shape: ‘circle’,
left: 0,
fill: ‘orange’,
stroke: ‘black’,
strokeWidth: 5,
isShowStart: true
});
// … more shape examples …
“`
These shapes are demonstrated in the accompanying CodePen demo.
You can animate nearly all the properties we discussed for shapes. For instance, you can animate the points in a polygon, change the origin from ‘50% 50%’, and manipulate angle and scale properties similar to the Html module. Use the `duration`, `delay`, `easing`, and `repeat` properties to control animations, just as you would in the Html module. The only difference is that in the Shape module, you cannot specify separate animation parameters for indiVidual properties. All animated properties share the same duration, delay, repeat count, etc.
Here’s an example animating the X position, scale, and angle of a circle:
“`javascript
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’
});
“`
To sequence animations, use the `.then()` method to specify new properties to animate once the first sequence is complete. Here’s an example:
“`javascript
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’
});
“`
In this tutorial, we’ve learned how to create different shapes with mojs and animate their properties. The Shape module shares all the animation capabilities of the Html module, except properties cannot be individually animated. Instead, they’re animated as a group. You can also control animation playback using methods like `.play()`, `.pause()`, `.stop()`, and `.resume()`, which were detailed in the first tutorial of this series.
If you have questions about this tutorial, feel free to comment. In the next tutorial, we’ll explore the ShapeSwirl and stagger modules in mojs. Stay tuned for more content by referring to related articles!
相关文章
