CSS Motion Pathã§é«åºŠãªãŠã§ãã¢ãã¡ãŒã·ã§ã³ãè§£ãæŸã¡ãŸãããããªããžã§ã¯ããã¢ã€ã³ã³ãããã¹ãã®åçãªSVGããŒã¹ã®åããäœæããäžçäžã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããæ¹æ³ãåŠã³ãŸãã
CSS Motion Pathã®ç¿åŸïŒã¢ãã³ãŠã§ãåãSVG掻çšã¢ãã¡ãŒã·ã§ã³ã®äœæ
ãŠã§ãéçºã®ãã€ãããã¯ãªäžçã«ãããŠãé åçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã¯æãéèŠã§ããéçãªã¬ã€ã¢ãŠããåºæ¬çãªãã©ã³ãžã·ã§ã³ãè¶ ããŠãçŸä»£ã®ãŠã§ãã¢ããªã±ãŒã·ã§ã³ã«ã¯æµåæ§ããšã³ã²ãŒãžã¡ã³ãããããŠã¡ãã£ãšããéæ³ãæ±ããããŸããããã§CSS Motion Pathã匷åãªããŒã«ãšããŠç»å ŽããŸããããã«ãããéçºè ãšãã¶ã€ããŒã¯ãè€éãªãã¹ããŒã¹ã®ã¢ãã¡ãŒã·ã§ã³ãåªé ãã€æ£ç¢ºã«ãªãŒã±ã¹ãã¬ãŒã·ã§ã³ã§ããŸããããããªãã¯ããã¯ãšã¯ããé¢ããŠãCSS Motion Pathã¯SVGãã¹ã®å€æ§æ§ãšçµã¿åãããããšã§ãã€ã³ã¿ã©ã¯ãã£ãã§èŠèŠçã«è±ããªãŠã§ãã€ã³ã¿ãŒãã§ãŒã¹ã®ããã®åµé çãªå¯èœæ§ã®æ°ããªé åãäžççã«éæããŸãã
ãã®å æ¬çãªã¬ã€ãã§ã¯ãCSS Motion Pathã®äžçãæ·±ãæãäžãããã®åºæ¬çãªæŠå¿µãå®çšçãªã¢ããªã±ãŒã·ã§ã³ããããŠãã¹ããã©ã¯ãã£ã¹ãæ¢æ±ããŸãããŠã§ãã¢ãã¡ãŒã·ã§ã³ã®éçãæŒãåºããããšããŠããçµéšè±å¯ãªããã³ããšã³ãéçºè ã§ãããããªãã®ããžã§ã³ãå®çŸããããšç±æãã奜å¥å¿æºçãªãã¶ã€ããŒã§ããããã®ãã¯ãããžãŒãçè§£ããããšã¯ãåœéçãªèŠèŽè ã®ããã«çã«æ²¡å ¥æã®ããããžã¿ã«äœéšãåµé ããããã®éèŠãªã¹ãããã§ãã
æ žãšãªãæŠå¿µïŒã¢ãã¡ãŒã·ã§ã³ã®åè¶æ§ãžã®éçããã©ã
CSS Motion Pathã®æ žå¿ã¯ãä»»æã®HTMLèŠçŽ ãç¹å®ã®å¹ŸäœåŠçãã¹ã«æ²¿ã£ãŠã¢ãã¡ãŒã·ã§ã³ãããããšã§ããã¢ã€ã³ã³ãå圢ã®ããŽã®åšããæ»ããã«æ»ç©ºããããããã¹ãèŠçŽ ãã«ã¹ã¿ã ã«ãŒãã«æ²¿ã£ãŠçŸããããè€éãªããŒããŒã粟巧ãªSVGãã¶ã€ã³ã«è¿œåŸãããããã®ãæ³åããŠã¿ãŠãã ãããCSS Motion Pathãç»å Žããåã¯ããã®ãããªå¹æãéæããã«ã¯ãéåžžãæ±ãã«ããJavaScriptèšç®ãè€éãªå€æè¡åããŸãã¯ç¶æãšæ¡åŒµãå°é£ãªäžé£ã®ç²Ÿå·§ã«äœæãããããŒãã¬ãŒã ã¢ãã¡ãŒã·ã§ã³ãå¿ èŠã§ããã
CSS Motion Pathã¯ãèŠçŽ ãoffset-pathã«åŸãããšãå¯èœã«ããCSSããããã£ãæäŸããããšã§ããããç°¡çŽ åããŸãããã®offset-pathã¯ããã€ãã®æ¹æ³ã§å®çŸ©ã§ããŸããããã®æã匷åãªåœ¢åŒã¯Scalable Vector Graphics (SVG) pathsãæŽ»çšããããšã«ãã£ãŠå®çŸããŸããSVGãã¹ã¯ãåçŽãªç·ãæ²ç·ããéåžžã«è€éãªè€å圢ç¶ãŸã§ãäºå®äžãããã2次å
圢ç¶ãèšè¿°ã§ãããããä¿¡ããããªãã»ã©åŒ·åã§ããCSSã¢ãã¡ãŒã·ã§ã³ãšSVGãã¹å®çŸ©ãçµã¿åãããããšã§ãèŠçŽ ã®åããæ¯é¡ãªãå¶åŸ¡ã§ããããã«ãªããéçãªèŠçŽ ãé
åçãªã¹ããŒãªãŒãã©ãŒã«å€ããããšãã§ããŸãã
ãªãCSS Motion Pathãæ¡çšããã®ãïŒ
- 粟å¯ãªå¶åŸ¡ïŒç·åœ¢ãŸãã¯æŸå°ç¶ã®åãã ãã§ãªããèŠçŽ ã®æ£ç¢ºãªè»éãå®çŸ©ããŸãã
- 宣èšçãªã¢ãã¡ãŒã·ã§ã³ïŒã¢ãã¡ãŒã·ã§ã³ããžãã¯ãCSSå ã«ä¿æããããšã§ãèªã¿æžããšä¿å®ã容æã«ãªããŸãã
- ããã©ãŒãã³ã¹ïŒç¹ã«
offset-distanceã®ãããªããããã£ãã¢ãã¡ãŒã·ã§ã³åããå Žåããã©ãŠã¶ã®æé©åãããã¢ãã¡ãŒã·ã§ã³ãšã³ãžã³ã掻çšããããšããããããŸãã - ã¬ã¹ãã³ã·ãæ§ïŒSVGãã¹ã¯æ¬è³ªçã«ã¹ã±ãŒã©ãã«ã§ãããããŸããŸãªç»é¢ãµã€ãºãè§£å床ã«åãããŠã¢ãã¡ãŒã·ã§ã³ãé©åã«èª¿æŽãããŸãã
- åµé ã®èªç±ïŒã¢ãŒã·ã§ã³ãã¶ã€ã³ã®ç¡éã®å¯èœæ§ãè§£ãæŸã¡ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãšãã©ã³ãã¢ã€ãã³ãã£ãã£ãåäžãããŸãã
SVGãã¹ïŒã¢ãŒã·ã§ã³ãã¹ã®åºç€
CSS Motion Pathãç¿åŸããã«ã¯ãSVGãã¹ã®åºæ¬çãªçè§£ãäžå¯æ¬ ã§ããSVGãã¹ã¯ããã®åœ¢ç¶ã決å®ããäžé£ã®ã³ãã³ããšåº§æšã«ãã£ãŠå®çŸ©ãããŸãããããã®ã³ãã³ãã¯ãç·ãæ²ç·ãããã³å匧ãæç»ããããã®ç°¡æœãªèšèªã§ãã
åºæ¬çãªSVGãã¹ã³ãã³ãïŒã¯ã€ãã¯å ¥é
ãã¹ãŠã®ãã¹ããŒã¿ã¯ã<path>èŠçŽ å
ã®d屿§ããå§ãŸããŸããäŸïŒ<path d="M 10 10 L 90 90 Z" />ãäžè¬çãªã³ãã³ãã®æŠèŠã以äžã«ç€ºããŸãã
- M (moveto):
M x yâ ç·ãæããã«ãã³ãæ°ããç¹ã«ç§»åããŸããããã¯ãã¹ã®éå§ãã»ã°ã¡ã³ãéã®ãã³ã®æã¡äžãã«éèŠã§ãã - L (lineto):
L x yâ çŸåšã®ç¹ããæå®ããã(x, y)座æšãŸã§çŽç·ãæç»ããŸãã - H (horizontal lineto):
H xâ æå®ãããx座æšãŸã§æ°Žå¹³ç·ãæç»ããŸããy座æšã¯å€åããŸããã - V (vertical lineto):
V yâ æå®ãããy座æšãŸã§åçŽç·ãæç»ããŸããx座æšã¯å€åããŸããã - Z (closepath):
Zâ çŸåšã®ç¹ããçŸåšã®ãµããã¹ã®éå§ç¹ãŸã§çŽç·ãæç»ããããšã§ãçŸåšã®ãµããã¹ãéããŸãã - C (curveto):
C x1 y1, x2 y2, x yâ 3次ããžã§æ²ç·ãæç»ããŸãã(x1, y1)ãš(x2, y2)ã¯å¶åŸ¡ç¹ã§ããã(x, y)ã¯çµç¹ã§ããããã¯æ»ããã§æµãããããªæ²ç·ã«äœ¿çšãããŸãã - S (smooth curveto):
S x2 y2, x yâ æ»ãããª3次ããžã§æ²ç·ãæç»ããŸããæåã®å¶åŸ¡ç¹ã¯ãåã®CãŸãã¯Sã³ãã³ãã®2çªç®ã®å¶åŸ¡ç¹ã®åå°ã§ãããšä»®å®ããŸãã - Q (quadratic Bézier curveto):
Q x1 y1, x yâ 2次ããžã§æ²ç·ãæç»ããŸãã(x1, y1)ã¯å¶åŸ¡ç¹ã§ããã(x, y)ã¯çµç¹ã§ãã3次ããžã§ãããåçŽã§ãã - T (smooth quadratic Bézier curveto):
T x yâ æ»ãããª2次ããžã§æ²ç·ãæç»ããŸããå¶åŸ¡ç¹ã¯ãåã®QãŸãã¯Tã³ãã³ãã®å¶åŸ¡ç¹ã®åå°ã§ãããšä»®å®ããŸãã - A (elliptical arc curveto):
A rx ry x-axis-rotation large-arc-flag sweep-flag x yâ æ¥å匧ãæç»ããŸãããã®ã³ãã³ãã¯éåžžã«è€éã§ãããæ¥åãåã®ã»ã°ã¡ã³ããæç»ã§ããŸãã
åã³ãã³ãã«ã¯å°æåããŒãžã§ã³ïŒäŸïŒLã®ä»£ããã«lïŒãããã絶察座æšã§ã¯ãªãçžå¯Ÿåº§æšãæå®ããŸãããããã®ã³ãã³ããçè§£ããããšã¯ãèŠçŽ ããã©ãã«ã¹ã¿ã ã¢ãŒã·ã§ã³ãã¹ãå®çŸ©ããããã®éµãšãªããŸãã
CSS Motion Pathããããã£ïŒåããå®çŸ©ãã
CSS Motion Pathã¯ãèŠçŽ ããã¹ã«æ²¿ã£ãŠã©ã®ããã«åãããå®çŸ©ããããã«é£æºããäžé£ã®ããããã£ã§æ§æãããŠããŸããããããã®ããããã£ãèŠãŠãããŸãããã
1. offset-pathïŒã¢ãŒã·ã§ã³ã®èšèšå³
offset-pathããããã£ã¯ãèŠçŽ ãé
眮ããã幟äœåŠçãã¹ãå®çŸ©ããŸããããã¯è»éã確ç«ããããã®æãéèŠãªããããã£ã§ãã
æ§æãšå€ïŒ
none(ããã©ã«ã): ãªãã»ãããã¹ã¯å®çŸ©ãããŠããŸãããpath(): SVGãã¹æ§æãçŽæ¥äœ¿çšããŠãã¹ãå®çŸ©ããŸããããã¯ã«ã¹ã¿ã ã·ã§ã€ãã«ãšã£ãŠéåžžã«åŒ·åã§ãã.animated-element { offset-path: path('M 20 20 L 100 20 L 100 100 L 20 100 Z'); /* A square path */ }url(): SVGã°ã©ãã£ãã¯å ã®SVG<path>èŠçŽ ãåç §ããŸããããã¯è€éãªãã¹ããã¹ãåå©çšããå Žåã«ãã䜿çšãããŸãã<svg width="200" height="200"> <path id="myCurvedPath" d="M 10 80 Q 70 10 150 80 T 290 80" stroke="#ccc" fill="none"/> </svg> .animated-element { offset-path: url(#myCurvedPath); }basic-shape:circle()ãellipse()ãinset()ãpolygon()ãªã©ã®å®çŸ©æžã¿CSSã·ã§ã€ãã䜿çšããŸãããããã¯SVGãã¹ãããåçŽã§ãããæè»æ§ã«ã¯å£ããŸãã.animated-element { offset-path: circle(50% at 50% 50%); /* A circular path */ }
path()ãŸãã¯url()ã䜿çšããå ŽåãèŠçŽ ã¯SVGãã¹ã®ã¹ãããŒã¯ã«æ²¿ã£ãŠç§»åããŸããããŒãžäžã®è¡šç€ºèŠçŽ ãšããŠã§ã¯ãªããã¢ãŒã·ã§ã³ã®ããã ãã«ãã¹ã䜿çšãããå Žåã¯ããã¹èªäœãé衚瀺ã«ã§ããŸãïŒäŸïŒstroke="none"ïŒã
2. offset-distanceïŒãã¹ã«æ²¿ã£ãé²è¡
offset-distanceããããã£ã¯ãèŠçŽ ãoffset-pathã«æ²¿ã£ãŠã©ãã ãé¢ããäœçœ®ã«ããããæå®ããŸããããã¯éåžžãèŠçŽ ãç§»åãããããã«ã¢ãã¡ãŒã·ã§ã³åããããããã£ã§ãã
æ§æãšå€ïŒ
<length>: äŸïŒ100pxã<percentage>: äŸïŒ50%ãããŒã»ã³ããŒãžã¯ãã¹ã®å šé·ãæããŸãã0%ãéå§ã100%ãçµäºã§ããããã¯ã¢ãã¡ãŒã·ã§ã³ã«ãšã£ãŠæãå®çšçãªåäœã§ããããšããããããŸãã
äŸïŒ
.animated-element {
offset-path: path('M 0 0 L 200 0');
offset-distance: 50%; /* Element is halfway along the path */
}
3. offset-rotateïŒèŠçŽ ã®åã
offset-rotateããããã£ã¯ãèŠçŽ ããã¹ã«æ²¿ã£ãŠç§»åããéã®ãšã¬ã¡ã³ãã®å転ãå¶åŸ¡ããŸããããã©ã«ãã§ã¯ãèŠçŽ ã¯å転ããªãããåæã®åããç¶æããå¯èœæ§ããããŸãããããã¯æ¹Ÿæ²ãããã¹äžã§ã¯äžèªç¶ã«èŠããããšããããŸãã
æ§æãšå€ïŒ
auto(ããã©ã«ã): èŠçŽ ã®Y軞ãoffset-pathã®æ¹åã«æããããŸããããã¯ãã¹ã«æ²¿ã£ãèªç¶ãªåãã«éåžžæãŸãããã®ã§ããreverse:autoã«äŒŒãŠããŸããããã¹ã®æ¹åãã180床å転ããŸãã<angle>: äŸïŒ90degãèŠçŽ ã®åæã®åãã«å¯Ÿããåºå®ã®å転è§åºŠãæå®ããŸããauto <angle>:autoå転ã«è¿œå ã®åºå®è§åºŠãçµã¿åãããŸããäŸãã°ãauto 90degã¯ãèŠçŽ ããã¹ã«æ²¿ã£ãŠåãããããã«æèšåãã«90床å転ãããŸãã
äŸïŒ
.animated-element {
offset-path: path('M 0 0 C 50 100, 150 100, 200 0');
offset-rotate: auto; /* Element rotates to follow the curve */
}
4. offset-anchorïŒã¢ã¿ããã¡ã³ãã®ç¹å®
offset-anchorããããã£ã¯ãèŠçŽ èªäœã®ã©ã®ç¹ãoffset-pathäžã«é
眮ãããããæ±ºå®ããŸããããã©ã«ãã§ã¯ãèŠçŽ ã®äžå¿ã§ãã
æ§æãšå€ïŒ
auto(ããã©ã«ã):50% 50%ãšåçã§ãèŠçŽ ã®äžå¿ããã¹äžã«é 眮ããŸãã<position>: äŸïŒtop leftã25% 75%ã10px 20pxãbackground-positionãšåæ§ã«æ©èœããŸãã
èŠçŽ ã®å·Šäžé
ããã¹ã«æ²¿ã£ãŠç§»åããããå Žåã¯ãoffset-anchor: 0% 0%ãèšå®ããŸããããã¯ãããæ£ç¢ºãªäœçœ®åãããããµã€ãºãç°ãªãèŠçŽ ãæ±ãå Žåã«ç¹ã«åœ¹ç«ã¡ãŸãã
çç¥åœ¢ïŒoffset
å€ãã®CSSããããã£ãšåæ§ã«ãoffset-pathãoffset-distanceãoffset-rotateãããã³offset-anchorã«ã¯offsetãšåŒã°ããçç¥åœ¢ããããŸãã
æ§æïŒ offset: [ <offset-position> | <offset-path> || <offset-distance> || <offset-rotate> ]
ç¹ã«åŠç¿æããããã°æã«ã¯ãæç¢ºãã®ããã«åã ã®ããããã£ã䜿çšããããšãäžè¬çã«æšå¥šãããŸãã
CSSã¢ãã¡ãŒã·ã§ã³ã§åœãå¹ã蟌ã
offset-pathãå®çŸ©ããããšã¯ååã«éããŸãããèŠçŽ ãåããã«ã¯ããã®ããããã£ã®1ã€ãã¢ãã¡ãŒã·ã§ã³åããå¿
èŠããããŸããoffset-distanceããããã£ã¯ã¢ãã¡ãŒã·ã§ã³ã®äž»èŠãªåè£ã§ãããæéãšãšãã«ãã¹ã«æ²¿ã£ãèŠçŽ ã®é²è¡ãå¶åŸ¡ããŸãã
ã¢ãŒã·ã§ã³ã«@keyframesã䜿çšãã
CSSã®@keyframesã䜿çšããŠã¢ãã¡ãŒã·ã§ã³ã·ãŒã±ã³ã¹ãå®çŸ©ããanimationçç¥åœ¢ããããã£ãŸãã¯ãã®åã
ã®ã³ã³ããŒãã³ãã䜿çšããŠé©çšããŸãã
äŸïŒæ¹Ÿæ²ãããã¹ã«æ²¿ã£ãŠåãã·ã³ãã«ãªã¢ã€ã³ã³
å°ããªç¢å°ã¢ã€ã³ã³ãç»é¢äžãæ»ãããªSåæ²ç·ã«æ²¿ã£ãŠç§»åããç¹çްãªUIã®åå³ãã¬ã€ãä»ããã¢ãŒèŠçŽ ãæš¡å£ããç¶æ³ãæ³åããŠã¿ãŸãããã
HTMLæ§é ïŒ
<div class="container">
<svg width="0" height="0">
<path id="sCurvePath" d="M 10 100 C 50 20, 150 20, 190 100 S 230 180, 290 100" />
</svg>
<div class="arrow-icon">➤</div> <!-- Unicode arrow for simplicity -->
</div>
CSSã¹ã¿ã€ã«ãšã¢ãã¡ãŒã·ã§ã³ïŒ
.container {
position: relative;
width: 300px;
height: 200px;
border: 1px dashed #eee; /* For visualization */
margin: 50px auto;
}
.arrow-icon {
position: absolute;
font-size: 24px;
color: #007bff;
offset-path: url(#sCurvePath);
offset-rotate: auto;
animation: followPath 5s linear infinite alternate;
}
@keyframes followPath {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
ãã®äŸã§ã¯ïŒ
<svg>èŠçŽ ã¯ããã¹èªäœã衚瀺ããã®ã§ã¯ãªãããã®ãã¹å®çŸ©ã®ã¿ãå¿ èŠãªããé衚瀺ã«ãªã£ãŠããŸãïŒwidth="0" height="0"ïŒã.arrow-iconã¯ããã®ã³ã³ããå ã«çµ¶å¯Ÿé 眮ãããŠããŸããoffset-path: url(#sCurvePath)ã¯ãç¢å°ãSVGã§å®çŸ©ããããã¹ã«åŸãããã«æç€ºããŸããoffset-rotate: autoã¯ãç¢å°ãæ²ç·ã®æ¹åã«åãããŠèªç¶ã«å転ããããšãä¿èšŒããŸããfollowPathããŒãã¬ãŒã ã¢ãã¡ãŒã·ã§ã³ã¯ãoffset-distanceã0%ïŒãã¹ã®éå§ïŒãã100%ïŒãã¹ã®çµäºïŒã«é·ç§»ãããŸããanimation: followPath 5s linear infinite alternate;ã¯ã¢ãã¡ãŒã·ã§ã³ãé©çšããŸãïŒæç¶æé5ç§ãç·åœ¢ã¿ã€ãã³ã°ãç¡éã«ç¹°ãè¿ããåãµã€ã¯ã«ã§æ¹åã亀äºã«ç¹°ãè¿ããŸãã
ããè±ããªå¹æã®ããã®CSSãã©ã³ã¹ãã©ãŒã ãšã®çµã¿åãã
offset-rotate: autoã¯ãã¹ã«æ²¿ã£ãå転ãåŠçããŸããããã¹ã®æ¹åãšã¯ç¬ç«ãã远å ã®å€æãå¿
èŠãªå ŽåããããŸããCSSã®transformããããã£ã¯ãããè€éãªå¹æã®ããã«Motion Pathãšçµã¿åãããããšãã§ããŸãã
äŸãã°ãèŠçŽ ããã¹ã«æ²¿ã£ãŠç§»åããéã«æ¡å€§çž®å°ãããããã¹ã«æ²¿ã£ãå転ã«å ããŠç¹å®ã®è¿œå å転ãããããå Žåã¯ã@keyframeså
ã§transformãé©çšã§ããŸãã
äŸïŒãã¹ã«æ²¿ã£ãŠç§»åããªããã¹ã±ãŒãªã³ã°ãã
@keyframes scaleAndFollow {
0% {
offset-distance: 0%;
transform: scale(0.5);
}
50% {
offset-distance: 50%;
transform: scale(1.2);
}
100% {
offset-distance: 100%;
transform: scale(0.5);
}
}
.animated-element {
/* ... other motion path properties ... */
animation: scaleAndFollow 6s ease-in-out infinite;
}
offset-pathãštransformãç°ãªãã³ã³ããã¹ãã§åäœããããšãèŠããŠããããšãéèŠã§ããoffset-pathã¯èŠçŽ ã®åºæ¬äœçœ®ãå®çŸ©ããtransformã¯ãã®åºæ¬äœçœ®ã«å¯ŸããŠèŠçŽ ãæäœããŸããoffset-anchorããããã£ã¯ãtransform-originã«ãã£ãŠæç€ºçã«èšå®ãããŠããªãå Žåãtransformã®åç¹ã«åœ±é¿ãäžããå¯èœæ§ããããŸãã
å®çšçãªå®è£ äŸãšãŠãŒã¹ã±ãŒã¹
CSS Motion Pathã®çŸããã¯ãã®å€æ§æ§ã«ãããŸãã倿§ãªåœéçãªãŠã§ããããžã§ã¯ãã«ãããããã€ãã®é åçãªã¢ããªã±ãŒã·ã§ã³ãæ¢ã£ãŠã¿ãŸãããã
1. ããã²ãŒã·ã§ã³ãšãŠãŒã¶ãŒãã£ãŒãããã¯ã®åŒ·å
ã¢ã€ãã ãåã«çŸããã ãã§ãªããç»é¢å€ããç·©ãããªæ²ç·ã«æ²¿ã£ãŠåªé ã«æ»ã蟌ã¿ãæå®ã®äœçœ®ã«åãŸããããªåçãªã¡ãã¥ãŒãæ³åããŠã¿ãŠãã ããããããã¯ããã¹ã«æ²¿ã£ãŠååããé£ãã§ãããæ§åãèŠèŠçã«ã¢ãã¡ãŒã·ã§ã³åããã·ã§ããã³ã°ã«ãŒãã¢ã€ã³ã³ã§ããŠãŒã¶ãŒã«å³åº§ã«é åçãªãã£ãŒãããã¯ãæäŸããŸãã
ã°ããŒãã«ãªäŸïŒå€æ§ãªå°åã«ãµãŒãã¹ãæäŸããEã³ããŒã¹ãã©ãããã©ãŒã ã®å Žåãæåããã«ãŒããžã®åå远å ã¢ãã¡ãŒã·ã§ã³ã¯ãããã¹ãã®ã¿ã«é Œãããšãªããååã远å ãããŸããããæ®éçã«äŒããããšãã§ããèšèªã®å£ãè¶ããŠãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããŸãã
2. é åçãªããŒãã£ã³ã°ã¢ãã¡ãŒã·ã§ã³ãšé²æã€ã³ãžã±ãŒã¿
åçŽãªã¹ãããŒããã¢ãŒã·ã§ã³ãã¹ã䜿çšããããšã§èžè¡äœåã«æè¯ã§ããŸããã³ã³ãã³ããããŒããããŠããéãèŠçŽ ãããŽã®èŒªéããªãã£ãããæœè±¡çã§å€åãã圢ç¶ããã©ã£ããããããšãã§ããŸããããã«ãããå調ãªåŸ ã¡æéããã©ã³ããšã³ã²ãŒãžã¡ã³ãã®æ©äŒã«å€ãããŸãã
èæ ®äºé ïŒãããã®ã¢ãã¡ãŒã·ã§ã³ãé床ã«é·ãããŸãã¯éªéã«ãªããªãããã«æ³šæããŠãã ãããç¹ã«ãæ¥ç¶é床ãé ããŠãŒã¶ãŒãèªç¥ã¢ã¯ã»ã·ããªãã£ã®ããŒãºããããŠãŒã¶ãŒã«å¯ŸããŠã¯éèŠã§ããé©åãªå Žåã¯ãã¢ãŒã·ã§ã³ãæžããããªãã·ã§ã³ãæäŸããŠãã ããã
3. ã€ã³ã¿ã©ã¯ãã£ããªã¹ããŒãªãŒããªã³ã°ãšã¬ã€ããã¢ãŒ
æè²ãã©ãããã©ãŒã ãã€ã³ã¿ã©ã¯ãã£ããªãã¥ãŒããªã¢ã«ããŸãã¯è£œåã·ã§ãŒã±ãŒã¹ã§ã¯ãã¢ãŒã·ã§ã³ãã¹ãè€éãªã€ã³ã¿ãŒãã§ãŒã¹ãã€ã³ãã©ã°ã©ãã£ãã¯ãéããŠãŠãŒã¶ãŒã®ç®ãèªå°ã§ããŸããç¢å°ããã€ã©ã€ããããèŠçŽ ãå®çŸ©æžã¿ã®ãã¹ã«æ²¿ã£ãŠç§»åããæ©èœãé çªã«æã瀺ãããšãã§ããŸãã
ã°ããŒãã«ãªäŸïŒéœåžã®ããŒãã£ã«ãã¢ãŒãæäŸããæ è¡ãŠã§ããµã€ãã§ã¯ãã¢ãã¡ãŒã·ã§ã³ããŒã«ãŒãå°å³ã®ãã¹ã«æ²¿ã£ãŠç§»åããã©ã³ãããŒã¯ãé çªã«ãã€ã©ã€ã衚瀺ããããšã§ãäžçäžã®æ è¡è ã«å¯Ÿå¿ã§ããŸãã
4. åçãªèæ¯èŠçŽ ãšè£ 食çãªã¢ãŒã·ã§ã³
ã€ã³ã¿ã©ã¯ãã£ããªèŠçŽ ãè¶ ããŠãã¢ãŒã·ã§ã³ãã¹ã¯çŽç²ã«çŸçãªç®çã«ã䜿çšã§ããŸããç¹çްãªèæ¯èŠçŽ ãç²åããŸãã¯ã°ã©ãã£ãã¯ã¢ããŒãã¯ãå®çŸ©ããããã¹ã«æ²¿ã£ãŠç»é¢ãç©ããã«æŒããäž»èŠãªã³ã³ãã³ãããæ³šæããããããšãªã奥è¡ããšèŠèŠçãªé¢å¿ã远å ã§ããŸããå®å®ãããŒãã«ãããŠã§ããµã€ãã®ã¢ãã¡ãŒã·ã§ã³åãããæåº§ããæµ·äºãµã€ãã®ç©ãããªæœ®æµç·ãèããŠã¿ãŠãã ããã
5. ã¬ã¹ãã³ã·ããªã¢ãŒããšããŒã¿ããžã¥ã¢ã©ã€ãŒãŒã·ã§ã³
ã¬ã¹ãã³ã·ãSVGãšçµã¿åãããããšã§ãã¢ãŒã·ã§ã³ãã¹ã¢ãã¡ãŒã·ã§ã³ã¯ããŸããŸãªç»é¢ãµã€ãºã«çŸããé©å¿ã§ããŸãããã¥ãŒããŒãã®å¯žæ³ã«åãããŠãã¹ã調æŽãããã°ã©ãã«æ²¿ã£ãŠããŒã¿ãã€ã³ããç§»åããçã«åçãªããŒã¿èŠèŠåäœéšãæäŸããã®ãæ³åããŠã¿ãŠãã ããã
é«åºŠãªãã¯ããã¯ãšèæ ®äºé
åºæ¬ã¯ç¢ºåºããåºç€ãæäŸããŸãããããã€ãã®é«åºŠãªãããã¯ãšèæ ®äºé ã¯ãCSS Motion Pathã®å®è£ ãããã«åŒ·åããããšãã§ããŸãã
JavaScriptã«ããåçãªãã¹çæ
offset-pathã¯CSSããããã£ã§ããããã¹èªäœã¯JavaScriptã䜿çšããŠåçã«çæãŸãã¯å€æŽã§ããŸããäŸãã°ããŠãŒã¶ãŒå
¥åãAPIããåä¿¡ããããŒã¿ããŸãã¯åçã«ããŒããããã³ã³ãã³ãã®å¯žæ³ã«åºã¥ããŠãã¹ãäœæãããå ŽåããããŸããJavaScriptã¯SVGãã¹èŠçŽ ã®d屿§ãæäœããããoffset-pathããããã£ã®ããã«path()æååãçŽæ¥çæããããšãã§ããŸãã
// Example: Dynamically updating a path for an element
const myPath = document.getElementById('myDynamicPath');
// ... calculate new path data ...
myPath.setAttribute('d', 'M ' + newX + ' ' + newY + ' ...');
// Or directly on the element's style
const animatedElement = document.querySelector('.animated-element');
animatedElement.style.offsetPath = 'path("M ' + startX + ' ' + startY + ' L ' + endX + ' ' + endY + '")';
ããã©ãŒãã³ã¹ã«é¢ããèæ ®äºé
ã¢ãã¡ãŒã·ã§ã³ãç¹ã«è€éãªãã®ã¯ãããã©ãŒãã³ã¹ã«åœ±é¿ãäžããå¯èœæ§ããããŸããCSS Motion Pathã¯ããã©ãŠã¶ãšã³ãžã³ãoffset-distanceãžã®å€æŽãããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ã§ãããããäžè¬çã«ååã«æé©åãããŠããŸãããã ããåžžã«ä»¥äžã®ãã³ãã念é ã«çœ®ããŠãã ããïŒ
will-changeããããã£ïŒæé©åãå¯èœã«ããããã«ãã©ã®ããããã£ã倿Žããããããã©ãŠã¶ã«éç¥ããŸããã¢ãŒã·ã§ã³ãã¹ã䜿çšããèŠçŽ ã®å Žåãwill-change: offset-path, offset-distance, transform;ã远å ã§ããŸãã- ãªãã€ã³ã/ãªãããŒã®æå°åïŒã¢ãã¡ãŒã·ã§ã³åãããŠããä»ã®CSSããããã£ãé«äŸ¡ãªã¬ã€ã¢ãŠãåèšç®ãããªã¬ãŒããªãããã«ããŠãã ããã
offset-pathããããã£èªäœã¯äžè¬çã«è¯å¥œã§ãããwidthãheightãmarginãªã©ãã¢ãã¡ãŒã·ã§ã³åããããšãšçµã¿åããããšåé¡ãçºçããå¯èœæ§ããããŸãã - è€éãªJavaScriptã®ãããŠã³ã¹/ã¹ãããã«ïŒJavaScriptã§åçã«ãã¹ãçæããå Žåãã³ãŒããæé©åãããŠãããé »ç¹ã«å®è¡ãããªãããšã確èªããŠãã ããã
ãã©ãŠã¶ã®ãµããŒããšãã©ãŒã«ããã¯
CSS Motion Pathã¯è¯å¥œãªãã©ãŠã¶ãµããŒããæã£ãŠããŸãããæ®éçã§ã¯ãããŸããã2023幎åŸåãã2024幎åé çŸåšãChromeãEdgeãFirefoxãSafariã§åºããµããŒããããŠããŸããããããå€ããã©ãŠã¶ãããŸãäžè¬çã§ãªããã©ãŠã¶ã§ã¯ãå®å šãªãµããŒããæ¬ ããŠããå¯èœæ§ããããŸãã
- æ©èœæ€åºïŒCSSã®
@supportsãŸãã¯JavaScriptã®CSS.supports()ã䜿çšããŠãµããŒãã確èªããŸãã@supports (offset-path: path('M 0 0')) { /* Apply motion path animations */ } /* Fallback for browsers without support */ .animated-element { /* Simpler static positioning or alternative animation */ } - 段éçæ©èœäœäžïŒã¢ãŒã·ã§ã³ãã¹ããµããŒããããŠããªãå Žåã§ãããŠãŒã¶ãŒãæ©èœçã§èš±å®¹å¯èœãªïŒããããã¢ãã¡ãŒã·ã§ã³ãå°ãªãïŒãšã¯ã¹ããªãšã³ã¹ãåŸãããããã«äœéšãèšèšããŸãã
ã¢ã¯ã»ã·ããªãã£ïŒA11yïŒã®ãã¹ããã©ã¯ãã£ã¹
åãã¯ãç¹ã«ååºæ©èœé害ãæã€äžéšã®ãŠãŒã¶ãŒã«ãšã£ãŠãèŠåœèé害ãåŒãèµ·ãããããäžå¿«æãäžãããããå¯èœæ§ããããŸããåœéçãªèŠèŽè ã«ãšã£ãŠãã¢ã¯ã»ã·ããªãã£ãåªå ããããšã¯æãéèŠã§ãã
prefers-reduced-motionã¡ãã£ã¢ã¯ãšãªïŒåããæžããããã®ãŠãŒã¶ãŒèšå®ãå°éããŸãã@media (prefers-reduced-motion: reduce) { .animated-element { animation: none !important; offset-path: none !important; /* Or set to a static, final state */ } }- é床ãŸãã¯æ¥éãªåããé¿ããïŒåãã¯ç®çãæã£ãŠäœ¿çšããŸããçŽç²ã«è£ 食çãªãã®ã§ããã°ãæ§ããã«ããããšãæ€èšããŠãã ããã
- ã³ã³ãããŒã«ãæäŸããïŒè€éãªãŸãã¯é£ç¶çãªã¢ãã¡ãŒã·ã§ã³ã®å ŽåããŠãŒã¶ãŒãããããäžæåæ¢ã忢ããŸãã¯ç¡å¹ã«ããæ¹æ³ãæäŸããŸãã
- ã»ãã³ãã£ãã¯ãªããŒã¯ã¢ããïŒã¢ãã¡ãŒã·ã§ã³ãåé€ãããã衚瀺ãããªãã£ããããŠããèŠçŽ ãäŸç¶ãšããŠããã²ãŒãå¯èœã§çè§£ã§ããããšã確èªããŠãã ããã
ãã¹äœæã®ããã®ããŒã«ãšãªãœãŒã¹
è€éãªSVGãã¹ãæäœæ¥ã§äœæããã®ã¯éå±ãªå ŽåããããŸãã幞ããªããšã«ãããã€ãã®ããŒã«ã圹ç«ã¡ãŸãã
- ãã¯ã¿ãŒã°ã©ãã£ãã¯ãšãã£ã¿ïŒAdobe IllustratorãInkscapeãSketchãFigmaããããã®ããŒã«ã䜿çšãããšãçŽæçã«å³åœ¢ãæç»ããSVGãšããŠãšã¯ã¹ããŒãããŠããããã
d屿§ãæœåºã§ããŸãã - ãªã³ã©ã€ã³SVGãã¹ãžã§ãã¬ãŒã¿/ããžã¥ã¢ã©ã€ã¶ïŒå€ãã®ãŠã§ãããŒã¹ããŒã«ã¯ããªã¢ã«ã¿ã€ã ã§ãã¹ãæç»ããSVG
d屿§ã³ãŒããçæããã®ã«åœ¹ç«ã¡ãŸãããSVG path visualizerããŸãã¯ãSVG path editorããæ€çŽ¢ãããšãå€ãã®æçšãªãªãã·ã§ã³ãèŠã€ãããŸãã - ãã©ãŠã¶éçºè
ããŒã«ïŒææ°ã®ãã©ãŠã¶éçºè
ããŒã«ã¯ãSVGãã¹ã®æ€æ»ãå¯èœã«ããããšããããããäžã«ã¯
offset-pathã®åé¡ããããã°ããã®ã«åœ¹ç«ã€åºæ¬çãªç·šéæ©èœã枬å®ããŒã«ãæäŸãããã®ããããŸãã - ã©ã€ãã©ãªïŒãã®æçš¿ã¯çŽç²ãªCSSã«çŠç¹ãåœãŠãŠããŸãããGreenSockïŒGSAPïŒã®ãããªã©ã€ãã©ãªãSVGãã¹ã«æ²¿ã£ãŠã¢ãã¡ãŒã·ã§ã³åããããã®åŒ·åãªããŒã«ãæäŸããŠãããCSS Motion Pathã ãã§ã¯ããŒãºã«ååã§ãªãå Žåã«ãããé«åºŠãªå¶åŸ¡ãšã¯ãã¹ãã©ãŠã¶ã®äžè²«æ§ãæäŸããŸãã
ãŠã§ãã¢ãŒã·ã§ã³ãšã€ã³ã¿ã©ã¯ã·ã§ã³ã®æªæ¥
CSS Motion Pathã¯ãããè±ãã§æ²¡å ¥æã®ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãžãšåãããŠã§ãã®ç¶ç¶çãªé²åã®èšŒã§ãããã©ãŠã¶ã®æ©èœãåäžãããŠã§ãæšæºãæçããã«ã€ããŠãããã«æŽç·Žãããã¢ãã¡ãŒã·ã§ã³ããŒã«ãæåŸ ã§ããŸããSVGãšCSSã®çžä¹å¹æã¯ããã®é²æ©ã®èŠã§ããã宣èšçã§ãããªãã匷åãªæ¹æ³ã§ãã¶ã€ã³ã«åœãå¹ã蟌ã¿ãŸãã
çŸåšã®æ©èœãè¶ ããŠã3Dãã¹è¿œåŸã®ããã®WebGLãšã®ããæµåçãªçµ±åããããã¯ã¢ãŒã·ã§ã³ãã¹ãšå¯Ÿè©±ããããã®æšæºåãããæ¹æ³ïŒäŸïŒãããŒæã«ç¹å®ã®ç¹ã§èŠçŽ ã忢ãããïŒãæ³åããŠã¿ãŠãã ããããã¹ã«æ²¿ã£ãã¢ãŒã·ã§ã³ãå®çŸ©ããååã¯åºæ¬çã§ããã仿¥ããããç¿åŸããããšã§ãææ¥ã®ã€ãããŒã·ã§ã³ã«åããããšãã§ããŸãã
çµè«ïŒCSS Motion Pathã§åµé æ§ãè§£ãæŸã€
SVGãã¹ã®æè»æ§ã«ãã£ãŠåŒ·åãããCSS Motion Pathã¯ããŠã§ãäžã®èŠçŽ ã®åãã«å¯ŸããŠåäŸã®ãªãã¬ãã«ã®å¶åŸ¡ãæäŸããŸããããã¯ãé åçã§é«æ§èœãèŠèŠçã«çŽ æŽãããã¢ãã¡ãŒã·ã§ã³ãäœæããããšããããã³ããšã³ãéçºè ãã¢ãŒã·ã§ã³ãã¶ã€ããŒã«ãšã£ãŠç»æçãªãã®ã§ããç¹çްãªUIã®åå³ãã粟巧ãªã€ã³ã¿ã©ã¯ãã£ããªç©èªãŸã§ãã«ã¹ã¿ã è»éã«æ²¿ã£ãŠèŠçŽ ãæ£ç¢ºã«å®çŸ©ãã¢ãã¡ãŒã·ã§ã³åããèœåã¯ãèšå€§ãªåµé çãªæ©äŒãè§£ãæŸã¡ãŸãã
offset-pathãoffset-distanceãoffset-rotateãoffset-anchorãšããäž»èŠãªããããã£ãçè§£ããCSSã®@keyframesãšå
ç¢ãªSVGãã¹å®çŸ©ã®åãšçµã¿åãããããšã§ããŠã§ããããžã§ã¯ããæ°ããªé«ã¿ãžãšåŒãäžããããšãã§ããŸããããã©ãŒãã³ã¹ãšããããŠäœãããã¢ã¯ã»ã·ããªãã£ãèæ
®ããããªãã®çŸããã¢ãã¡ãŒã·ã§ã³ãäžçäžã®èª°ã«ã§ã楜ããŸããããã«ããããšãå¿ããªãã§ãã ããã
CSS Motion PathãæŽ»çšããããŸããŸãªãã¹ãã¢ãã¡ãŒã·ã§ã³ã詊ããŠãã°ããŒãã«ãªããžã¿ã«ã©ã³ãã¹ã±ãŒãã§çã«éç«ã€ãŠã§ãäœéšã®äœæãå§ããŠãã ãããçŽ æŽãããã¢ãã¡ãŒã·ã§ã³ãžã®éãåŸ ã£ãŠããŸãïŒ