images to svg
This commit is contained in:
Ilya Kantor
parent
a31e881856
commit
3ba28aa104
734 changed files with 11682 additions and 245 deletions
|
|
@ -12,15 +12,15 @@ There may be 2, 3, 4 or more.
|
|||
|
||||
For instance, two points curve:
|
||||
|
||||
|
||||
|
||||
|
||||
Three points curve:
|
||||
|
||||
|
||||
|
||||
|
||||
Four points curve:
|
||||
|
||||
|
||||
|
||||
|
||||
If you look closely at these curves, you can immediately notice:
|
||||
|
||||
|
|
@ -29,7 +29,7 @@ If you look closely at these curves, you can immediately notice:
|
|||
For two points we have a linear curve (that's a straight line), for three points -- quadratic curve (parabolic), for four points -- cubic curve.
|
||||
3. **A curve is always inside the [convex hull](https://en.wikipedia.org/wiki/Convex_hull) of control points:**
|
||||
|
||||
 
|
||||
 
|
||||
|
||||
Because of that last property, in computer graphics it's possible to optimize intersection tests. If convex hulls do not intersect, then curves do not either. So checking for the convex hulls intersection first can give a very fast "no intersection" result. Checking the intersection or convex hulls is much easier, because they are rectangles, triangles and so on (see the picture above), much simpler figures than the curve.
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ After some practice it becomes obvious how to place points to get the needed cur
|
|||
|
||||
Here are some examples:
|
||||
|
||||
  
|
||||
  
|
||||
|
||||
## De Casteljau's algorithm
|
||||
|
||||
|
|
@ -77,7 +77,7 @@ Control points (1,2 and 3) can be moved by the mouse. Press the "play" button to
|
|||
|
||||
| For `t=0.25` | For `t=0.5` |
|
||||
| ------------------------ | ---------------------- |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
4. Now in the <span style="color:#167490">blue</span> segment take a point on the distance proportional to the same value of `t`. That is, for `t=0.25` (the left picture) we have a point at the end of the left quarter of the segment, and for `t=0.5` (the right picture) -- in the middle of the segment. On pictures above that point is <span style="color:red">red</span>.
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
31
7-animation/1-bezier-curve/bezier-car.svg
Normal file
31
7-animation/1-bezier-curve/bezier-car.svg
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="260px" height="130px" viewBox="0 0 260 130" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>bezier-car.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="bezier-car.svg" stroke="#000000">
|
||||
<g id="car" transform="translate(20.000000, 12.000000)">
|
||||
<path d="M3.5483871,89.7419355 C-8.27956989,60.9784946 15.3763441,43.7204301 74.516129,37.9677419 C80.4301075,26.4623656 83.3870968,14.9569892 83.3870968,3.4516129 C183.924731,-8.05376344 228.27957,20.7096774 216.451613,89.7419355 L3.5483871,89.7419355 Z" id="Shape" stroke-width="2" fill="#C0C0C0"></path>
|
||||
<g id="crvpnt-link" transform="translate(0.000000, 86.290323)" fill="#D3D3D3">
|
||||
<ellipse id="crvpnt" cx="3.5483871" cy="3.4516129" rx="3.5483871" ry="3.4516129"></ellipse>
|
||||
</g>
|
||||
<g id="crvpnt-link" transform="translate(70.967742, 34.516129)" fill="#D3D3D3">
|
||||
<ellipse id="crvpnt" cx="3.5483871" cy="3.4516129" rx="3.5483871" ry="3.4516129"></ellipse>
|
||||
</g>
|
||||
<g id="crvpnt-link" transform="translate(79.838710, 0.000000)" fill="#D3D3D3">
|
||||
<ellipse id="crvpnt" cx="3.5483871" cy="3.4516129" rx="3.5483871" ry="3.4516129"></ellipse>
|
||||
</g>
|
||||
<g id="crvpnt-link" transform="translate(212.903226, 86.290323)" fill="#D3D3D3">
|
||||
<ellipse id="crvpnt" cx="3.5483871" cy="3.4516129" rx="3.5483871" ry="3.4516129"></ellipse>
|
||||
</g>
|
||||
<g id="wheel-link" transform="translate(39.032258, 72.483871)" fill="#D3D3D3" stroke-width="5">
|
||||
<ellipse id="wheel" cx="17.7419355" cy="17.2580645" rx="17.7419355" ry="17.2580645"></ellipse>
|
||||
</g>
|
||||
<g id="wheel-link" transform="translate(154.354839, 72.483871)" fill="#D3D3D3" stroke-width="5">
|
||||
<ellipse id="wheel" cx="17.7419355" cy="17.2580645" rx="17.7419355" ry="17.2580645"></ellipse>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
49
7-animation/1-bezier-curve/bezier-letter.svg
Normal file
49
7-animation/1-bezier-curve/bezier-letter.svg
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="166px" height="173px" viewBox="0 0 166 173" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>bezier-letter.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="bezier-letter.svg">
|
||||
<g id="blue-zones" transform="translate(13.000000, 3.000000)">
|
||||
<g id="g10" transform="translate(74.667210, 82.907153) scale(1, -1) translate(-74.667210, -82.907153) translate(0.167210, 0.907153)">
|
||||
<g id="g12" transform="translate(0.082789, 0.014893)">
|
||||
<g id="g14" transform="translate(0.000000, 0.000000)">
|
||||
<g id="g24" transform="translate(0.000000, 0.778344)">
|
||||
<path d="M94.1950078,31.5813173 C95.4706172,17.7726644 104.08103,3.27358276 119.069517,3.27358276 C125.766502,3.27358276 145.219636,8.10661506 145.219636,36.0691123 L145.219636,55.4012263 L137.247042,55.4012263 L137.247042,36.0691123 C137.247042,16.0465847 129.274434,13.975283 125.766502,13.975283 C115.242661,13.975283 113.967052,29.5100156 113.967052,31.2360953 L113.967052,100.279314 C113.967052,114.778396 113.967052,128.241826 102.486511,141.014828 C90.0492562,154.478259 74.1040547,160.001705 58.7966719,160.001705 C32.6465531,160.001705 10.6421719,143.776559 10.6421719,120.992285 C10.6421719,110.635807 17.0202609,104.767124 25.31175,104.767124 C34.2410719,104.767124 39.9813422,111.671458 39.9813422,120.647079 C39.9813422,124.789667 38.3868234,136.181796 23.7172453,136.527018 C32.3276438,148.609576 47.9539359,152.406957 58.1588672,152.406957 C73.7851594,152.406957 91.9626844,138.943527 91.9626844,108.219283 L91.9626844,95.4462967 C75.6985734,94.4106459 53.3752969,93.374995 33.2843578,83.0185168 C9.3665625,71.2811657 1.39396875,53.3299246 1.39396875,38.1404141 C1.39396875,10.1779168 32.3276437,1.54750305 52.4185969,1.54750305 C73.46625,1.54750305 88.1358281,15.3561407 94.1950078,31.5813173 L94.1950078,31.5813173 Z" id="path30" fill="#B3B3B3"></path>
|
||||
<path d="M91.9626844,88.1967559 L91.9626844,53.6751466 C91.9626844,20.879617 69.0016031,9.14226592 54.6509203,9.14226592 C39.0246281,9.14226592 25.9495688,21.2248238 25.9495688,38.4856361 C25.9495688,57.4725281 39.3435375,86.1254542 91.9626844,88.1967559 L91.9626844,88.1967559 Z" id="path32" fill="#FFFFFF"></path>
|
||||
<polygon id="path34" fill="#000000" points="93.0700078 30.3634803 95.3200078 30.3634803 95.3200078 32.7991391 93.0700078 32.7991391"></polygon>
|
||||
<polygon id="path36" fill="#000000" points="117.944503 2.05576097 120.194517 2.05576097 120.194517 4.49141976 117.944503 4.49141976"></polygon>
|
||||
<polygon id="path38" fill="#000000" points="144.094636 34.8512906 146.344636 34.8512906 146.344636 37.2869493 144.094636 37.2869493"></polygon>
|
||||
<polygon id="path40" fill="#000000" points="144.094636 54.1833893 146.344636 54.1833893 146.344636 56.6190481 144.094636 56.6190481"></polygon>
|
||||
<polygon id="path42" fill="#000000" points="136.122028 54.1833893 138.372042 54.1833893 138.372042 56.6190481 136.122028 56.6190481"></polygon>
|
||||
<polygon id="path44" fill="#000000" points="136.122028 34.8512906 138.372042 34.8512906 138.372042 37.2869493 136.122028 37.2869493"></polygon>
|
||||
<polygon id="path46" fill="#000000" points="124.641487 12.7574612 126.891502 12.7574612 126.891502 15.1931048 124.641487 15.1931048 124.641487 12.7574612"></polygon>
|
||||
<polygon id="path48" fill="#000000" points="112.842052 30.0182583 115.092052 30.0182583 115.092052 32.453917 112.842052 32.453917"></polygon>
|
||||
<polygon id="path50" fill="#000000" points="112.842052 99.061492 115.092052 99.061492 115.092052 101.497151 112.842052 101.497151"></polygon>
|
||||
<polygon id="path52" fill="#000000" points="101.361511 139.796991 103.611511 139.796991 103.611511 142.23265 101.361511 142.23265"></polygon>
|
||||
<polygon id="path54" fill="#000000" points="57.6716719 158.783883 59.9216719 158.783883 59.9216719 161.219527 57.6716719 161.219527"></polygon>
|
||||
<polygon id="path56" fill="#000000" points="9.51717187 119.774464 11.7671859 119.774464 11.7671859 122.210107 9.51717187 122.210107"></polygon>
|
||||
<polygon id="path58" fill="#000000" points="24.18675 103.549302 26.4367641 103.549302 26.4367641 105.984961 24.18675 105.984961"></polygon>
|
||||
<polygon id="path60" fill="#000000" points="38.8563281 119.429242 41.1063422 119.429242 41.1063422 121.8649 38.8563281 121.8649"></polygon>
|
||||
<polygon id="path62" fill="#000000" points="22.5922313 135.309181 24.8422453 135.309181 24.8422453 137.74484 22.5922313 137.74484"></polygon>
|
||||
<polygon id="path64" fill="#000000" points="57.0338531 151.189136 59.2838672 151.189136 59.2838672 153.624779 57.0338531 153.624779"></polygon>
|
||||
<polygon id="path66" fill="#000000" points="90.8376703 107.001462 93.0876844 107.001462 93.0876844 109.437121 90.8376703 109.437121"></polygon>
|
||||
<polygon id="path68" fill="#000000" points="90.8376703 94.228475 93.0876844 94.228475 93.0876844 96.6641185 90.8376703 96.6641185"></polygon>
|
||||
<polygon id="path70" fill="#000000" points="32.1593438 81.8006798 34.4093578 81.8006798 34.4093578 84.2363386 32.1593438 84.2363386 32.1593438 81.8006798"></polygon>
|
||||
<polygon id="path72" fill="#000000" points="0.26896875 36.9225923 2.51896875 36.9225923 2.51896875 39.3582358 0.26896875 39.3582358"></polygon>
|
||||
<polygon id="path74" fill="#000000" points="51.2935828 0.329681271 53.5435969 0.329681271 53.5435969 2.76534006 51.2935828 2.76534006"></polygon>
|
||||
<polygon id="path76" fill="#000000" points="93.0700078 30.3634803 95.3200078 30.3634803 95.3200078 32.7991391 93.0700078 32.7991391"></polygon>
|
||||
<polygon id="path78" fill="#000000" points="90.8376703 86.9789341 93.0876844 86.9789341 93.0876844 89.4145777 90.8376703 89.4145777"></polygon>
|
||||
<polygon id="path80" fill="#000000" points="90.8376703 52.4573096 93.0876844 52.4573096 93.0876844 54.8929684 90.8376703 54.8929684 90.8376703 52.4573096"></polygon>
|
||||
<polygon id="path82" fill="#000000" points="53.5259062 7.92442892 55.7759203 7.92442892 55.7759203 10.3600877 53.5259062 10.3600877"></polygon>
|
||||
<polygon id="path84" fill="#000000" points="24.8245688 37.2677991 27.0745688 37.2677991 27.0745688 39.7034579 24.8245688 39.7034579"></polygon>
|
||||
<polygon id="path86" fill="#000000" points="90.8376703 86.9789341 93.0876844 86.9789341 93.0876844 89.4145777 90.8376703 89.4145777"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.1 KiB |
48
7-animation/1-bezier-curve/bezier-vase.svg
Normal file
48
7-animation/1-bezier-curve/bezier-vase.svg
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="110px" height="170px" viewBox="0 0 110 170" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>bezier-vase.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="bezier-vase.svg">
|
||||
<g id="figure4-15" transform="translate(5.000000, 1.000000)">
|
||||
<path d="M32.0099502,161.208955 C12.5074627,121.606965 12.5074627,82.0049751 32.0099502,42.4029851 C38.5107794,29.2023217 38.5107794,16.0016584 32.0099502,2.80099502 L71.0149254,2.80099502 C64.5140962,16.0016584 64.5140962,29.2023217 71.0149254,42.4029851 C90.5174129,82.0049751 90.5174129,121.606965 71.0149254,161.208955 L32.0099502,161.208955 Z" id="Shape" stroke="#A0522D" stroke-width="2"></path>
|
||||
<path d="M32.0099502,2.80099502 L41.761194,22.60199 L2.75621891,101.80597 L32.0099502,161.208955" id="Shape" stroke="#000000" stroke-width="0.5" stroke-dasharray="2"></path>
|
||||
<path d="M71.0149254,2.80099502 L61.2636816,22.60199 L100.268657,101.80597 L71.0149254,161.208955" id="Shape" stroke="#000000" stroke-width="0.5" stroke-dasharray="2"></path>
|
||||
<g id="dot-link" transform="translate(49.562189, 0.820896)" fill="#FFFFFF" stroke="#000000">
|
||||
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
|
||||
</g>
|
||||
<g id="dot-link" transform="translate(30.059701, 0.820896)" fill="#FFFFFF" stroke="#000000">
|
||||
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
|
||||
</g>
|
||||
<g id="dot-link" transform="translate(39.810945, 20.621891)" fill="#FFFFFF" stroke="#000000">
|
||||
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
|
||||
</g>
|
||||
<g id="dot-link" transform="translate(30.059701, 40.422886)" fill="#FFFFFF" stroke="#000000">
|
||||
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
|
||||
</g>
|
||||
<g id="dot-link" transform="translate(0.805970, 99.825871)" fill="#FFFFFF" stroke="#000000">
|
||||
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
|
||||
</g>
|
||||
<g id="dot-link" transform="translate(30.059701, 159.228856)" fill="#FFFFFF" stroke="#000000">
|
||||
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
|
||||
</g>
|
||||
<g id="dot-link" transform="translate(69.064677, 0.820896)" fill="#FFFFFF" stroke="#000000">
|
||||
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
|
||||
</g>
|
||||
<g id="dot-link" transform="translate(59.313433, 20.621891)" fill="#FFFFFF" stroke="#000000">
|
||||
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
|
||||
</g>
|
||||
<g id="dot-link" transform="translate(69.064677, 40.422886)" fill="#FFFFFF" stroke="#000000">
|
||||
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
|
||||
</g>
|
||||
<g id="dot-link" transform="translate(98.318408, 99.825871)" fill="#FFFFFF" stroke="#000000">
|
||||
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
|
||||
</g>
|
||||
<g id="dot-link" transform="translate(69.064677, 159.228856)" fill="#FFFFFF" stroke="#000000">
|
||||
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
19
7-animation/1-bezier-curve/bezier2.svg
Normal file
19
7-animation/1-bezier-curve/bezier2.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>bezier2.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="bezier2.svg">
|
||||
<path d="M24.1700721,143.347957 L124.314002,43.5051082" id="Path-6" stroke="#CB1E31" stroke-width="2"></path>
|
||||
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="144" r="4"></circle>
|
||||
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="20" y="165">1</tspan>
|
||||
</text>
|
||||
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="44" r="4"></circle>
|
||||
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="120.100962" y="65">2</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
36
7-animation/1-bezier-curve/bezier3-draw1.svg
Normal file
36
7-animation/1-bezier-curve/bezier3-draw1.svg
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="340px" height="350px" viewBox="0 0 340 350" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>bezier3-draw1.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="bezier3-draw1.svg">
|
||||
<polyline id="Path-8" stroke="#E8C48E" points="37.2817473 314.327897 171.238321 46.8198382 306.203643 315.314199"></polyline>
|
||||
<path d="M37.7384781,314.327897 C136.049771,116.766237 225.925337,156.466387 305.894562,315.818178" id="Path-7" stroke="#CB1E31" stroke-width="2"></path>
|
||||
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="37" cy="316" r="4"></circle>
|
||||
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="33" y="337">1</tspan>
|
||||
</text>
|
||||
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" cx="306" cy="316" r="4"></circle>
|
||||
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="302" y="337">3</tspan>
|
||||
</text>
|
||||
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="171" cy="47" r="4"></circle>
|
||||
<circle id="Oval-4" fill="#CB1E31" cx="104" cy="215" r="4"></circle>
|
||||
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="167" y="39">2</tspan>
|
||||
</text>
|
||||
<text id="0.25" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="100" y="238">0.25</tspan>
|
||||
</text>
|
||||
<text id="t-=-0.25" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="12" y="254.848633">t = 0.25</tspan>
|
||||
</text>
|
||||
<text id="0.25" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="209" y="112">0.25</tspan>
|
||||
</text>
|
||||
<path d="M70.5,247.5 L204.5,114.5" id="Line" stroke="#62C0DC" stroke-width="2" stroke-linecap="square"></path>
|
||||
<image id="ease-in" x="231" y="-133" width="133" height="135" xlink:href="data:image/png;base64,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"></image>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
37
7-animation/1-bezier-curve/bezier3-draw2.svg
Normal file
37
7-animation/1-bezier-curve/bezier3-draw2.svg
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="340px" height="350px" viewBox="0 0 340 350" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>bezier3-draw2.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="bezier3-draw2.svg">
|
||||
<g id="Group" transform="translate(33.000000, 24.000000)">
|
||||
<polyline id="Path-8" stroke="#E8C48E" points="4.28174735 290.327897 138.238321 22.8198382 273.203643 291.314199"></polyline>
|
||||
<path d="M4.73847812,290.327897 C103.049771,92.7662372 192.925337,132.466387 272.894562,291.818178" id="Path-7" stroke="#CB1E31" stroke-width="2"></path>
|
||||
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="4" cy="292" r="4"></circle>
|
||||
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="0" y="313">1</tspan>
|
||||
</text>
|
||||
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" cx="273" cy="292" r="4"></circle>
|
||||
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="269" y="313">3</tspan>
|
||||
</text>
|
||||
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="138" cy="23" r="4"></circle>
|
||||
<circle id="Oval-4" fill="#CB1E31" cx="138" cy="157" r="4"></circle>
|
||||
<path d="M71.5,157 L205,157" id="Line" stroke="#62C0DC" stroke-width="2" stroke-linecap="square"></path>
|
||||
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="134" y="15">2</tspan>
|
||||
</text>
|
||||
<text id="0.5" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="128" y="181">0.5</tspan>
|
||||
</text>
|
||||
<text id="t-=-0.5" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="17" y="163">t = 0.5</tspan>
|
||||
</text>
|
||||
<text id="0.5" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="216" y="163">0.5</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
24
7-animation/1-bezier-curve/bezier3-e.svg
Normal file
24
7-animation/1-bezier-curve/bezier3-e.svg
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>bezier3-e.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="bezier3-e.svg">
|
||||
<polygon id="Triangle-1" stroke="#E8C48E" points="74.5 43 125 144 24 144"></polygon>
|
||||
<path d="M24.2788462,143.124399 C74.499953,42.9398992 114.209434,125.40565 124.100962,143.645433" id="Path-4" stroke="#CB1E31" stroke-width="2"></path>
|
||||
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="144" r="4"></circle>
|
||||
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="20" y="165">1</tspan>
|
||||
</text>
|
||||
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="144" r="4"></circle>
|
||||
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="120" y="165">3</tspan>
|
||||
</text>
|
||||
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" cx="74" cy="44" r="4"></circle>
|
||||
<text id="-4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="70.1899038" y="36">3</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
23
7-animation/1-bezier-curve/bezier3.svg
Normal file
23
7-animation/1-bezier-curve/bezier3.svg
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>bezier3.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="bezier3.svg">
|
||||
<path d="M24.2788462,143.124399 C74.499953,42.9398992 114.209434,125.40565 124.100962,143.645433" id="Path-4" stroke="#CB1E31" stroke-width="2"></path>
|
||||
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="144" r="4"></circle>
|
||||
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="20" y="165">1</tspan>
|
||||
</text>
|
||||
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="144" r="4"></circle>
|
||||
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="120" y="165">3</tspan>
|
||||
</text>
|
||||
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" cx="74" cy="44" r="4"></circle>
|
||||
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="69.9899038" y="32">2</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB |
28
7-animation/1-bezier-curve/bezier4-e.svg
Normal file
28
7-animation/1-bezier-curve/bezier4-e.svg
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>bezier4-e.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="bezier4-e.svg">
|
||||
<path d="M72.5144872,143.5 L122.714983,43.5 L74.0143159,43.5 L23.81382,143.5 L72.5144872,143.5 Z" id="Rectangle-1" stroke="#E8C48E"></path>
|
||||
<path d="M23.6882043,143.904835 C73.7030381,143.904854 74.3912999,43.4905636 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2"></path>
|
||||
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="144" r="4"></circle>
|
||||
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="43" r="4"></circle>
|
||||
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" cx="73" cy="43" r="4"></circle>
|
||||
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" cx="73" cy="143" r="4"></circle>
|
||||
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="20" y="165">1</tspan>
|
||||
</text>
|
||||
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="69" y="165">2</tspan>
|
||||
</text>
|
||||
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="69" y="35">3</tspan>
|
||||
</text>
|
||||
<text id="4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="121" y="35">4</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
27
7-animation/1-bezier-curve/bezier4.svg
Normal file
27
7-animation/1-bezier-curve/bezier4.svg
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>bezier4.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="bezier4.svg">
|
||||
<path d="M23.6882043,143.904835 C73.7030381,143.904854 74.3912999,43.4905636 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2"></path>
|
||||
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="144" r="4"></circle>
|
||||
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="43" r="4"></circle>
|
||||
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" cx="73" cy="43" r="4"></circle>
|
||||
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" cx="73" cy="143" r="4"></circle>
|
||||
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="20" y="165">1</tspan>
|
||||
</text>
|
||||
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="69" y="165">2</tspan>
|
||||
</text>
|
||||
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="69" y="35">3</tspan>
|
||||
</text>
|
||||
<text id="4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="121" y="35">4</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
|
|
@ -0,0 +1,30 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>bezier-up.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="bezier-up.svg">
|
||||
<path d="M12.5,60.5 L135.5,60.5" id="Line-3" stroke="#979797" opacity="0.7" stroke-linecap="square" stroke-dasharray="3,2,3,3"></path>
|
||||
<path d="M24.5,160.5 L49.5,13.5" id="Line" stroke="#E8C48E" stroke-linecap="square"></path>
|
||||
<path d="M124.5,60.5 L99.5,9.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square"></path>
|
||||
<path d="M23.6666667,160.666667 C48.6666667,10.6666667 98.6666667,10.6666667 123.666667,60.6666667" id="bezier-path" stroke="#CB1E00" stroke-width="2"></path>
|
||||
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="161" r="4"></circle>
|
||||
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="60" r="4"></circle>
|
||||
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" cx="49" cy="11" r="4"></circle>
|
||||
<circle id="Oval-5" stroke="#E8C48E" fill="#FFFFFF" cx="99" cy="11" r="4"></circle>
|
||||
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="20" y="182">1</tspan>
|
||||
</text>
|
||||
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="33" y="16">2</tspan>
|
||||
</text>
|
||||
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="106" y="16">3</tspan>
|
||||
</text>
|
||||
<text id="4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="127" y="52">4</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
|
|
@ -4,4 +4,4 @@ For instance, we can take both control points with `y>1`, like: `cubic-bezier(0.
|
|||
|
||||
The graph:
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@ The simplest variant is when the animation goes uniformly, with the same linear
|
|||
|
||||
Here's how that curve looks:
|
||||
|
||||
|
||||
|
||||
|
||||
...As we can see, it's just a straight line. As the time (`x`) passes, the completion (`y`) of the animation steadily goes from `0` to `1`.
|
||||
|
||||
|
|
@ -178,7 +178,7 @@ We can use another Bezier curve: `cubic-bezier(0.0, 0.5, 0.5 ,1.0)`.
|
|||
|
||||
The graph:
|
||||
|
||||
|
||||
|
||||
|
||||
As we can see, the process starts fast: the curve soars up high, and then slower and slower.
|
||||
|
||||
|
|
@ -204,7 +204,7 @@ Other names are shorthands for the following `cubic-bezier`:
|
|||
| <code>ease</code><sup>*</sup> | <code>ease-in</code> | <code>ease-out</code> | <code>ease-in-out</code> |
|
||||
|-------------------------------|----------------------|-----------------------|--------------------------|
|
||||
| <code>(0.25, 0.1, 0.25, 1.0)</code> | <code>(0.42, 0, 1.0, 1.0)</code> | <code>(0, 0, 0.58, 1.0)</code> | <code>(0.42, 0, 0.58, 1.0)</code> |
|
||||
|  |  |  |  |
|
||||
|  |  |  |  |
|
||||
|
||||
`*` -- by default, if there's no timing function, `ease` is used.
|
||||
|
||||
|
|
@ -246,7 +246,7 @@ But if you click the train, you'll see that:
|
|||
|
||||
Why it happens -- pretty obvious if we look at the graph of the given Bezier curve:
|
||||
|
||||
|
||||
|
||||
|
||||
We moved the `y` coordinate of the 2nd point below zero, and for the 3rd point we made put it over `1`, so the curve goes out of the "regular" quadrant. The `y` is out of the "standard" range `0..1`.
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
23
7-animation/2-css-animations/bezier-linear.svg
Normal file
23
7-animation/2-css-animations/bezier-linear.svg
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="144px" height="150px" viewBox="0 0 144 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>bezier-linear.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="bezier-linear.svg">
|
||||
<g id="1" transform="translate(12.000000, 13.000000)">
|
||||
<g id="Group">
|
||||
<path d="M4.17,103.348 L104.314,3.505" id="Shape" stroke="#CB1E31" stroke-width="2"></path>
|
||||
<circle id="Oval" stroke="#E8C48E" fill="#FFFFFF" cx="4" cy="104" r="4"></circle>
|
||||
<text id="1" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="10.2803872" font-weight="bold">
|
||||
<tspan x="0" y="125">1</tspan>
|
||||
</text>
|
||||
<circle id="Oval" stroke="#E8C48E" fill="#FFFFFF" cx="104" cy="4" r="4"></circle>
|
||||
<text id="2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="10.2803872" font-weight="bold">
|
||||
<tspan x="100.101" y="25">2</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
50
7-animation/2-css-animations/bezier-train-over.svg
Normal file
50
7-animation/2-css-animations/bezier-train-over.svg
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="225px" height="331px" viewBox="0 0 225 331" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>bezier-train-over.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<defs>
|
||||
<rect id="path-1" x="34" y="15" width="150" height="150"></rect>
|
||||
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="150" height="150" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
</defs>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="bezier-train-over.svg">
|
||||
<g id="Group" opacity="0.7" transform="translate(0.000000, 74.000000)">
|
||||
<use id="Rectangle-233" stroke="#979797" mask="url(#mask-2)" stroke-width="2" stroke-dasharray="3,2,3,2" xlink:href="#path-1"></use>
|
||||
<text id="(1,1)" font-family="PTMono-Bold, PT Mono" font-size="12" font-weight="bold" fill="#838383">
|
||||
<tspan x="189" y="11">(1,1)</tspan>
|
||||
</text>
|
||||
<text id="(0,0)" font-family="PTMono-Bold, PT Mono" font-size="12" font-weight="bold" fill="#838383">
|
||||
<tspan x="0" y="157">(0,0)</tspan>
|
||||
</text>
|
||||
<text id="(0,1)" font-family="PTMono-Bold, PT Mono" font-size="12" font-weight="bold" fill="#838383">
|
||||
<tspan x="0" y="11">(0,1)</tspan>
|
||||
</text>
|
||||
<text id="(1,0)" font-family="PTMono-Bold, PT Mono" font-size="12" font-weight="bold" fill="#838383">
|
||||
<tspan x="189" y="157">(1,0)</tspan>
|
||||
</text>
|
||||
</g>
|
||||
<path d="M34.5,239.5 L107.5,312.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square"></path>
|
||||
<path d="M34,239 C109,314 109,14 184,89" id="bezier-path" stroke="#CB1E31" stroke-width="2"></path>
|
||||
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" cx="34" cy="239" r="4"></circle>
|
||||
<text id="-2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="30" y="261">1</tspan>
|
||||
</text>
|
||||
<circle id="Oval-6" stroke="#E8C48E" fill="#FFFFFF" cx="109" cy="314" r="4"></circle>
|
||||
<text id="-3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="92" y="320">2</tspan>
|
||||
</text>
|
||||
<path d="M110.5,15.5 L183.5,88.5" id="Line" stroke="#E8C48E" stroke-linecap="square"></path>
|
||||
<circle id="Oval-5" stroke="#E8C48E" fill="#FFFFFF" cx="184" cy="89" r="4"></circle>
|
||||
<text id="-5" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="188" y="107">4</tspan>
|
||||
</text>
|
||||
<circle id="Oval-7" stroke="#E8C48E" fill="#FFFFFF" cx="109" cy="14" r="4"></circle>
|
||||
<text id="-4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="92" y="21">3</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
29
7-animation/2-css-animations/ease-in-out.svg
Normal file
29
7-animation/2-css-animations/ease-in-out.svg
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>ease-in-out.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="ease-in-out.svg">
|
||||
<path d="M23.6882043,143.904835 C66.0081124,143.904815 81.7292657,43.4905742 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2"></path>
|
||||
<path d="M24.5,143.5 L66.7965736,143.5" id="Line" stroke="#E8C48E" stroke-linecap="square"></path>
|
||||
<path d="M83.5,43.5 L125.796574,43.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square"></path>
|
||||
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="144" r="4"></circle>
|
||||
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="43" r="4"></circle>
|
||||
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" cx="82" cy="43" r="4"></circle>
|
||||
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" cx="66" cy="143" r="4"></circle>
|
||||
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="20" y="165">1</tspan>
|
||||
</text>
|
||||
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="62" y="165">2</tspan>
|
||||
</text>
|
||||
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="78" y="35">3</tspan>
|
||||
</text>
|
||||
<text id="4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="121" y="35">4</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
27
7-animation/2-css-animations/ease-in.svg
Normal file
27
7-animation/2-css-animations/ease-in.svg
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>ease-in.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="ease-in.svg">
|
||||
<path d="M23.6882043,143.904835 C66.0081124,143.904815 124.154864,43.4905689 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2"></path>
|
||||
<path d="M24.5,143.5 L66.7965736,143.5" id="Line" stroke="#E8C48E" stroke-linecap="square"></path>
|
||||
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="144" r="4"></circle>
|
||||
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="43" r="4"></circle>
|
||||
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" cx="66" cy="143" r="4"></circle>
|
||||
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="20" y="165">1</tspan>
|
||||
</text>
|
||||
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="62" y="165">2</tspan>
|
||||
</text>
|
||||
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="114" y="35">3</tspan>
|
||||
</text>
|
||||
<text id="4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="127" y="35">4</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
27
7-animation/2-css-animations/ease-out.svg
Normal file
27
7-animation/2-css-animations/ease-out.svg
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>ease-out.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="ease-out.svg">
|
||||
<path d="M23.6882043,143.904835 C23.6882043,143.904835 81.8846154,43.4905689 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2"></path>
|
||||
<path d="M83.5,43.5 L123.799999,43.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square"></path>
|
||||
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="144" r="4"></circle>
|
||||
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="43" r="4"></circle>
|
||||
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" cx="82" cy="43" r="4"></circle>
|
||||
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="13" y="165">1</tspan>
|
||||
</text>
|
||||
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="27" y="165">2</tspan>
|
||||
</text>
|
||||
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="79" y="35">3</tspan>
|
||||
</text>
|
||||
<text id="4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="120" y="35">4</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
29
7-animation/2-css-animations/ease.svg
Normal file
29
7-animation/2-css-animations/ease.svg
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>ease.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="ease.svg">
|
||||
<path d="M23.6882043,143.904835 C48.7884621,134.014426 48.7884621,43.4905636 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2"></path>
|
||||
<path d="M24.5,143.5 L48.5,134.5" id="Line" stroke="#E8C48E" stroke-linecap="square"></path>
|
||||
<path d="M50.5,43.5 L123.800003,43.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square"></path>
|
||||
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="144" r="4"></circle>
|
||||
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="43" r="4"></circle>
|
||||
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" cx="49" cy="43" r="4"></circle>
|
||||
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" cx="49" cy="134" r="4"></circle>
|
||||
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="20" y="165">1</tspan>
|
||||
</text>
|
||||
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="45" y="156">2</tspan>
|
||||
</text>
|
||||
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="45" y="35">3</tspan>
|
||||
</text>
|
||||
<text id="4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="121" y="35">4</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4 KiB |
29
7-animation/2-css-animations/train-curve.svg
Normal file
29
7-animation/2-css-animations/train-curve.svg
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>train-curve.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="train-curve.svg">
|
||||
<path d="M26.1366543,142.907525 C26.1365899,93.4999868 76.5010648,43.244154 126.495114,43.2441555" id="Path-13" stroke="#CB1E31" stroke-width="2"></path>
|
||||
<path d="M25.5,143.5 L25.5,93.3402552" id="Line" stroke="#E8C48E" stroke-linecap="square"></path>
|
||||
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" cx="26" cy="144" r="4"></circle>
|
||||
<text id="-2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="22" y="165">1</tspan>
|
||||
</text>
|
||||
<circle id="Oval-6" stroke="#E8C48E" fill="#FFFFFF" cx="26" cy="94" r="4"></circle>
|
||||
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="22" y="87">2</tspan>
|
||||
</text>
|
||||
<path d="M75.5,43.5 L126.135956,43.5" id="Line" stroke="#E8C48E" stroke-linecap="square"></path>
|
||||
<circle id="Oval-5" stroke="#E8C48E" fill="#FFFFFF" cx="126" cy="44" r="4"></circle>
|
||||
<text id="4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="122" y="36">4</tspan>
|
||||
</text>
|
||||
<circle id="Oval-7" stroke="#E8C48E" fill="#FFFFFF" cx="76" cy="44" r="4"></circle>
|
||||
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="72" y="36">3</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 KiB |
|
|
@ -160,7 +160,7 @@ Function `animate` accepts 3 parameters that essentially describes the animation
|
|||
```
|
||||
|
||||
It's graph:
|
||||
|
||||
|
||||
|
||||
That's just like `transition-timing-function: linear`. There are more interesting variants shown below.
|
||||
|
||||
|
|
@ -221,7 +221,7 @@ function quad(timeFraction) {
|
|||
|
||||
The graph:
|
||||
|
||||
|
||||
|
||||
|
||||
See in action (click to activate):
|
||||
|
||||
|
|
@ -231,7 +231,7 @@ See in action (click to activate):
|
|||
|
||||
Here's the graph for `progress` in the power `5`:
|
||||
|
||||
|
||||
|
||||
|
||||
In action:
|
||||
|
||||
|
|
@ -249,7 +249,7 @@ function circ(timeFraction) {
|
|||
|
||||
The graph:
|
||||
|
||||
|
||||
|
||||
|
||||
[iframe height=40 src="circ" link]
|
||||
|
||||
|
|
@ -269,7 +269,7 @@ function back(x, timeFraction) {
|
|||
|
||||
**The graph for `x = 1.5`:**
|
||||
|
||||
|
||||
|
||||
|
||||
For animation we use it with a specific value of `x`. Example for `x = 1.5`:
|
||||
|
||||
|
|
@ -306,7 +306,7 @@ function elastic(x, timeFraction) {
|
|||
```
|
||||
|
||||
**The graph for `x=1.5`:**
|
||||
|
||||
|
||||
|
||||
In action for `x=1.5`:
|
||||
|
||||
|
|
@ -349,7 +349,7 @@ Then the bounce will be not in the beginning, but at the end of the animation. L
|
|||
|
||||
Here we can see how the transform changes the behavior of the function:
|
||||
|
||||
|
||||
|
||||
|
||||
If there's an animation effect in the beginning, like bouncing -- it will be shown at the end.
|
||||
|
||||
|
|
@ -395,7 +395,7 @@ The "easeInOut" transform joins two graphs into one: `easeIn` (regular) for the
|
|||
|
||||
The effect is clearly seen if we compare the graphs of `easeIn`, `easeOut` and `easeInOut` of the `circ` timing function:
|
||||
|
||||
|
||||
|
||||
|
||||
- <span style="color:#EE6B47">Red</span> is the regular variantof `circ` (`easeIn`).
|
||||
- <span style="color:#8DB173">Green</span> -- `easeOut`.
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB |
22
7-animation/3-js-animation/back.svg
Normal file
22
7-animation/3-js-animation/back.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="234px" height="240px" viewBox="0 0 234 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>back.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="back.svg">
|
||||
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
|
||||
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></path>
|
||||
<path d="M35.3289777,193.635841 C35.3289777,193.635841 82.5458318,209.484914 105.066994,208.643536 C127.588155,207.802158 166.326582,214.914724 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3"></path>
|
||||
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="17" y="212">0</tspan>
|
||||
</text>
|
||||
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="17" y="36">1</tspan>
|
||||
</text>
|
||||
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="200" y="212">1</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
23
7-animation/3-js-animation/bezier-linear.svg
Normal file
23
7-animation/3-js-animation/bezier-linear.svg
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="144px" height="150px" viewBox="0 0 144 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>bezier-linear.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="bezier-linear.svg">
|
||||
<g id="1" transform="translate(12.000000, 13.000000)">
|
||||
<g id="Group">
|
||||
<path d="M4.17,103.348 L104.314,3.505" id="Shape" stroke="#CB1E31" stroke-width="2"></path>
|
||||
<circle id="Oval" stroke="#E8C48E" fill="#FFFFFF" cx="4" cy="104" r="4"></circle>
|
||||
<text id="1" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="10.2803872" font-weight="bold">
|
||||
<tspan x="0" y="125">1</tspan>
|
||||
</text>
|
||||
<circle id="Oval" stroke="#E8C48E" fill="#FFFFFF" cx="104" cy="4" r="4"></circle>
|
||||
<text id="2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="10.2803872" font-weight="bold">
|
||||
<tspan x="100.101" y="25">2</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
23
7-animation/3-js-animation/bounce-inout.svg
Normal file
23
7-animation/3-js-animation/bounce-inout.svg
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="234px" height="240px" viewBox="0 0 234 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>bounce-inout.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="bounce-inout.svg">
|
||||
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
|
||||
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></path>
|
||||
<path d="M35.3289777,193.635841 C35.3289777,193.635841 41.2333124,187.095281 52.2325098,193.635839 C55.4414764,183.659866 71.0514816,178.107189 80.7686063,193.635839 C89.032676,167.620814 117,110.452183 144.182478,194.552328 C148.063747,176.586161 175.037321,10.6423763 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3" stroke-linejoin="bevel"></path>
|
||||
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="17" y="212">0</tspan>
|
||||
</text>
|
||||
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="17" y="36">1</tspan>
|
||||
</text>
|
||||
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="200" y="212">1</tspan>
|
||||
</text>
|
||||
<path d="M35.4840461,192.776816 C53.45735,186.177656 69.3490979,170.128038 97.137513,18.4980531 C102.051415,32.4334475 112.013077,63.0795933 127.058929,63.996791 C142.104781,64.9139886 156.560556,31.0473534 160.222221,20.3348259 C166.618848,28.1959597 165.111566,31.4251632 174.958382,31.425163 C184.805198,31.4251628 190.347191,21.8729943 191.581215,20.6199652 C193.7855,22.5969315 202.177314,24.4036062 206.959731,21.4508296" id="Path-770" stroke="#62C0DC" stroke-width="3" stroke-linejoin="bevel"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
24
7-animation/3-js-animation/circ-ease.svg
Normal file
24
7-animation/3-js-animation/circ-ease.svg
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="234px" height="240px" viewBox="0 0 234 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>circ-ease.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="circ-ease.svg">
|
||||
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
|
||||
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></path>
|
||||
<path d="M35.1598321,193.734972 C116.357678,193.734973 200.574538,141.537458 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3" stroke-linejoin="bevel"></path>
|
||||
<path d="M35.1598321,193.734972 C116.357678,193.734973 200.574538,141.537458 208.465749,22.4456533" id="Path-748" stroke="#8DB173" stroke-width="3" stroke-linejoin="bevel" transform="translate(121.812790, 108.090312) scale(-1, -1) translate(-121.812790, -108.090312) "></path>
|
||||
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="17" y="212">0</tspan>
|
||||
</text>
|
||||
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="17" y="36">1</tspan>
|
||||
</text>
|
||||
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="200" y="212">1</tspan>
|
||||
</text>
|
||||
<path d="M35.4840461,192.776816 C53.45735,186.177656 112.052703,195.594079 121.221885,109.458253 C130.391067,23.3224269 202.177314,24.4036062 206.959731,21.4508296" id="Path-770" stroke="#62C0DC" stroke-width="3" stroke-linejoin="bevel"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
22
7-animation/3-js-animation/circ.svg
Normal file
22
7-animation/3-js-animation/circ.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="234px" height="240px" viewBox="0 0 234 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>circ.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="circ.svg">
|
||||
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
|
||||
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></path>
|
||||
<path d="M35.3289777,193.635841 C35.3289777,193.635841 189.874769,197.008001 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3"></path>
|
||||
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="17" y="212">0</tspan>
|
||||
</text>
|
||||
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="17" y="36">1</tspan>
|
||||
</text>
|
||||
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="200" y="212">1</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
22
7-animation/3-js-animation/elastic.svg
Normal file
22
7-animation/3-js-animation/elastic.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="233px" height="388px" viewBox="0 0 233 388" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>elastic.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="elastic.svg">
|
||||
<path id="Line" d="M35,36.1600037 L35,366 L33,366 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
|
||||
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></path>
|
||||
<path d="M34.8792035,192.69782 C38.3217915,192.697818 46.5362784,191.195974 53.4936997,193.038137 C62.0206897,195.295885 61.5154635,189.622956 87.0139157,194.339254 C100.114357,196.762365 100.423927,183.608251 115.161483,194.900075 C135.318831,210.34451 133.877092,159.362737 148.519851,194.677907 C151.940119,202.926853 155.398942,217.279032 158.65332,214.286779 C161.563227,211.611251 163.848094,194.907207 173.23036,150.175435 C177.841468,128.191083 188.232669,296.296579 192.347319,280.535848 C201.966406,243.690946 203.555755,39.1411041 207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3"></path>
|
||||
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="17" y="212">0</tspan>
|
||||
</text>
|
||||
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="17" y="36">1</tspan>
|
||||
</text>
|
||||
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="200" y="212">1</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
22
7-animation/3-js-animation/linear.svg
Normal file
22
7-animation/3-js-animation/linear.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="234px" height="240px" viewBox="0 0 234 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>linear.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="linear.svg">
|
||||
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
|
||||
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></path>
|
||||
<path d="M35.3289777,193.635841 L207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3"></path>
|
||||
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="17" y="212">0</tspan>
|
||||
</text>
|
||||
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="17" y="36">1</tspan>
|
||||
</text>
|
||||
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="200" y="212">1</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.4 KiB |
22
7-animation/3-js-animation/quad.svg
Normal file
22
7-animation/3-js-animation/quad.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="234px" height="240px" viewBox="0 0 234 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>quad.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="quad.svg">
|
||||
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
|
||||
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></path>
|
||||
<path d="M35.3289777,193.635841 C35.3289777,193.635841 113.802694,208.841146 207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3"></path>
|
||||
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="17" y="212">0</tspan>
|
||||
</text>
|
||||
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="17" y="36">1</tspan>
|
||||
</text>
|
||||
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="200" y="212">1</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6 KiB |
22
7-animation/3-js-animation/quint.svg
Normal file
22
7-animation/3-js-animation/quint.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="234px" height="240px" viewBox="0 0 234 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>quint.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="quint.svg">
|
||||
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
|
||||
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></path>
|
||||
<path d="M35.3289777,193.635841 C149.458906,196.88389 171.361738,184.274633 207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3"></path>
|
||||
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="17" y="212">0</tspan>
|
||||
</text>
|
||||
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="17" y="36">1</tspan>
|
||||
</text>
|
||||
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
|
||||
<tspan x="200" y="212">1</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Loading…
Add table
Add a link
Reference in a new issue