Используя jQuery и Raphaël
(в данном случае можно было бы обойтись и одним Raphaël, но важно не это), соорудим простой холст и на нём анимированный кружок:
<!doctype html>
<html>
<head>
<style>
body {
background-color: #ffffff;
}
#canvasParent {
width: 700px;
margin-left: auto;
margin-right: auto;
}
</style>
<script src="/jq.js"></script>
<script src="/raphael.js"></script>
<script>
tableList = [];
$(function(){
var h = 700;
var w = 700;
paper = Raphael('canvasParent', h, w);
paper.rect(0,0, h, w, 2).attr('stroke', '#000');
paper.circle(50, 40, 10).attr("fill", "#f00").attr("stroke", "#fff").animate(
Raphael.animation(
{ transform: 'S2' }, 4000, '<'+'>'
).repeat(Infinity)
);
});
</script>
</head>
<body>
<div id="canvasParent">
</div>
</body>
</html>
Кружок плавно вспучивается от радиуса 10px до радиуса 20px за четыре секунды, затем рывком возвращается к первоначальному размеру, и всё повторяется сначала до бесконечности.
Внимание, вопрос: как сделать так, чтобы кружок после плавного вспучивания не менее плавно скукоживался бы, и так до бесконечности?
Иными словами: можно ли (и как именно) в Raphaël зациклить не один, а несколько шагов анимации? (Например, пару шагов именно таких, чтобы второй шаг анимации был противоположен первому шагу и медленно возвращал объект в исходное состояние?)
