בדומה לפוסט הקודם, קידוד ואנימציות - שינוי מיקום של אובייקט , החלטתי לעשות עוד פוסט קצר על תנועה של אובייקט, רק בתנועה מעגלית. שתוכלו לראות ולהבין כי ניתן לשנות את מיקומו של באובייקט לא רק בכיוונים ישרים אלא גם במעגלים!.
להלן הדוגמה: (הגיף מציג את זה לא משהו. התנועה במציאות חלקה)
להלן הקוד:
<!DOCTYPE html>
<html>
<head>
<title>תנועה מעגלית של אובייקט</title>
<style>
div {
width: 200px;
height: 200px;
background-color: #23f2ff ;
border-radius: 150px;
position: relative;
top: 400px;
left: 400px;
animation-name: myAnime;
-webkit-animation-name: myAnime;
animation-duration: 5s;
-webkit-animation-duration: 5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes myAnime {
from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
@-moz-keyframes myAnime {
from { -moz-transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { -moz-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
@-o-keyframes myAnime {
from { -o-transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { -o-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
@keyframes myAnime {
from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
</style>
</head>
<body>
<div></div>
</body>
</html>
מה בעצם קורה כאן?
בכמו בפוסט הקודם, אותו ה DIV עם אותם הגדרות של האנימציה, רק שינוי בתנועה. בשביל לבנות תנועה מעגלית נשתמש ב TRANSFORM ובשני מאפייניו, שהם, ROTATE , TRANSLATE
מאפיין ה TRANSLATE מאפשר לנו להזיז את האובייקט על ציר X , Y , Z ומאפשר לנו להזיז את האובייקט על גבי הצירים. לפיכך אפשר להבין מהדוגמה שיצרנו מרחק של 150 פיקסלים על ציר ה-X מנקודת ה0 של ראשית הצירים.
עכשיו לקחנו את האובייקט וה150 פיקסלים שיצרו את הרווח ועשינו להם "פליפ" של 360 מעלות, בעזרת מאפיין ROTATE. אבל בשביל שהאובייקט שלנו לא ישנה את כיוונו אנחנו נשתמש ב ROTATE נוסף רק עם ערך שלישי. כפי שניתן לראות בדוגמה 360- מעלות.
אם אתם רוצים שהאובייקט גם ישנה את כיוונו. תוכלו להסיר מהקוד את הROTATE הנוסף ותראו כי האובייקט משלים את התנועה המעגלית וגם משנה את כיוונו כל רגע ולא נשאר מיושר עם התנועה.
יש לך מה להגיד? אשמח לתגובה