Я хотел бы создать анимацию с SVG и иметь здесь несколько проблем. Маленький круг должен двигаться по пути большого круга. Может ли кто-нибудь здесь показать мне путь с несколькими подсказками или простым примером? Я попробовал это с помощью css, но это не тот путь.
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<svg>
<circle id="c1" cx="100" cy="100" r="90" stroke="#ccc" stroke-width="2" fill="none"/>
<circle id ="c2" cx="100" cy="10" r="8" stroke="#f00" stroke-width="3" fill="#fff"/>
</svg>
<script>
circle1=document.getElementById("c1");
circle2=document.getElementById("c2");
for (i=1;i<60;i++){
// here is must calc the points
//of the path of the circle
//that is difficult but not such a problem
//but i don´t see an animation
//but I see no animation
circle2.setAttribute("cx",100+i);
circle2.setAttribute("cy",100+i);
}
</script>
</body>
</html>
хороший день и добро пожаловать,
Я думаю, что способ вычисления точек круга слишком сложный. Легче поворачивать круг с поворотом вращения.
На прошлой неделе я ответил на подобный вопрос на семинаре следующим образом:
(Пожалуйста, прочитайте это интенсивно, а также замечания. Надеюсь, вы понимаете код.)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<svg id = "mySVG" width="200" height="200" viewBox="0 0 200 200">
<circle id = "myCirclePath" cx="100" cy="100" r="90" stroke="#ccc" stroke-width="2" fill="none"/>
<circle id = "myAniCircle" cx="100" cy="10" r="8" stroke="#f00" stroke-width="3" fill="#fff"/>
</svg>
<script>
var animateAtCircle = function (elementToAnimate, circlePath, duration, callback){
//I would see:
var imagesPerSecond = 60;
//and calculate the sum of steps i need:
var sumSteps = duration / (1000/imagesPerSecond);
//an circle has 360 degrees
//so my stepwidth is:
var stepWidth = 360 / sumSteps
//let us begin with step 1
var step = 1;
//before, i need a Variable to store my Timeout
var pathAnim;
//and begin with our animation function
var anim=function(){
//rotate the circle relative
//to the midpoint of circlePath
elementToAnimate.setAttribute("transform",'rotate(
${step*stepWidth},
${circlePath.getAttribute('cx')},
${circlePath.getAttribute('cy')}
)');
//until step smaller then sumSteps
if ( step < sumSteps){
//set step to next step
step ++
//and wait for creating next rotation an call anim again...
pathAnim = setTimeout(anim, 1000/imagesPerSecond);
} else {
//animation is finished;
clearTimeout(pathAnim);
//call callback function
if (callback) return callback();
}
}
//now call our anim loop function
anim();
}
//now call our Aimation at circle...
animateAtCircle(myAniCircle,myCirclePath,5000, function(){console.log('finished');});
</script>
</body>
</html>
getTotalLength()
это тоже решение?