In the second lesson of the javaScript animation chapter, we will go over the getAttribute 2
and setAttribute methods that help you access the attributes of selected elements, as well 3
as add and change attributes. 4
At the same time, I will show the possibilities of more complex interactive control of the 5
animation when the mouse cursor moves, 6
and I will also demonstrate how to penetrate 7
the complex SVG attributes of elements using 8
regular expressions. 9
So let's get started. 10
The first example consists of one html file, the body element of which contains 2 main blocks: 11
an SVG container (with static vector graphics) and a javaScript instruction block 12
for constructing interactive animation. 13
The goal is to bind SVG objects to the mouse cursor, while aligning them in a line, one 14
end of which is static and located in the upper left corner of the browser, the other 15
is dynamic and attached to the mouse cursor. 16
In fact, the example itself is not as important as the methods with which we study, so I did 17
not show the animation right away. 18
Add 4 identical circles to the SVG container. 19
They differ only in color. 20
In fact, in our example there could be a hundred circles, but for this it would be wise to 21
use the method of constructing objects using a javaScript. 22
We will study constructors in the 4 lesson of this chapter, therefore we will restrict 23
ourselves to 4 lines of the SVG markup language. 24
The already familiar addEventListener method for handling mouse move events in a browser 25
window. 26
Further I will show how to build a cycle in which the centers of the circles will change 27
depending on the position of the mouse. 28
Only 4 circles and the first thing that comes to mind: do like this. 29
For each circle, set the center coordinates along the x axis and y axis by linking them 30
to the cursor position with the corresponding coefficient. 31
Using the getElementById method, select the desired element using its id. 32
Next, using the setAttribute method, change the attribute we need. 33
As you can see, the syntax is pretty simple. 34
As parameters: attribute name and assigned value. 35
Since we have a programming language tool, and there can be hundreds of circles, we change 36
this code fragment to a loop with a parameter. 37
Using the parameter, we form the id and change the attributes of the cx and cy center for 38
each circle. 39
As a coefficient for each circle, a multiplier is set depending on the cycle parameter. 40
To make it clearer, take a look at the result. 41
As you can see, all the positions of the circles are tied to the position of the mouse cursor. 42
The positions of the centers change with a change in the conversion coefficient. 43
As you can see, different elements can respond differently to user actions, resulting in 44
the simplest example lively animated interactive picture. 45
Let's continue. 46
In the second example, again 1 html file will contain all the code. 47
But this time, for starters, take a look at the animation. 48
The image is associated with the mouse cursor; when the cursor is positioned, stretching 49
and mirroring occur. 50
An image is selected in the code, which is located in the same directory as the source 51
html file. 52
You can take any picture and place it anywhere, without forgetting to indicate the path. 53
Now the SVG container is selected, which is nested for the external SVG container. 54
I placed the picture in the middle of the browser window, setting the Y attribute to 100. 55
Note that the original position of the picture is shifted along the X axis to the right, 56
despite the value of the x attribute being 0. 57
The offset of the original image is due to the outer group in which the transformation 58
is set using the transform attribute with the translate 450 parameter. 59
And we will work with a group whose id is group1. 60
We will get access to the transform attribute, change its scale parameter. 61
Again, listen to the mouse. 62
We start the group variable and get a reference to the SVG element into it - with group 1. 63
Next, the fun part begins. 64
Let's analyze this line of code in detail. 65
On the right is the syntax of the getAttribute method. 66
When we apply this method to our group variable, we get scale(1 1) as the result. 67
But I would like to get the value of the scaling factor along the x axis. 68
This is the first unit. 69
I draw your attention to the fact that in this example, you could immediately set the 70
initial value of the scale factor for the scale function. 71
But it is important for me that you see the possibilities of penetrating the SVG structure 72
using a javaScript. 73
It is possible to revive an existing vector graphics with its own settings. 74
If it change, the code would continue to work correctly. 75
So: how to get to the first variable of the scale function. 76
There is no built-in method in the javaScript, and the programming language does not know 77
anything about what functions there are as parameters of the SVG attribute - transform. 78
But in javaScript there are Regular expressions. 79
Regular expressions are patterns used to match character combinations in strings. 80
In JavaScript, regular expressions are also objects. 81
This is a very powerful tool. 82
And this topic deserves a separate course. 83
We cannot cover the whole theory of regular expressions, but we will analyze our case 84
in detail. 85
Here is the syntax exec method tests for a match in a string. 86
This method returns the matched text if it finds a match, otherwise it returns null. 87
The string to be searched acts as a parameter. 88
In our example, we examine the string obtained by the getAttribute method. 89
And this is a scale function with parameters 1 1. 90
The result of the exec method is an array containing the matched text if it finds a 91
match, otherwise it returns null. 92
We have the most important thing left: the regular expression object. 93
Its describes a pattern of characters. 94
Let's analyze this pattern in details. 95
Let us single out the parts that make up our pattern for clarity and better understanding. 96
The regex syntax has two parts: pattern between backslashes and flags. 97
Take another look at the line we are analyzing and trying to get to the first argument of 98
the scale function. 99
So: The border of the pattern is a forward slash. 100
Immediately, I note the backslash. 101
It is very important to understand the principle of its work: ordinary characters turn into 102
special ones. 103
But there are special characters that, when using the backslash, turn into regular ones. 104
You can see the full decoding of the values of regular expression symbols on the Internet, 105
quite a lot of materials have been created. 106
And we will continue. 107
Character analysis of the word scale. 108
Number of characters - any due to an asterisk. 109
Next, the operating mode is switched to analyze the brackets. 110
Let me remind you that the bracket is a special character and that the substring we are looking 111
for is enclosed in brackets. 112
d is a special character and requires escaping with a backslash - we are looking 113
for numbers from 0 to 9 with any number of repetitions. 114
As you can see, further in the template there is a space and again a sequence of numbers. 115
Next is the closing bracket and the end of the pattern. 116
Only the g flag remains. 117
Designating global search - all matches with the search pattern are processed. 118
For the preparation and analysis of regular expressions, I can advise you on the following site. 119
Copy our case and see an alternative analysis for a better understanding. 120
With regular expressions we are done, back to our code. 121
We create a new variable and write to it the first element of the array obtained as a result 122
of the previous action. 123
The parseInt function in this case will make an integer from the character expression. 124
The next variable will store the cursor position on the x axis. 125
The initial value will be 0. 126
Now the familiar setAttribute method. 127
The transform attribute is set to a character value. 128
The value is the sum of the characters and numbers in the new ScaleX variable. 129
Let me remind you that for javaScript this is the correct operation where the numbers 130
are converted to strings and the result is the sum of the strings. 131
So you see how the scale function uses the new ScaleX variable as its first argument. 132
It remains to perform 2 actions: compare the current cursor position with the one that 133
is stored and, based on the results, increase or decrease our scaling factor and mirror 134
image in the case of negative values. 135
The last thing I would like to show in this lesson is the convenience of using the console 136
to debug the program. 137
We will display the variables of interest to the console with the following command. 138
Press F12 in the browser. 139
At the bottom, you see the values of the variables storing the cursor position, as well as the 140
first argument to the scale function. 141
To be precise, for the function parseInt it was necessary to indicate the basis of 142
the calculus system - 10. 143
You should have noticed a lot of decimal places, 144
but these are features of the javaScript computational model. 145
At this point we will not stop now. 146
In the next lesson, we will analyze the binding to keys, as well as to the mouse cursor of 147
a three-dimensional cube, for which I promised in the second lesson of the second chapter 148
to consider the positioning of faces. 149
On this our lesson came to an end. 150
See you in the next lesson.