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