From 951cf3f2ec5792cfc55f4fc5c6c57a3c85fe242a Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Wed, 4 Mar 2015 23:09:07 +0300 Subject: [PATCH] renovations --- .../5-variables/variable-change.svg | 4 +- 1-js/2-first-steps/5-variables/variable.svg | 2 +- .../2-coding-style/code-style.svg | 48 +- .../4-object/object-person-empty.svg | 4 +- .../variable-copy-value.svg | 4 +- .../4-data-structures/7-array/array-speed.svg | 8 +- .../linked-list.svg | 16 +- .../9-array-iteration/reduce.svg | 4 +- .../6-memory-management/family-no-family.svg | 16 +- .../family-no-father-2.svg | 8 +- .../6-memory-management/family-no-father.svg | 12 +- .../6-memory-management/family.svg | 20 +- .../setinterval-interval.svg | 6 +- .../settimeout-interval.svg | 26 +- .../1-prototype/proto-animal-rabbit.svg | 4 +- .../native-prototypes-array-tostring.svg | 8 +- .../native-prototypes-classes.svg | 28 +- .../native-prototypes-object.svg | 8 +- .../class-inheritance-array-object.svg | 8 +- .../class-inheritance-rabbit-animal.svg | 8 +- .../class-inheritance-rabbit-run-animal.svg | 8 +- .../1-regexp-introduction/article.md | 10 +- .../document-client-width-height.svg | 12 +- 2-ui/1-document/17-coordinates/coords.svg | 24 +- .../4-traversing-dom/dom-links-elements.svg | 12 +- .../1-document/4-traversing-dom/dom-links.svg | 12 +- .../4-event-bubbling/event-order-bubbling.svg | 6 +- .../mouseover-mouseout-from-outside.svg | 2 +- .../mouseover-mouseout-over-elems.svg | 2 +- .../mouseover-mouseout.svg | 4 +- .../mouseover-to-child.svg | 2 +- 4-ajax/4-xhr-forms/article.md | 23 +- .../5-xhr-crossdomain/xhr-another-domain.svg | 8 +- 4-ajax/5-xhr-crossdomain/xhr-preflight.svg | 16 +- 5-animation/1-bezier/article.md | 35 +- 5-animation/1-bezier/bezier-car.svg | 32 + 5-animation/1-bezier/bezier-letter.svg | 50 ++ 5-animation/1-bezier/bezier-vase.svg | 49 ++ 5-animation/1-bezier/bezier2.png | Bin 596 -> 0 bytes 5-animation/1-bezier/bezier2.svg | 20 + 5-animation/1-bezier/bezier3-draw1.png | Bin 6296 -> 0 bytes 5-animation/1-bezier/bezier3-draw1.svg | 37 + 5-animation/1-bezier/bezier3-draw2.png | Bin 5715 -> 0 bytes 5-animation/1-bezier/bezier3-draw2.svg | 38 + 5-animation/1-bezier/bezier3-e.png | Bin 2144 -> 0 bytes 5-animation/1-bezier/bezier3-e.svg | 25 + 5-animation/1-bezier/bezier3.png | Bin 1286 -> 0 bytes 5-animation/1-bezier/bezier3.svg | 24 + 5-animation/1-bezier/bezier4-e.png | Bin 1941 -> 0 bytes 5-animation/1-bezier/bezier4-e.svg | 29 + 5-animation/1-bezier/bezier4.png | Bin 1293 -> 0 bytes 5-animation/1-bezier/bezier4.svg | 28 + 5-animation/1-bezier/car.jpg | Bin 6478 -> 0 bytes 5-animation/1-bezier/letter_m.png | Bin 5435 -> 0 bytes 5-animation/1-bezier/pause.png | Bin 0 -> 2029 bytes 5-animation/1-bezier/vase.png | Bin 2965 -> 0 bytes .../1-animate-logo-css/solution.md | 34 +- .../solution.view/index.html | 94 +-- .../1-animate-logo-css/source.view/animate.js | 92 --- .../1-animate-logo-css/source.view/index.html | 31 +- .../1-animate-logo-css/task.md | 12 +- .../2-animate-logo-bezier-css/bezier-up.svg | 31 + .../2-animate-logo-bezier-css/solution.md | 7 + .../solution.view/index.html | 32 + .../2-animate-logo-bezier-css/task.md | 10 + 5-animation/2-css-transitions/article.md | 457 ++++++++--- .../2-css-transitions/bezier-linear.svg | 20 + .../2-css-transitions/bezier-train-over.svg | 45 ++ .../2-css-transitions/boat.view/index.html | 52 +- .../2-css-transitions/boat.view/style.css | 13 + .../digits-negative-delay.view/index.html | 13 + .../digits-negative-delay.view/script.js | 5 + .../digits-negative-delay.view/style.css | 13 + .../2-css-transitions/digits.view/index.html | 13 + .../2-css-transitions/digits.view/script.js | 3 + .../2-css-transitions/digits.view/style.css | 13 + 5-animation/2-css-transitions/ease-in-out.png | Bin 1386 -> 0 bytes 5-animation/2-css-transitions/ease-in-out.svg | 30 + 5-animation/2-css-transitions/ease-in.png | Bin 1505 -> 0 bytes 5-animation/2-css-transitions/ease-in.svg | 28 + 5-animation/2-css-transitions/ease-out.png | Bin 1530 -> 0 bytes 5-animation/2-css-transitions/ease-out.svg | 28 + 5-animation/2-css-transitions/ease.png | Bin 1551 -> 0 bytes 5-animation/2-css-transitions/ease.svg | 30 + .../step-end.view/index.html | 19 + .../2-css-transitions/step-end.view/style.css | 13 + .../2-css-transitions/step.view/index.html | 19 + .../2-css-transitions/step.view/style.css | 13 + 5-animation/2-css-transitions/train-curve.png | Bin 1501 -> 0 bytes 5-animation/2-css-transitions/train-curve.svg | 30 + .../train-linear.view/index.html | 12 + .../train-linear.view/style.css | 9 + .../train-over.view/index.html | 12 + .../train-over.view/style.css | 9 + .../2-css-transitions/train.view/index.html | 12 + .../2-css-transitions/train.view/style.css | 9 + .../solution.md | 25 +- .../1-animate-ball/solution.view/index.html | 50 ++ .../1-animate-ball/solution.view/style.css | 10 + .../source.view/index.html | 10 +- .../1-animate-ball/source.view/style.css | 10 + .../task.md | 4 +- .../1-carousel-animated/solution.md | 2 - .../solution.view/animate.js | 92 --- .../solution.view/index.html | 87 -- .../solution.view/style.css | 52 -- .../1-carousel-animated/task.md | 10 - .../2-animate-ball-hops/solution.md | 30 + .../solution.view/index.html | 59 ++ .../solution.view/style.css | 10 + .../task.md | 6 +- .../3-js-animation/2-animate-logo/solution.md | 5 - .../2-animate-logo/solution.view/animate.js | 92 --- .../2-animate-logo/solution.view/index.html | 52 -- .../2-animate-logo/source.view/animate.js | 92 --- .../2-animate-logo/source.view/index.html | 31 - .../3-js-animation/2-animate-logo/task.md | 12 - .../3-animate-ball/solution.view/animate.js | 91 --- .../3-animate-ball/solution.view/index.html | 50 -- .../3-animate-ball/source.view/animate.js | 91 --- .../3-animate-ball/source.view/index.html | 22 - .../4-animate-ball-hops/solution.md | 35 - .../solution.view/animate.js | 91 --- .../solution.view/index.html | 58 -- .../source.view/animate.js | 91 --- 5-animation/3-js-animation/article.md | 765 +++++++----------- .../3-js-animation/back.view/index.html | 33 + .../3-js-animation/back.view/style.css | 14 + 5-animation/3-js-animation/bezier-linear.svg | 20 + .../bounce-easeinout.view/index.html | 50 ++ .../bounce-easeinout.view/style.css | 14 + .../bounce-easeout.view/index.html | 46 ++ .../bounce-easeout.view/style.css | 14 + .../3-js-animation/bounce.view/index.html | 37 + .../3-js-animation/bounce.view/style.css | 14 + .../3-js-animation/circ.view/index.html | 33 + .../3-js-animation/circ.view/style.css | 14 + .../3-js-animation/elastic.view/index.html | 33 + .../3-js-animation/elastic.view/style.css | 14 + .../3-js-animation/move-raf.view/index.html | 51 ++ .../3-js-animation/move.view/index.html | 32 +- .../3-js-animation/move100.view/index.html | 30 - .../3-js-animation/quad.view/index.html | 33 + .../3-js-animation/quad.view/style.css | 14 + .../3-js-animation/quint.view/index.html | 33 + .../3-js-animation/quint.view/style.css | 14 + .../3-js-animation/text.view/index.html | 49 ++ .../3-js-animation/text.view/style.css | 11 + .../3-js-animation/width.view/animate.js | 20 + .../3-js-animation/width.view/index.html | 33 +- 5-animation/index.md | 2 +- figures.sketch | Bin 7233536 -> 7749632 bytes 152 files changed, 2527 insertions(+), 2179 deletions(-) create mode 100644 5-animation/1-bezier/bezier-car.svg create mode 100644 5-animation/1-bezier/bezier-letter.svg create mode 100644 5-animation/1-bezier/bezier-vase.svg delete mode 100644 5-animation/1-bezier/bezier2.png create mode 100644 5-animation/1-bezier/bezier2.svg delete mode 100644 5-animation/1-bezier/bezier3-draw1.png create mode 100644 5-animation/1-bezier/bezier3-draw1.svg delete mode 100644 5-animation/1-bezier/bezier3-draw2.png create mode 100644 5-animation/1-bezier/bezier3-draw2.svg delete mode 100644 5-animation/1-bezier/bezier3-e.png create mode 100644 5-animation/1-bezier/bezier3-e.svg delete mode 100644 5-animation/1-bezier/bezier3.png create mode 100644 5-animation/1-bezier/bezier3.svg delete mode 100644 5-animation/1-bezier/bezier4-e.png create mode 100644 5-animation/1-bezier/bezier4-e.svg delete mode 100644 5-animation/1-bezier/bezier4.png create mode 100644 5-animation/1-bezier/bezier4.svg delete mode 100644 5-animation/1-bezier/car.jpg delete mode 100644 5-animation/1-bezier/letter_m.png create mode 100644 5-animation/1-bezier/pause.png delete mode 100644 5-animation/1-bezier/vase.png delete mode 100644 5-animation/2-css-transitions/1-animate-logo-css/source.view/animate.js create mode 100644 5-animation/2-css-transitions/2-animate-logo-bezier-css/bezier-up.svg create mode 100644 5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.md create mode 100644 5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.view/index.html create mode 100644 5-animation/2-css-transitions/2-animate-logo-bezier-css/task.md create mode 100644 5-animation/2-css-transitions/bezier-linear.svg create mode 100644 5-animation/2-css-transitions/bezier-train-over.svg create mode 100644 5-animation/2-css-transitions/boat.view/style.css create mode 100644 5-animation/2-css-transitions/digits-negative-delay.view/index.html create mode 100644 5-animation/2-css-transitions/digits-negative-delay.view/script.js create mode 100644 5-animation/2-css-transitions/digits-negative-delay.view/style.css create mode 100644 5-animation/2-css-transitions/digits.view/index.html create mode 100644 5-animation/2-css-transitions/digits.view/script.js create mode 100644 5-animation/2-css-transitions/digits.view/style.css delete mode 100644 5-animation/2-css-transitions/ease-in-out.png create mode 100644 5-animation/2-css-transitions/ease-in-out.svg delete mode 100644 5-animation/2-css-transitions/ease-in.png create mode 100644 5-animation/2-css-transitions/ease-in.svg delete mode 100644 5-animation/2-css-transitions/ease-out.png create mode 100644 5-animation/2-css-transitions/ease-out.svg delete mode 100644 5-animation/2-css-transitions/ease.png create mode 100644 5-animation/2-css-transitions/ease.svg create mode 100644 5-animation/2-css-transitions/step-end.view/index.html create mode 100644 5-animation/2-css-transitions/step-end.view/style.css create mode 100644 5-animation/2-css-transitions/step.view/index.html create mode 100644 5-animation/2-css-transitions/step.view/style.css delete mode 100644 5-animation/2-css-transitions/train-curve.png create mode 100644 5-animation/2-css-transitions/train-curve.svg create mode 100644 5-animation/2-css-transitions/train-linear.view/index.html create mode 100644 5-animation/2-css-transitions/train-linear.view/style.css create mode 100644 5-animation/2-css-transitions/train-over.view/index.html create mode 100644 5-animation/2-css-transitions/train-over.view/style.css create mode 100644 5-animation/2-css-transitions/train.view/index.html create mode 100644 5-animation/2-css-transitions/train.view/style.css rename 5-animation/3-js-animation/{3-animate-ball => 1-animate-ball}/solution.md (68%) create mode 100644 5-animation/3-js-animation/1-animate-ball/solution.view/index.html create mode 100644 5-animation/3-js-animation/1-animate-ball/solution.view/style.css rename 5-animation/3-js-animation/{4-animate-ball-hops => 1-animate-ball}/source.view/index.html (57%) create mode 100644 5-animation/3-js-animation/1-animate-ball/source.view/style.css rename 5-animation/3-js-animation/{3-animate-ball => 1-animate-ball}/task.md (67%) delete mode 100644 5-animation/3-js-animation/1-carousel-animated/solution.md delete mode 100644 5-animation/3-js-animation/1-carousel-animated/solution.view/animate.js delete mode 100644 5-animation/3-js-animation/1-carousel-animated/solution.view/index.html delete mode 100644 5-animation/3-js-animation/1-carousel-animated/solution.view/style.css delete mode 100644 5-animation/3-js-animation/1-carousel-animated/task.md create mode 100644 5-animation/3-js-animation/2-animate-ball-hops/solution.md create mode 100644 5-animation/3-js-animation/2-animate-ball-hops/solution.view/index.html create mode 100644 5-animation/3-js-animation/2-animate-ball-hops/solution.view/style.css rename 5-animation/3-js-animation/{4-animate-ball-hops => 2-animate-ball-hops}/task.md (71%) delete mode 100644 5-animation/3-js-animation/2-animate-logo/solution.md delete mode 100644 5-animation/3-js-animation/2-animate-logo/solution.view/animate.js delete mode 100644 5-animation/3-js-animation/2-animate-logo/solution.view/index.html delete mode 100644 5-animation/3-js-animation/2-animate-logo/source.view/animate.js delete mode 100644 5-animation/3-js-animation/2-animate-logo/source.view/index.html delete mode 100644 5-animation/3-js-animation/2-animate-logo/task.md delete mode 100644 5-animation/3-js-animation/3-animate-ball/solution.view/animate.js delete mode 100644 5-animation/3-js-animation/3-animate-ball/solution.view/index.html delete mode 100644 5-animation/3-js-animation/3-animate-ball/source.view/animate.js delete mode 100644 5-animation/3-js-animation/3-animate-ball/source.view/index.html delete mode 100644 5-animation/3-js-animation/4-animate-ball-hops/solution.md delete mode 100644 5-animation/3-js-animation/4-animate-ball-hops/solution.view/animate.js delete mode 100644 5-animation/3-js-animation/4-animate-ball-hops/solution.view/index.html delete mode 100644 5-animation/3-js-animation/4-animate-ball-hops/source.view/animate.js create mode 100644 5-animation/3-js-animation/back.view/index.html create mode 100644 5-animation/3-js-animation/back.view/style.css create mode 100644 5-animation/3-js-animation/bezier-linear.svg create mode 100644 5-animation/3-js-animation/bounce-easeinout.view/index.html create mode 100644 5-animation/3-js-animation/bounce-easeinout.view/style.css create mode 100644 5-animation/3-js-animation/bounce-easeout.view/index.html create mode 100644 5-animation/3-js-animation/bounce-easeout.view/style.css create mode 100644 5-animation/3-js-animation/bounce.view/index.html create mode 100644 5-animation/3-js-animation/bounce.view/style.css create mode 100644 5-animation/3-js-animation/circ.view/index.html create mode 100644 5-animation/3-js-animation/circ.view/style.css create mode 100644 5-animation/3-js-animation/elastic.view/index.html create mode 100644 5-animation/3-js-animation/elastic.view/style.css create mode 100644 5-animation/3-js-animation/move-raf.view/index.html delete mode 100644 5-animation/3-js-animation/move100.view/index.html create mode 100644 5-animation/3-js-animation/quad.view/index.html create mode 100644 5-animation/3-js-animation/quad.view/style.css create mode 100644 5-animation/3-js-animation/quint.view/index.html create mode 100644 5-animation/3-js-animation/quint.view/style.css create mode 100644 5-animation/3-js-animation/text.view/index.html create mode 100644 5-animation/3-js-animation/text.view/style.css create mode 100644 5-animation/3-js-animation/width.view/animate.js diff --git a/1-js/2-first-steps/5-variables/variable-change.svg b/1-js/2-first-steps/5-variables/variable-change.svg index b28c49be..472eb447 100644 --- a/1-js/2-first-steps/5-variables/variable-change.svg +++ b/1-js/2-first-steps/5-variables/variable-change.svg @@ -11,13 +11,13 @@ - + "World!" - + "Hello!" diff --git a/1-js/2-first-steps/5-variables/variable.svg b/1-js/2-first-steps/5-variables/variable.svg index 44fa8557..2199e553 100644 --- a/1-js/2-first-steps/5-variables/variable.svg +++ b/1-js/2-first-steps/5-variables/variable.svg @@ -12,7 +12,7 @@ - + "Hello!" diff --git a/1-js/3-writing-js/2-coding-style/code-style.svg b/1-js/3-writing-js/2-coding-style/code-style.svg index 85eaf5f2..4eeecc6c 100644 --- a/1-js/3-writing-js/2-coding-style/code-style.svg +++ b/1-js/3-writing-js/2-coding-style/code-style.svg @@ -22,65 +22,65 @@ Между именем функции и скобкой ( нет пробела - - + + Отступ 2 пробела - - + + Пробел после for - - + + } else { без перевода строки - - + + Пробелы вокруг вложенного вызова - - - - + + + + пустая строка между логическими блоками - - + + длина строки не более 80 символов - - + + точка с запятой ; обязательна - - + + Фигурная скобка { на той же строке, через пробел - - - - + + + + Пробел между параметрами - - + + Пробел между параметрами diff --git a/1-js/4-data-structures/4-object/object-person-empty.svg b/1-js/4-data-structures/4-object/object-person-empty.svg index 20b239c9..29ef8bf6 100644 --- a/1-js/4-data-structures/4-object/object-person-empty.svg +++ b/1-js/4-data-structures/4-object/object-person-empty.svg @@ -13,8 +13,8 @@ person - - + + \ No newline at end of file diff --git a/1-js/4-data-structures/6-object-reference/variable-copy-value.svg b/1-js/4-data-structures/6-object-reference/variable-copy-value.svg index f28a7c20..8892af98 100644 --- a/1-js/4-data-structures/6-object-reference/variable-copy-value.svg +++ b/1-js/4-data-structures/6-object-reference/variable-copy-value.svg @@ -12,7 +12,7 @@ - + "Привет!" @@ -27,7 +27,7 @@ - + "Привет!" diff --git a/1-js/4-data-structures/7-array/array-speed.svg b/1-js/4-data-structures/7-array/array-speed.svg index d6d5b45f..227243c6 100644 --- a/1-js/4-data-structures/7-array/array-speed.svg +++ b/1-js/4-data-structures/7-array/array-speed.svg @@ -8,18 +8,18 @@ - + 0 - + 1 - + 2 - + 3 diff --git a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list.svg b/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list.svg index 5756498b..cb49665d 100644 --- a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list.svg +++ b/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list.svg @@ -13,8 +13,8 @@ 1 - - + + next @@ -25,8 +25,8 @@ 2 - - + + next @@ -37,8 +37,8 @@ 3 - - + + next @@ -49,8 +49,8 @@ 4 - - + + next diff --git a/1-js/4-data-structures/9-array-iteration/reduce.svg b/1-js/4-data-structures/9-array-iteration/reduce.svg index 0c48980e..aadaaeae 100644 --- a/1-js/4-data-structures/9-array-iteration/reduce.svg +++ b/1-js/4-data-structures/9-array-iteration/reduce.svg @@ -56,8 +56,8 @@ current 5 - - + + 0+1+2+3+4+5 = 15 diff --git a/1-js/5-functions-closures/6-memory-management/family-no-family.svg b/1-js/5-functions-closures/6-memory-management/family-no-family.svg index 57f9ef73..8a6b18b5 100644 --- a/1-js/5-functions-closures/6-memory-management/family-no-family.svg +++ b/1-js/5-functions-closures/6-memory-management/family-no-family.svg @@ -6,8 +6,8 @@ - - + + window @@ -42,15 +42,15 @@ Object - - - - + + + + husband - - + + family: null diff --git a/1-js/5-functions-closures/6-memory-management/family-no-father-2.svg b/1-js/5-functions-closures/6-memory-management/family-no-father-2.svg index 82b1993a..19f25a06 100644 --- a/1-js/5-functions-closures/6-memory-management/family-no-father-2.svg +++ b/1-js/5-functions-closures/6-memory-management/family-no-father-2.svg @@ -30,10 +30,10 @@ Object - - - - + + + + \ No newline at end of file diff --git a/1-js/5-functions-closures/6-memory-management/family-no-father.svg b/1-js/5-functions-closures/6-memory-management/family-no-father.svg index f26e7e8f..3225b007 100644 --- a/1-js/5-functions-closures/6-memory-management/family-no-father.svg +++ b/1-js/5-functions-closures/6-memory-management/family-no-father.svg @@ -40,12 +40,12 @@ Object - - - - - - + + + + + + diff --git a/1-js/5-functions-closures/6-memory-management/family.svg b/1-js/5-functions-closures/6-memory-management/family.svg index 80f53e05..0f34310c 100644 --- a/1-js/5-functions-closures/6-memory-management/family.svg +++ b/1-js/5-functions-closures/6-memory-management/family.svg @@ -6,8 +6,8 @@ - - + + window @@ -45,17 +45,17 @@ Object - - - - - - + + + + + + husband - - + + \ No newline at end of file diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/setinterval-interval.svg b/1-js/7-js-misc/3-setTimeout-setInterval/setinterval-interval.svg index 820dc80e..aa5e3ab9 100644 --- a/1-js/7-js-misc/3-setTimeout-setInterval/setinterval-interval.svg +++ b/1-js/7-js-misc/3-setTimeout-setInterval/setinterval-interval.svg @@ -11,19 +11,19 @@ func(1) - + func(2) - + func(3) - + 100 diff --git a/1-js/7-js-misc/3-setTimeout-setInterval/settimeout-interval.svg b/1-js/7-js-misc/3-setTimeout-setInterval/settimeout-interval.svg index 512dbf7e..f0895fed 100644 --- a/1-js/7-js-misc/3-setTimeout-setInterval/settimeout-interval.svg +++ b/1-js/7-js-misc/3-setTimeout-setInterval/settimeout-interval.svg @@ -11,19 +11,19 @@ func(1) - + func(2) - + func(3) - + @@ -33,16 +33,16 @@ 100 - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/1-js/9-prototypes/1-prototype/proto-animal-rabbit.svg b/1-js/9-prototypes/1-prototype/proto-animal-rabbit.svg index d6bf194d..5acdf9e3 100644 --- a/1-js/9-prototypes/1-prototype/proto-animal-rabbit.svg +++ b/1-js/9-prototypes/1-prototype/proto-animal-rabbit.svg @@ -20,8 +20,8 @@ rabbit - - + + __proto__ diff --git a/1-js/9-prototypes/3-native-prototypes/native-prototypes-array-tostring.svg b/1-js/9-prototypes/3-native-prototypes/native-prototypes-array-tostring.svg index 998745f2..4ad00ffa 100644 --- a/1-js/9-prototypes/3-native-prototypes/native-prototypes-array-tostring.svg +++ b/1-js/9-prototypes/3-native-prototypes/native-prototypes-array-tostring.svg @@ -23,13 +23,13 @@ Object.prototype - - + + __proto__ - - + + __proto__ diff --git a/1-js/9-prototypes/3-native-prototypes/native-prototypes-classes.svg b/1-js/9-prototypes/3-native-prototypes/native-prototypes-classes.svg index f4dc1d90..b24345b7 100644 --- a/1-js/9-prototypes/3-native-prototypes/native-prototypes-classes.svg +++ b/1-js/9-prototypes/3-native-prototypes/native-prototypes-classes.svg @@ -14,13 +14,13 @@ Object.prototype - - + + __proto__ - - + + null @@ -57,10 +57,10 @@ __proto__ - - - - + + + + [1, 2, 3] @@ -75,18 +75,18 @@ 5 - - + + __proto__ - - + + __proto__ - - + + __proto__ diff --git a/1-js/9-prototypes/3-native-prototypes/native-prototypes-object.svg b/1-js/9-prototypes/3-native-prototypes/native-prototypes-object.svg index 898b906e..8b9d9fef 100644 --- a/1-js/9-prototypes/3-native-prototypes/native-prototypes-object.svg +++ b/1-js/9-prototypes/3-native-prototypes/native-prototypes-object.svg @@ -18,13 +18,13 @@ obj - - + + __proto__ - - + + __proto__ diff --git a/1-js/9-prototypes/5-class-inheritance/class-inheritance-array-object.svg b/1-js/9-prototypes/5-class-inheritance/class-inheritance-array-object.svg index 8de1c1cd..731ad706 100644 --- a/1-js/9-prototypes/5-class-inheritance/class-inheritance-array-object.svg +++ b/1-js/9-prototypes/5-class-inheritance/class-inheritance-array-object.svg @@ -26,13 +26,13 @@ Object.prototype - - + + __proto__ - - + + __proto__ diff --git a/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-animal.svg b/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-animal.svg index 7beab7e7..77f4dc66 100644 --- a/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-animal.svg +++ b/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-animal.svg @@ -25,13 +25,13 @@ Animal.prototype - - + + __proto__ - - + + __proto__ diff --git a/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-run-animal.svg b/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-run-animal.svg index ccfa42d6..3a6bcf7e 100644 --- a/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-run-animal.svg +++ b/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-run-animal.svg @@ -27,13 +27,13 @@ Animal.prototype - - + + __proto__ - - + + __proto__ diff --git a/10-regular-expressions-javascript/1-regexp-introduction/article.md b/10-regular-expressions-javascript/1-regexp-introduction/article.md index 28a288b5..cce32c4e 100644 --- a/10-regular-expressions-javascript/1-regexp-introduction/article.md +++ b/10-regular-expressions-javascript/1-regexp-introduction/article.md @@ -15,20 +15,20 @@ var regexp = new RegExp("шаблон", "флаги"); ``` -Как правило, используют более короткую запись через слеши `/`: +Как правило, используют более короткую запись: шаблон внутри слешей `"/"`: ```js var regexp = /шаблон/; // без флагов var regexp = /шаблон/gmi; // с флагами gmi (изучим их дальше) ``` -Слэши `'/'` говорят JavaScript о том, что это регулярное выражение. Они играют здесь ту же роль, что и кавычки для обозначения строк. +Слэши `"/"` говорят JavaScript о том, что это регулярное выражение. Они играют здесь ту же роль, что и кавычки для обозначения строк. ## Использование Основа регулярного выражения -- паттерн. Это строка, которую можно расширить специальными символами, которые делают поиск намного мощнее. -Если флагов и специальных символов нет, то поиск по паттерну -- то же самое, что и обычный поиск подстроки: +В простейшем случае, если флагов и специальных символов нет, поиск по паттерну -- то же самое, что и обычный поиск подстроки: ```js //+ run @@ -48,7 +48,9 @@ var substr = "лю"; alert( str.indexOf(substr) ); // 2 ``` -Как видим, то же самое, разве что для регэкспа использован метод [:String#search(reg)], а для строки [:String#indexOf(substr)]. Но это соответствие лишь кажущееся. Очень скоро мы усложним регулярные выражения, и тогда появятся отличия. +Как видим, то же самое, разве что для регэкспа использован метод [search](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/search) -- он как раз работает с регулярными выражениями, а для подстроки -- [indexOf](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf). + +Но это соответствие лишь кажущееся. Очень скоро мы усложним регулярные выражения, и тогда увидим, что они гораздо мощнее. [smart header="Цветовые обозначения"] Здесь и далее используется следующая цветовая схема: diff --git a/2-ui/1-document/16-metrics-window/document-client-width-height.svg b/2-ui/1-document/16-metrics-window/document-client-width-height.svg index b88a533f..bf16af6c 100644 --- a/2-ui/1-document/16-metrics-window/document-client-width-height.svg +++ b/2-ui/1-document/16-metrics-window/document-client-width-height.svg @@ -22,12 +22,12 @@ document.documentElement.clientWidth - - - - - - + + + + + + \ No newline at end of file diff --git a/2-ui/1-document/17-coordinates/coords.svg b/2-ui/1-document/17-coordinates/coords.svg index a86d910c..f91fe800 100644 --- a/2-ui/1-document/17-coordinates/coords.svg +++ b/2-ui/1-document/17-coordinates/coords.svg @@ -33,18 +33,18 @@ right - - - - - - - - - - - - + + + + + + + + + + + + \ No newline at end of file diff --git a/2-ui/1-document/4-traversing-dom/dom-links-elements.svg b/2-ui/1-document/4-traversing-dom/dom-links-elements.svg index 104c271c..7fc062fe 100644 --- a/2-ui/1-document/4-traversing-dom/dom-links-elements.svg +++ b/2-ui/1-document/4-traversing-dom/dom-links-elements.svg @@ -26,17 +26,17 @@ <DIV> - - - - + + + + next Element Sibling - - + + previous Element diff --git a/2-ui/1-document/4-traversing-dom/dom-links.svg b/2-ui/1-document/4-traversing-dom/dom-links.svg index c3e1cb78..2a5be39f 100644 --- a/2-ui/1-document/4-traversing-dom/dom-links.svg +++ b/2-ui/1-document/4-traversing-dom/dom-links.svg @@ -31,15 +31,15 @@ <DIV> - - - - + + + + nextSibling - - + + previousSibling diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.svg b/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.svg index 4a1fbbaf..14715f8a 100644 --- a/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.svg +++ b/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.svg @@ -19,9 +19,9 @@ 3 - - Самый глубокий - элемент + + Самый глубокий + элемент diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.svg b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.svg index 59fc73bb..fe29eca4 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.svg +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.svg @@ -18,7 +18,7 @@ #TO - + target diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.svg b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.svg index 9ff425b1..d9e9fad1 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.svg +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.svg @@ -26,7 +26,7 @@ <DIV> - + mouseover diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.svg b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.svg index 958e581f..8498bf2f 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.svg +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.svg @@ -10,11 +10,11 @@ <DIV> - + mouseover - + mouseoout diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.svg b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.svg index cd1569de..5a8f9f00 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.svg +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.svg @@ -14,7 +14,7 @@ #TO - + mouseover diff --git a/4-ajax/4-xhr-forms/article.md b/4-ajax/4-xhr-forms/article.md index e0059aaf..e54b8d90 100644 --- a/4-ajax/4-xhr-forms/article.md +++ b/4-ajax/4-xhr-forms/article.md @@ -48,10 +48,7 @@ alert( encodeURIComponent('В') ); // %D0%92 alert( encodeURIComponent('Виктор') ); // %D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80 ``` -Формы с `method="GET"` всегда кодируются указанным образом. - -Для `method="POST"` существует альтернативная кодировка, которую мы рассмотрим позже. - +Эта кодировка используется в основном для метода GET, то есть для передачи параметра в строке запроса. По стандарту строка запроса не может содержать произвольные Unicode-символы, поэтому они кодируются как показано выше. ## GET-запрос @@ -92,11 +89,23 @@ xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); ## POST с urlencoded -В методе POST параметры передаются не в URL, а в теле, посылаемом через `send(body)`. Поэтому `params` нужно указывать не в `open`, а в `send`. +В методе POST параметры передаются не в URL, а в теле запроса. Оно указывается в вызове `send(body)`. -Кроме того, при POST обязателен заголовок `Content-Type`, содержащий кодировку. Это указание для сервера -- как обрабатывать (раскодировать) пришедший запрос. +В стандартных HTTP-формах для метода POST доступны [три кодировки](https://html.spec.whatwg.org/multipage/forms.html#submit-body), задаваемые через атрибут `enctype`: +
    +
  • `application/x-www-form-urlencoded`
    • +
  • `multipart/form-data`
    • +
  • `text-plain`
    • +
+ +В зависимости от `enctype` браузер кодирует данные соответствующим способом перед отправкой на сервер. + +В случае с `XMLHttpRequest` мы, вообще говоря, не обязаны использовать ни один из этих способов. Главное, чтобы сервер наш запрос понял. Но обычно проще всего выбрать какой-то из стандартных. + +В частности, при POST обязателен заголовок `Content-Type`, содержащий кодировку. Это указание для сервера -- как обрабатывать (раскодировать) пришедший запрос. + +Для примера отправим запрос в кодировке `application/x-www-form-urlencoded`: -Полный код для POST: ```js var xhr = new XMLHttpRequest(); diff --git a/4-ajax/5-xhr-crossdomain/xhr-another-domain.svg b/4-ajax/5-xhr-crossdomain/xhr-another-domain.svg index ee815012..7a11b490 100644 --- a/4-ajax/5-xhr-crossdomain/xhr-another-domain.svg +++ b/4-ajax/5-xhr-crossdomain/xhr-another-domain.svg @@ -21,13 +21,13 @@ - - + + send() - - + + HTTP-запрос с заголовком Origin diff --git a/4-ajax/5-xhr-crossdomain/xhr-preflight.svg b/4-ajax/5-xhr-crossdomain/xhr-preflight.svg index 687a5c18..86d951d4 100644 --- a/4-ajax/5-xhr-crossdomain/xhr-preflight.svg +++ b/4-ajax/5-xhr-crossdomain/xhr-preflight.svg @@ -21,8 +21,8 @@ - - + + send() @@ -32,8 +32,8 @@ Access-Control-Request-Method Access-Control-Request-Headers - - + + 200 OK Access-Control-Allow-Method @@ -41,8 +41,8 @@ Access-Control-Max-Age - - + + @@ -56,8 +56,8 @@ если сервер разрешил: onload иначе onerror - - + + Основной HTTP-запрос Origin diff --git a/5-animation/1-bezier/article.md b/5-animation/1-bezier/article.md index 5d7cf395..13c91881 100644 --- a/5-animation/1-bezier/article.md +++ b/5-animation/1-bezier/article.md @@ -4,9 +4,8 @@ Несмотря на "умное" название -- это очень простая штука. -В принципе, можно создавать анимацию и без знания кривых Безье, но стоит один раз прочитать, что это такое, так как в векторной графике и продвинутых анимаций без них никак. Это образовательный минимум. +В принципе, можно создавать анимацию и без знания кривых Безье, но стоит один раз изучить эту тему хотя бы для того, чтобы в дальнейшем с комфортом пользоваться этим замечательным инструментом. Тем более что в мире векторной графики и продвинутых анимаций без них никак. -Тему эту стоит изучить один раз, чтобы в дальнейшем с комфортом пользоваться этим замечательным инструментом. [cut] ## Виды кривых Безье @@ -17,15 +16,15 @@ По двум точкам: - + По трём точкам: - + По четырём точкам: - + Если вы посмотрите внимательно на эти кривые, то "на глазок" заметите: @@ -35,7 +34,7 @@ Для двух точек -- это линейная кривая (т.е. прямая), для трёх точек -- квадратическая кривая (парабола), для четырёх -- кубическая.
  • **Кривая всегда находится внутри [выпуклой оболочки](http://ru.wikipedia.org/wiki/%D0%92%D1%8B%D0%BF%D1%83%D0%BA%D0%BB%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BE%D0%BB%D0%BE%D1%87%D0%BA%D0%B0), образованной опорными точками:** - + Благодаря последнему свойству в компьютерной графике можно оптимизировать проверку пересечений двух кривых. Если их выпуклые оболочки не пересекаются, то и кривые тоже не пересекутся.
    • @@ -53,7 +52,7 @@ Вот некоторые примеры: - + ## Математика @@ -122,8 +121,8 @@ - - + +
    При `t=0.25`При `t=0.5`
    @@ -136,7 +135,8 @@ По мере того как `t` пробегает последовательность от `0` до `1`, каждое значение `t` добавляет к кривой точку. **Совокупность таких точек для всех значений `t` образуют кривую Безье.** -**Это был процесс для построения по трём точкам. Но то же самое происходит и с четырьмя точками.** + +Это был процесс для построения по трём точкам. Но то же самое происходит и с четырьмя точками. Демо для четырёх точек (точки можно двигать): @@ -173,15 +173,18 @@ Аналогичным образом могут быть построены кривые Безье и более высокого порядка: по пяти точкам, шести и так далее. Но обычно используются 2-3 точки, а для сложных линий несколько кривых соединяются. Это гораздо проще с точки зрения поддержки и расчётов. [smart header="Как провести кривую Безье через нужные точки?"] -Кривые Безье обычно проводятся через "опорные" точки, которые, как можно видеть из примеров выше, редко лежат на кривой. +Кривые Безье обычно проводятся при помощи "опорных" точек, из которых, как можно видеть из примеров выше, только первая и последняя лежат на кривой. -Если нужно провести кривую именно через нужные точки, то это уже другая задача. Она называется [интерполяцией](http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D0%BE%D0%BB%D1%8F%D1%86%D0%B8%D1%8F). Существуют математические формулы, которые подбирают коэффициенты кривой по точкам, исходя из требований, например [многочлен Лагранжа](http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D0%BE%D0%BB%D1%8F%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D1%8B%D0%B9_%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE%D1%87%D0%BB%D0%B5%D0%BD_%D0%9B%D0%B0%D0%B3%D1%80%D0%B0%D0%BD%D0%B6%D0%B0). +Если нужно провести кривую именно *через* нужные точки, то это уже другая задача, она называется [интерполяцией](http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D0%BE%D0%BB%D1%8F%D1%86%D0%B8%D1%8F). Существуют математические формулы, которые подбирают коэффициенты кривой по точкам, исходя из требований, например [многочлен Лагранжа](http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D0%BE%D0%BB%D1%8F%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D1%8B%D0%B9_%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE%D1%87%D0%BB%D0%B5%D0%BD_%D0%9B%D0%B0%D0%B3%D1%80%D0%B0%D0%BD%D0%B6%D0%B0). -Как правило, в компьютерной графике для интерполяции используют кубические кривые, соединённых гладким образом. Вместе они выглядят как одна кривая. Это называется [интерполяция сплайнами](http://ru.wikipedia.org/wiki/%D0%9A%D1%83%D0%B1%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%81%D0%BF%D0%BB%D0%B0%D0%B9%D0%BD). +Как правило, в компьютерной графике для интерполяции используют кубические кривые, соединённых гладким образом. Вместе они выглядят как одна кривая. Это называется [интерполяция сплайнами](http://ru.wikipedia.org/wiki/%D0%9A%D1%83%D0%B1%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%81%D0%BF%D0%BB%D0%B0%D0%B9%D0%BD). [/smart] + ## Итого -Кривые Безье задаются опорными точками. Мы рассмотрели два определения кривых: +Кривые Безье задаются опорными точками. + +Мы рассмотрели два определения кривых:
    1. Через математическую формулу.
    2. Через процесс построения де Кастельжо.
      3. @@ -197,6 +200,6 @@
      • В компьютерной графике, моделировании, в графических редакторах. Шрифты описываются с помощью кривых Безье.
        • -
      • В веб-разработке -- для графики на Canvas или в формате SVG. Кстати, все живые примеры выше написаны на SVG. Фактически, это один SVG-документ, к которому точки передаются параметрами. Вы можете открыть его в отдельном окне и посмотреть исходник: demo.svg.
        • -
      • В CSS-анимации, для задания траектории и скорости передвижения.
        • +
      • В веб-разработке -- для графики на Canvas или в формате SVG. Кстати, все живые примеры выше написаны на SVG. Фактически, это один SVG-документ, к которому точки передаются параметрами. Вы можете открыть его в отдельном окне и посмотреть исходник: [demo.svg](demo.svg?p=0,0,1,0.5,0,0.5,1,1&animate=1).
        • +
      • В CSS-анимации, для задания траектории или скорости передвижения.
      \ No newline at end of file diff --git a/5-animation/1-bezier/bezier-car.svg b/5-animation/1-bezier/bezier-car.svg new file mode 100644 index 00000000..58061706 --- /dev/null +++ b/5-animation/1-bezier/bezier-car.svg @@ -0,0 +1,32 @@ + + + + bezier-car.svg + Created with bin/sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier-letter.svg b/5-animation/1-bezier/bezier-letter.svg new file mode 100644 index 00000000..58e3fbfd --- /dev/null +++ b/5-animation/1-bezier/bezier-letter.svg @@ -0,0 +1,50 @@ + + + + bezier-letter.svg + Created with bin/sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier-vase.svg b/5-animation/1-bezier/bezier-vase.svg new file mode 100644 index 00000000..6030a745 --- /dev/null +++ b/5-animation/1-bezier/bezier-vase.svg @@ -0,0 +1,49 @@ + + + + bezier-vase.svg + Created with bin/sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier2.png b/5-animation/1-bezier/bezier2.png deleted file mode 100644 index 4e26747b48fb473c367b86d4488a5f11811532d3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 596 zcmeAS@N?(olHy`uVBq!ia0vp^g+N@x!3-ob?bh1>DVB6cUq=Rpjs4tz5?O(K#^NA% zCx&(BWL^R}+XH+;T>t<7pOceg%)s#f|IOdOe{a3=f`LK&|LWEMIXHkyCQqJhU|{{R0)U#xMGzPNF0--|0--@kvKk&&UIqLPx5 zqNAhpnw`CG!_EEs_a}93H8C-1Zf<`5{Q2R-hiz3_&UmX<1**%PwcQf$Z@J0qymiOUg{+e!Y_GgL@53z?|7hm7{m&mf z_o)hazH_%|^QYe)HJ38CT6w)+aPxIpb$;^P8#X>?FZFlw5_?K|=#@e;h ztlk-PzIHi3@mklq`y2ee*qWFw`m7l%x_AB2t`~Lu(_Q~}?^of9o0aq>{tNr+{Ve~Y zPTJhd=GC)0Jyjbp;O?mK!mDF5NU8YQ-~ Uy^7;8Fq#=WUHx3vIVCg!0AbY#N&o-= diff --git a/5-animation/1-bezier/bezier2.svg b/5-animation/1-bezier/bezier2.svg new file mode 100644 index 00000000..0b0f99a6 --- /dev/null +++ b/5-animation/1-bezier/bezier2.svg @@ -0,0 +1,20 @@ + + + + bezier2.svg + Created with bin/sketchtool. + + + + + + + 1 + + + + 2 + + + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier3-draw1.png b/5-animation/1-bezier/bezier3-draw1.png deleted file mode 100644 index 10ce7f996ec07b6d297f7c7fa6298661854a7b5d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6296 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 + + + bezier3-draw1.svg + Created with bin/sketchtool. + + + + + + + + 1 + + + + 3 + + + + + 2 + + + 0.25 + + + t = 0.25 + + + 0.25 + + + + + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier3-draw2.png b/5-animation/1-bezier/bezier3-draw2.png deleted file mode 100644 index b122665670be837979dcb2051a6d12d583f2af67..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5715 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 FV1mBu7Nh_G diff --git a/5-animation/1-bezier/bezier3-draw2.svg b/5-animation/1-bezier/bezier3-draw2.svg new file mode 100644 index 00000000..dd762b32 --- /dev/null +++ b/5-animation/1-bezier/bezier3-draw2.svg @@ -0,0 +1,38 @@ + + + + bezier3-draw2.svg + Created with bin/sketchtool. + + + + + + + + + 1 + + + + 3 + + + + + + 2 + + + 0.5 + + + t = 0.5 + + + 0.5 + + + + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier3-e.png b/5-animation/1-bezier/bezier3-e.png deleted file mode 100644 index 7e0f8804234eb1ba6927f4d61224b1388b970d8e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2144 zcmV-m2%qPx%lu%4mMgRZ*|NHy={QUa*`ozS<`}_O-{r%b5+2!Ts z0002~{{GX`)A#rH-{0TI$H(;a^v1@000;3>+ApL=Q98R|Nq(M z=H}w!;`sRZ+}zxglav1p4F3=i{}dGee}Df}RR8bqFfcIn_4Uik%l|w)+uPgu`T73@ z1lQNs?(Xj6x;7NJvQk z+uQ%&-`(Ba(9qDEo13GfqaYw4@9*#bx3}~2^Z!^_|4dBel>Ffi!U zwb}pw>FMdr%*^QM=*Y;(+S=OS;Nbs!eAU&}WMpI{BqZM6-e_oO|Fg6IARsI(EdK}y z|I5qq2nheLuS`r#G&D5P(b4~li$Fj?|3pN1czD0RzhW;J|C5tqiM9WqpZ_#8_V)JK zu#Nx#Gs(%x>gwwMqoe<)r~hnh|G&TgNJ#%IEdSHf|8Q_nP*DGehkSf|gM)+U|Nj>N z06aWA7cXM}$H)J}!~a}d|2R1RWMuO4^6l;I?Ck9D@bLe5c>mAOK0ZFq&d$8Nyf!vA zfq{X9goJ8pYL1SMeSLlZbaaS_h-qnQ)5gZ~YHISLqSCIe(oawFIXQfLd-B`c$Gf{w zEiK2fvC?K{s&#ep7Z=ioh9DRi&?hIyqN4Ex1kpG+$C8r&kB^v`n3k57AQuoboEbjY{PKY~qzy-~uxBhNHg`3ev6>hqPK|cPl9F1t$pO>1N_t>L&cZbnfnv-*@ zLR*Lhl%*B0s*m6)vRl<|BuQC(!TjE?S{&ll#?YQ>eLAipz>%FOijMF;iX>MNAbq_G zRgsRJJIE_$^N#N)F1bh%pmrCoB0%A8vXVoNrHd>Bt|Bd|RS+a<9LxOJl8CDaurY<4 zq^5t_pZ68vDw34cB&@X5%EDCy=!lQQRRk#BL;@&}SFiYAG7-sD6afY`xQYO4;$^ss z0Bbe4iU8_T8LlEgiBV$3GzSuP5LF3jEkrUkX@RMs|eue$5jLbJRCH^Ur*do1R^>{@t9ThcA%Svk7Vo_Z34AEC~ zS^So|I+v@iPUknD3|24cWGI(TkveAgHw?6ULdTwfx7Tk!TE_1cOM;NEX!GhU4?eWG zP1Ar*muutw6n%m)E`_5=1$FLePYCYdf^~FKRU(GYoOh1wMA}U?=saa z9ONH~MbYc@3hOcD90*p+8f>D(PzqKHewQlbBe>x@n~N<0p~Gh zlO#L~+D$8-Hl25Ptn1Y|)K+Kw7ivjjk>wp0L=3<*%2YbixAXReMYNh_Z0k}478x`W8b-XV%5ubGQdjZFFk+$^8@FZ!`3mY zKKSrF8R9HW`0dA~SV5^Gn+)uKqn9oSx!c-OCT}5)PE@m)Q#Xvab8UF#~ Wbnf@RccQTX0000 + + + bezier3-e.svg + Created with bin/sketchtool. + + + + + + + + 1 + + + + 3 + + + + 3 + + + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier3.png b/5-animation/1-bezier/bezier3.png deleted file mode 100644 index 3991122ceb78fe5291b9a66280d2ac32d69dbfa2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1286 zcmXw3eNfVO9RB&%A!%82f~iTqB$9#&GtN+vD8a~)!-fl|l2cP=zO8U#mfG;8aOTZg zxp58CU6$Z6bEzj8OKzbuU&^6pR^GzWhUvPp5W&POG_|02_Yd0jTvATWHR9KptI9tG7$&_V6y=g^ZB!59byX3tWlt% zw6ruo)QAqRsmaXDv|6p8Rs;I9QVD4O+*~jk0rhINK%)f(1@U-18jWVLSjx-GnM|fs zDrGPjI-O3h*Ndw<5QGY7ww4x-?KqLaWoX_Wj!5~8;>GiV!ICL)*G0^E~ zf{rRNNTpC)3x$Oyg@PX(Ou*v_IGn7wSQr*&I(<4ONzqYNC8kht2#6+PqVV1H94DL5$iY0#y~S{nSN*v2(sG2(?8y{U#l&T$dgQv)2ThyQ1uJ2RFVBNQ?hPj;S)dfK*j4j#FXBL73 zSVOq-lsmnbhu-#?OT6w$U-X-YhaJ)jnI0=S%0nMcIkb|xmNacWaN9B66F+~P-sL@2 z-s7Vz{3@b(g>Z&-g->+FzNf|HnH%;~AC;{g#CUu#z}*&D$G^`mbFT8pqa5_o1i zjxU~cyJ0d|ixNtp(k1=s_~f8Yk)HS<*u_1$@s-12Me~W{F^&4Dp^U)1x?`nb@maP@ z$TaDB@{Rz>nVY#As14kLzO4H@VKQ zw#46>dSv@{+0~0Tga5fZ@Jog)f1){8zH@v}{g;8+zG(xmx$570oKw&5oUVD9m>fy+ z(2fim-GZ>oBBNU;@xo-hF5#-UgKqQ1C`)}U+w}H)&0%7#=BJ5U*BgYR*=@h3XX~CU z71jSY&G8LW-WC?LW+b+k?2oFnAK-~c&Pk|-tbPycJ^J4Tw;CTepB%@m+qM`RJs+I+ z!<&5@Qdtq9wB75^e`6&2S7->H2JxEauWW&ci-EVKZ-wV z-cIcWAfbDe4A7Y zU9ZaTE^0h?_R+2^@oLi)11rIAB9OB>ih2gfyYSjTAFIp11ILp5DN)6~C)pLJLaXD* z24Q$l$hA=S)Q!un^vH+@8cU<)V&``yq5b)T3)%z%BboUdJu)j{9@Ez;;kABh|Ghuk zf^*!5l$ZEkd@8VQ9S{dNI$}A`?g!M2GSavmT-MPc~4XIs|}Tc_J=lg pqzAhR@plir?{bbao2pG-rAS;!(t^P3uR^~kgu6G6-Ns5O`yX>hY{UQn diff --git a/5-animation/1-bezier/bezier3.svg b/5-animation/1-bezier/bezier3.svg new file mode 100644 index 00000000..5ac329b5 --- /dev/null +++ b/5-animation/1-bezier/bezier3.svg @@ -0,0 +1,24 @@ + + + + bezier3.svg + Created with bin/sketchtool. + + + + + + + 1 + + + + 3 + + + + 3 + + + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier4-e.png b/5-animation/1-bezier/bezier4-e.png deleted file mode 100644 index a664b520d9b241787e057ed7f62f26cc8116968c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1941 zcmV;G2Wt3Px%I#5hhMgRZ*^78Wh{QUa*`ozS<`}_O-{r%b5+2!Ts z0002@_xIo5-~apj)6>)R^z{E282|V8#>U3@`1t=MB+Sgr+uPe>iM9U_5Vh3kY;0`Y z+}!_E?qGXMYp02lwCpZ^2|!^6Xqlatog*4WtCFfcIr`T6nj z@yEx<{|E^GaByNT7ytk0j$Jd<)YRkSoZ-B-QC^)^Yj1P+y6vF|F5svu#V8s(3_i^|F^gQ z&=jV>F+33`@-rnBP(b4~4VE@n0|Cg6&XlNuP zB>%g+{{R4de0)qyOh7S)z#Jh z{{H{R$N!s~|2R1RczFMVga2e?|4>jD000*+V%pl;zP`Tj@bLdAD9XypLPA3S>+6`9 zm}+Wjl9H1DKtTU!X#Yq^Dk>^&Zf<91Xa87O|Fg6Ihll?Z6ui8=|EH&fgoKk25Nuyx zX=7uywzhp#R5LR(*|)dO&dyItN^DzO@^W&?$;q1v3Upanzp$|MNlEg#xhNShi7zi=VlOWj02ea=7cVatjSKC$;2XGOvvB6-2 z<2Ya}pcn|l#w-Jg6L1r}Qih31m@Ras34uUap`}fm-M#nTd++hT)r(rP-X8;>539RV^(ttVbj&+2g9e z{>CMSX^HLsw4oAD)1JrhF*hzTejXotkmAh$ei54(i@a?=-7(Q)-#VvhjM&8Z`_$cb ziuMA4AjUpgdYWU3PyD~w)j)6W0P7B6oj7!`yZhiHM_G1=>(HGVj?>(Im}Q5kO77Cc zUo=g(v+EGo9SJkp`2H(FhmypKwg*G(B)qGOx~T?X#yl-gsHAL#njTKhx0QmE2_QiXbmmEib(y(;->9 z<1!nV79DR#L?g#XF_$=P>$B1u1kNuHiAP#mwU|UX;*d4!&lsB0;fO7g^VghXnL})e zF6&&@SU-+fCP{Sho~*IFGKNGOA&@E2<|G6niD##z0v#iy>u@JCA~}#DF+>bxNF26a zBMq09Pg;c5%Zv_i18|MytHf&BVusXz=Bu<65oAq zm`tp}5lf(%amPF4iAGk$ppRogtOkh}_+fx}gbmSd93xM36)+;Y&Kp<|_khF|heu`N zmFvJnPce>o4w#v>zDS-}U_`WAFS8*QK*X(0V4|o%!-P2O90FzzAc>{G%=D`&6W1Io zDid$`*bt9&0251&02^WrL|lChB<3?AhMW;#rjX59G(6X*GO^BThlqo0h-Qdbjw7C- zCt7Yc;^XwhN|lMtIAZZlL2O158>xwvD53@?j;T#FnjoSDN9=-#HlQW{Rv?zEOdPxg zh=rKIeD#Svz=RDX7PBGxjk91&5ffsc*}#Tazd)XdSVzG3HXEXA18g~fBLe#ya4fMQ zPC~@!>namx=4Zff3pgUQzrkshi9^l+8{#0azoz9y@Q;%o+~o$?-$k1g1WZqy3mG zY8KJ3<+v=}@`RGJn66CX%EtC3nU-B8`dyA`J10kMQ5-kW+xxzdXtEj2OL83pC#RI= zWv&s9<4ViN8P?or}s`%rN=J}0v**Gp^ z9kPnjbvf2AKaVCl7_TbEb%-mMRmIqj%&KpoT_a52 bk*a?ISuyEjrbGHB00000NkvXXu0mjfW#8p} diff --git a/5-animation/1-bezier/bezier4-e.svg b/5-animation/1-bezier/bezier4-e.svg new file mode 100644 index 00000000..562d06c6 --- /dev/null +++ b/5-animation/1-bezier/bezier4-e.svg @@ -0,0 +1,29 @@ + + + + bezier4-e.svg + Created with bin/sketchtool. + + + + + + + + + + + 1 + + + 2 + + + 3 + + + 4 + + + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier4.png b/5-animation/1-bezier/bezier4.png deleted file mode 100644 index a5ac0cfdf165520eb3ce026602b3eced041d26c7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1293 zcmV+o1@iidP)Px$fKW_SMgRZ*|0E=0iM9U_5dRn$Y;0`*_xAt*0Q>v< z|NHy3)aa9wlmCy8|L^br|JnZx3^M=#|DT@#02luR1TZi#{|E^G!^8h@aAGeP|NrQY zT{EMjqtDOJ|9^j2SXf+KTp%DI)6>(-%ggKQ>qtmQ|5Q{nU5=ZZoByw`|MT<*|3iPTwMRRxBsiF|L5obS|4>l>I5_{u z$N!s~|Lg1jWMuz?gBJh*7cXM}C@B9(NdG`U|7d9cSXlqFv;T*O{}dGer>B!+V{Bhv zlMoPWW@eiT3ja(@n|F6)US4clTSr}vwTX!@FJcz}7h*3jj9P!z=z6B1A$&=@wwrHW-oRNAVA?whUq3U$}+`@XmTdcjU-AQa5a zGiN%ToG;8cIs7;;FZboWxpJHdMPzw|>IsKBIMb>EWqE>ZGEXdg;=Dd;$c)TDH1mtS zKYy?hGt`KY?;$4Q4D~){M#5~w+I_rthj8b=Y_bxo$WxuPF_BrP&I~0ZE3r0D!=VXk z0bqz&eY9lCn6eXXS*PBfo?fdR^*Y-((BD6BVaQ5Hqx#M{InH@$*h)u(2G2WdAI|R6 z);St==I-xLN0&jv-un+kho0yl_yd)9tHrk;*@%M|kH(0*a_krdf~#6;V>D^p(L$GR z)xO}`RcG6)T=7|LYc4@>wARpYx5LqW`+8fRpBJJYile=5bamZqdqH`-j%UchCTU)M zl1J9SN zBia$|i2p`J^ed`gl+Y2~c0@a(9kE$%bi{->1&$cy!8_u-FpA#vuY-X}bpcGwJ_G}& zi_>6YY7z|0Y2e+Pv@{QnIM0LYTN-|@VV|O&yw=dCs5|IWRL{~HcuZrn;74&v0hhOF z&3{r~6%HBc@JsM@ONQ4+ZwhXZkv`2VpJ@1vY)At{zgD*lXF9mTA-&m}L<}hU7t{z- z-{i5xfD+XIDMD`Uq!9lC^!i3DoH=Qs3CLwA9lBIvT5JXuzIJk!5z}JxA{_o!z5X*p z%EDo5Vp)teuTV$-7jS=*rRKEszfksD0GXc0)?48Xbr)K^m)BQ!pc~{^=@y^}496uf-+f z4%V*XH!ssfhxJ{><{diGdxQ~P#jFm!=sm)wyNZ7Szo=$WN(su|00000NkvXXu0mjf DWe + + + bezier4.svg + Created with bin/sketchtool. + + + + + + + + + + 1 + + + 2 + + + 3 + + + 4 + + + + \ No newline at end of file diff --git a/5-animation/1-bezier/car.jpg b/5-animation/1-bezier/car.jpg deleted file mode 100644 index 8940f17af76a694c0b03f52a82bc597fd752f4fd..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6478 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 O02M_|g<82Uq5lK%Um0Bh diff --git a/5-animation/1-bezier/pause.png b/5-animation/1-bezier/pause.png new file mode 100644 index 0000000000000000000000000000000000000000..4d46cebb5df4630deff807c361d9c6ab69ab683f GIT binary patch literal 2029 zcmV(_`g8%^e{{R4h=>PzAFaQARU;qF*m;eA5Z<1fd zMgRZ@b4f%&RCwA8Z8BewiS9NUX2|z4`H+ti_qbI-h;@2I) zM`&;4zPow%`nwOVT|d6omEGcSnR6M3oQRm2h_-#l%;VUD$=!GT)Wj;y6BRINo_(Gy z=fbrfU%L6ksq^3Y-VdHV|MAv^2H*Yp^}mc|Xb%_Fex;4fo|$>rjcv13kvz?TLY`(} z2B3sOm@H3e2D^%|xw6~|V>9B?8<+od@n1js{tv%&{uA`lJHNkk=kA%ak2XzXdBSZQqDY$X?EqJOv>cR=Al--Mcw&>N2WRb?d{9cgW+f2{jpxY z_sag!kspMc_g5(H?#i^=rb%n>z3=;2sTc!ARcFlH@U~1=oJ+)9vJJ%sExwRP|8w=N z!_#LT{m{`X7vH?{&YN0TH)%XMey^MIUcEQ2hC^9Mu4-Q-n`NHkVY}MhAIezoRmpOH zGA+WsgI2sJ^QGnys~j|W`AR&?uQF69sl|-|9rjMgp+oA zFm3PM>9@RHZMIo5W?5GIyQ}?`yI0L5rv2OYUO6r>xsx}O4a)}uwS43F{&sce-}7iR z-{|i=V^1%}vpNjJdcEHDTi~FuyIU?Pr8Lj;Omj&R!O4sn5DCzd&CIf;l+rMDGzOMX zN&yNO@Zwa6+zD!C+isikSnD23HsqA&ZQpfWH(|0FZGn}=Q7t6tD}#0%D{}tGaC^ijz4xVl;N6gAXaAgG1pt5Whs3>Y3V;w|QVdi-l zg2p;lP1UmRLrNGUYZX{X0fEC=0AT}junZMI2^3R45y;mCM&ZeLktEDs2gpT6-kvsirN$fm<&$hRZ|b! zDaIH=Wi){iLZu3)Vw@pn1suS{0Cco2Qz~Na28NfCDS-_Vz{EjK%8WdDNmeKt2h&FC zy~b^J@*vTGF?U%(nkj?TnH=OQjp!mEz)(1VnW<(}9HoN52>`eu-b1M|`|MIW+Z6?A zU;#(WNF^9okji0@C=4!CG;`sGAq+-b0N}n11}|zE#;~=mdyMfglvBxiJKZ*>xkv%X z0T)ad+EZ0{AE6DfDb%7SKv7pz%esw=de&akYPY^}?dog8MH|BuCgHH2w>RFqo|dU@ z1I&)^4R2k!bg{oUmBHDyiz~VJ#@nyOmb6lzpdko|i0J3P`Nd1Oe|cl?uT!;NB(8Dr z-flGl^{#ezkV)WJu~wqW#O_l_DUIVe&$$$cAOsbWqj+{Yw|(E&Pw~0uAAJ5NpZlrS z%R7s+8$TM?z;-O>NDdbVi6?S(H+Oe75_6ss+yIM>nVGp82mrGy7p8SOIkAmY&`HlW zr}w4N7oYs-_37wJiE?^&$g1mo(>E1HI_oGvf#Bgz9mU<6RI_*xxI6Fx!*Nor;}VBM z^Myw~|MY*KeCF_R{qkeqe()gmoBEC2)wS-Dch;76pBD+G6n8IN0Cy_xp1rtEOdkNi zLw9%o2tU?Z^*A1X?C$xmJ^#&vc#3@OCu#la>XkoS{oSS8Zx7P-vg>?Pj+42&JFBR& z#PIN^HH(&rDKLQH*a1)>H6*5b!j|P zpELWQRU#tchcT-@10W)1X6A?1%)DtHET#F(h0mSadjd>3`Tqt0sQ#(pQI7T>00000 LNkvXXu0mjf40{{R31=Z?m00004XF*Lt006O% z3;baP00001b5ch_0Itp)=>Px&08mU+MgRZ*hlhuMe}A{PxBL71v$M1J_xGSuE${E| z=jZ41^Yg}+fJ{tGP*70w>gJ|hJJYV5=hVvS*3F-vpTdxN?A_L>VnM8EN3wHNq*^wp zU_S2P+NY+7ReGvCCxGcz;Swx;06yN{2Ly@qVNgJ>`?Fp)|r(5aTMY)!$Ab*5W5 z`StVL+uQc;>#=ZAb2}jT^6`;mN(# zv!ed}{qyPM&Zd*{=i%MKv$}z1%%P2wlau=P^l&;LU|?WGJv!;w&)mPV!H#yz%gfxq zvC*uW@Z{dswWQ+8zuCE}<^`@Dr}w02p(h;OrXSA>Lwa7Z*s zMnzm(TGOwdW=uefi;MU1?yRh=+|$n2x2Nja(Z|QfmzS5+u%DV!GgvMgonAoC&(BaP z7F8=4olz{ccUpTtBCxQqP*6`mIyXl^Jy%mvux?M^-`{{kC1FK4)Ulv=czB&+M!%7J z;LXHYHz$8cF7f8!gjz+MoSc_XE%NB&*TT7EGaR>kV5MkF_V4WJ-q?b9b-&?dU>m(phG}E9TyZTDk@-JU1U8g%(km&K`xC{ zIiYAyrhaSK#Jk?m%3(Mqes5@NTvq4d-jrNIYg9>PJScT$Uu#=aq<3PLdvC3GUFF=_ z%*VvmyREQ-Y^G*MXF@TbRWs$##$`q~#hi)c)Xa-@YnD_sqF+DL#Jt43w{B))y_}1A zZfWM$&Tl*=S65f}^YTk46}5|aeNjAjPdu%trFu*?DkC4DnwO}bo0g7>Tvt@Tn1!B~ zl!rwoaYQd79vrHsrJ!@~2LJ#FGf6~2RCwC8Tz6bkNf2Hj$-D%Rri2<41Qb*{f`}qb zL9l_`*%0May2x2jR6s1)d$~KiXT{!oyWV^6z4zXJzspMk2_dg+VgG@*JNv%m&F;)M zGnJZN?Y;--pioHD z&O6ph2pM;Ock8~IosV>+W#;wz=`}{mqR$cB_|GTC_v~6g@kJ3Va|676R+x37rQ&t zEiA?ez>T3{s^#p22A8WV7`c1C>5bemK`+9^20$n?sD)4}HtY_kSRwTYoAZU(_**)k z70ev|MtiaG*wes>Frff=O)WOgJq50epprm>-bTVgHb|p_o;@pJO&%S{#$HS;*()Wo zEa5&TP+dXtK5xTf7D(6Ew@3#)>sv-KfJ)qQSz74Q4`Zo;6t{k=oFOe%R{856)Om~Q zSv3n}$o)2}nl^8dE-xR!=Qo@v^A=0w8rMg?j58G>|G8 zYn;DE_NSt0vYraJ7V%X$%2Z;oLD%Kt?zn(grXx_Mak30GSHs7aXerQ#4k{CZBxMXG z#bli>kPd33c24iM+X;YUcyAS|jkaPEEmWv6S;>V<$hpF3TBxNk zR9wKrX!#u>hZZUZl8mPNn3$&c2Tfh#@NZSOfVLDG<6jr(OACb}s!R^urY}*M9A{q{ zn?kY;08_xJPzjiH8fTsAf0Sqeg0pMu8huRxj(__w~hbo47Hg0X*daAk?1U|BNoE`nbHfy7 zakWE0ioLnD%3rD3IuU;hC&DRh(oI&bafSsKvZkHpHNwQ3lsa>I6uB+s#1 zB@+~Ol6;$bwdYHl?Ag2)19d)>$3Pc^Rq+W$ZnubxdcSc~P^Pm|jqct~G^eUGF2Mjg zs7T`i440N1K~~*0w_sUoxLN3^xTnh$mHZOkn9N-!>LWUbM}!v!JY&p^4h0i1Wz#8tK}T_B<@4rYvVRI zcu$Q#D~F_tkOb>UY}t!0*u^FPpeKlI=SvCL@pn2RQN*t{x)J?|rlt?}#rvOioi>KEpUz==<*b)5sag zrOg$nLqQ%(E5l@O$>UxpV<@2XhDNrbUI%eBlo&;BZ@eXo|0sU>c?exSzOLrB zyx)IBRo||mD+SnkzlE*VN$TransitionEnd`. Оно сработает несколько раз, для каждого свойства, поэтому чтобы обработчик не вывел "OK" много раз -- можно обрабатывать окончание только при одном `event.propertyName`. - -# Похожая задача -Аналогичная задача, решённая средствами JS: [](/task/animate-logo). - -# Решение - -[edit src="solution" task/] \ No newline at end of file +Небольшая тонкость с окончанием анимации. Соответствующее событие `transitionend` сработает два раза -- по одному для каждого свойства. Поэтому, если не предпринять дополнительных шагов, сообщение из обработчика может быть выведено 2 раза. diff --git a/5-animation/2-css-transitions/1-animate-logo-css/solution.view/index.html b/5-animation/2-css-transitions/1-animate-logo-css/solution.view/index.html index 5190775c..3481cf54 100644 --- a/5-animation/2-css-transitions/1-animate-logo-css/solution.view/index.html +++ b/5-animation/2-css-transitions/1-animate-logo-css/solution.view/index.html @@ -2,38 +2,15 @@ - + + + -Кликните картинку для анимации. Расположение элементов при анимации не должно меняться! - - - - - - -
      Догнать -..и перегнать!
      + -В процессе анимации повторные нажатия на изображение игнорируются. - - - - - + \ No newline at end of file diff --git a/5-animation/2-css-transitions/1-animate-logo-css/task.md b/5-animation/2-css-transitions/1-animate-logo-css/task.md index d9fb2eaf..089f1b21 100644 --- a/5-animation/2-css-transitions/1-animate-logo-css/task.md +++ b/5-animation/2-css-transitions/1-animate-logo-css/task.md @@ -1,12 +1,16 @@ -# Анимировать лого (CSS) +# Анимировать самолёт (CSS) [importance 5] Реализуйте анимацию, как в демке ниже (клик на картинку): -[iframe src="solution" height=350] -Продолжительность анимации: 3 секунды. +[iframe src="solution" height=300] -Для анимации использовать CSS, по окончании вывести "ок". +
        +
      • Изображение растёт при клике с 40x24px до 400x240px .
        • +
      • Продолжительность анимации: 3 секунды.
        • +
      • По окончании вывести "Готово!".
        • +
      • Если в процессе анимации были дополнительные клики -- они не должны ничего "сломать".
        • +
      diff --git a/5-animation/2-css-transitions/2-animate-logo-bezier-css/bezier-up.svg b/5-animation/2-css-transitions/2-animate-logo-bezier-css/bezier-up.svg new file mode 100644 index 00000000..c6f18cc4 --- /dev/null +++ b/5-animation/2-css-transitions/2-animate-logo-bezier-css/bezier-up.svg @@ -0,0 +1,31 @@ + + + + bezier-up + Created with Sketch. + + + + + + + + + + + + + 1 + + + 2 + + + 3 + + + 4 + + + + \ No newline at end of file diff --git a/5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.md b/5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.md new file mode 100644 index 00000000..00c487de --- /dev/null +++ b/5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.md @@ -0,0 +1,7 @@ +Для такой анимации необходимо подобрать правильную кривую Безье. + +Чтобы она выпрыгивала вверх, обе опорные точки можно вынести по `y>1`, например: `cubic-bezier(0.25, 1.5, 0.75, 1.5)` (промежуточные опорные точки имеют `y=1.5`). + +Её график: + + \ No newline at end of file diff --git a/5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.view/index.html b/5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.view/index.html new file mode 100644 index 00000000..ba3a92ab --- /dev/null +++ b/5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.view/index.html @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + diff --git a/5-animation/2-css-transitions/2-animate-logo-bezier-css/task.md b/5-animation/2-css-transitions/2-animate-logo-bezier-css/task.md new file mode 100644 index 00000000..4ba2004b --- /dev/null +++ b/5-animation/2-css-transitions/2-animate-logo-bezier-css/task.md @@ -0,0 +1,10 @@ +# Анимировать самолёт с перелётом (CSS) + +[importance 5] + +Модифицируйте решение предыдущей задачи [](/task/animate-logo-css), чтобы в процессе анимации изображение выросло больше своего стандартного размера 400x240px ("выпрыгнуло"), а затем вернулось к нему. + +Должно получиться как здесь (клик на картинку) +[iframe src="solution" height=350] + +В качестве исходного документа возьмите решение предыдущей задачи. \ No newline at end of file diff --git a/5-animation/2-css-transitions/article.md b/5-animation/2-css-transitions/article.md index 330b14ec..699741f7 100644 --- a/5-animation/2-css-transitions/article.md +++ b/5-animation/2-css-transitions/article.md @@ -1,120 +1,213 @@ -# CSS-transitions +# CSS-анимации -Все современные браузеры, кроме IE9- поддерживают       CSS transitions, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript. +Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript. +Однако, как мы увидим далее, для более тонкого контроля анимации JavaScript вовсе не будет лишним. [cut] -## Анимация свойства [#css-transition] +## CSS transitions [#css-transition] -Идея проста. Вы указываете, что некоторое свойство будет анимироваться при помощи специальных CSS-правил. Далее, при изменении этого свойства, браузер сам обработает анимацию. +Идея проста. Мы указываем, что некоторое свойство будет анимироваться при помощи специальных CSS-правил. Далее, при изменении этого свойства, браузер сам обработает анимацию. -Например, CSS, представленный ниже, 2 секунды анимирует свойство `background-color`. +Например, CSS, представленный ниже, 3 секунды анимирует свойство `background-color`. ```css .animated { transition-property: background-color; - transition-duration: 2s; + transition-duration: 3s; } ``` -Теперь любое изменение фонового цвета будет анимироваться в течение 2-х секунд. +Теперь любое изменение фонового цвета будет анимироваться в течение 3х секунд. -У свойства `"transition"` есть и короткая запись: - -```css -.animated { - transition: background-color 2s; -} -``` - -## Полный синтаксис - -Свойства для CSS-анимаций: -
      -
      `transition-property`
      -
      Список свойств, которые будут анимироваться. Анимировать можно не все свойства, но [многие](http://www.w3.org/TR/css3-transitions/#animatable-properties-). Значение `all` означает "анимировать все свойства".
      -
      `transition-duration`
      -
      Продолжительность анимации. Если указано одно значение -- оно применится ко всем свойствам, можно указать несколько значений для разных `transition-property`.
      -
      `transition-timing-function`
      -
      Кривая Безье по 4-м точкам, используемая в качестве временной функциии. Их мы изучим [чуть позже](/bezier)
      -
      `transition-delay`
      -
      Указывает задержку от изменения свойства до начала CSS-анимации.
      -
      - -Свойство **`transition`** может содержать их все, в порядке: `property duration timing-function delay, ...`. - -## Пример - -Анимируем одновременно цвет и размер шрифта: +При клике на эту кнопку происходит анимация её фона: ```html - + + + - + + ``` -## Временнáя функция +Есть всего 5 свойств, задающих анимацию: +
        +
      • `transition-property`
        • +
      • `transition-duration`
        • +
      • `transition-timing-function`
        • +
      • `transition-delay`
        • +
      -В качестве временной функции можно выбрать любую [кривую Безье](/bezier), удовлетворяющую условиям: +Далее мы изучим их все, пока лишь заметим, что общее свойство `transition` может перечислять их все, в порядке: `property duration timing-function delay`, а также задавать анимацию нескольких свойств сразу. + +Например, при клике на эту кнопку анимируются одновременно цвет и размер шрифта: + +```html + + + + + + +``` + +Далее мы рассмотрим свойства анимации по отдельности. + +## transition-property + +Список свойств, которые будут анимироваться, например: `left`, `margin-left`, `height`, `color`. + +Анимировать можно не все свойства, но [многие](http://www.w3.org/TR/css3-transitions/#animatable-properties-). Значение `all` означает "анимировать все свойства". + +## transition-duration + +Продолжительность анимации, задаётся в формате [CSS time](http://www.w3.org/TR/css3-values/#time), то есть в секундах `s` или `ms`. + +## transition-delay + +Задержка до анимации. Например, если `transition-delay: 1s`, то анимация начнётся через 1 секунду после смены свойства. + +Возможны отрицательные значения, при этом анимация начнётся с середины. + +Например, вот анимация цифр от `0` до `9`: + +[codetabs src="digits"] + +Она осуществляется сменой `margin-left` у элемента с цифрами, примерно так: + +```css +#stripe.animate { + margin-left: -174px; + transition-property: margin-left; + transition-duration: 9s; +} +``` + +В примере выше JavaScript просто добавляет элементу класс -- и анимация стартует: + +```js +digit.classList.add('animate'); +``` + +Можно стартовать её "с середины", с нужной цифры, например соответствующей текущей секунде, при помощи отрицательного `transition-delay`. + +В примере ниже при клике на цифру она начнёт двигаться с текущей секунды: + +[codetabs src="digits-negative-delay"] + +В JavaScript это делается дополнительной строкой: + +```js +stripe.onclick = function() { + var sec = new Date().getSeconds() % 10; +*!* + // например, значение -3s начнёт анимацию с 3й секунды + stripe.style.transitionDelay = '-' + sec + 's'; +*/!* + stripe.classList.add('animate'); +}; +``` + +## transition-timing-function + +Временнáя функция, которая задаёт, как процесс анимации будет распределён во времени, например начнётся ли анимация медленно, чтобы потом ускориться или наоборот. + +Самое сложное, но при небольшом изучении -- вполне очевидное свойство. + +У него есть два основных вида значения: кривая Безье и по шагам. Начнём с первого. + +### Кривая Безье + +В качестве временной функции можно выбрать любую [кривую Безье](/bezier) с 4 опорными точками, удовлетворяющую условиям:
      1. Начальная точка `(0,0)`.
      2. Конечная точка `(1,1)`.
        3. -
      3. Для промежуточных точек значения `x` должны быть в интервале `0..1`.
        4. +
      4. Для промежуточных точек значения `x` должны быть в интервале `0..1`, `y` -- любыми.
      -Синтаксис для задания кривой Безье в CSS: `cubic-bezier(x2, y2, x3, y3)`. В нём указываются координаты второй и третьей точек, так как первая и последняя фиксированы. +Синтаксис для задания кривой Безье в CSS: `cubic-bezier(x2, y2, x3, y3)`. В нём указываются координаты только двух точек: второй и третьей, так как первая и последняя фиксированы. -Например, торможение можно описать кривой Безье: `cubic-bezier(0.0, 0.5, 0.5 ,1.0)`. +Она указывает, как быстро развивается процесс анимации во времени. + +