|
Сообщение от kostyanet
|
|
Кстати, а точно SVG надо анимировать вот таким колхозным способом?
|
Ты прав.
Слева колхоз, справа по-научному:
<html>
<head>
<script>
//--------------------------- ANIMATION ----------------------------//
function animate(opts) {
var el = opts.el || false;
var start = new Date;
var delta = opts.delta || linear;
var from = opts.from || 0;
var to = opts.to || 0;
if(el){ clearInterval(opts.el.timer);
opts.el.timer = setInterval(function() {
var progress = (new Date - start) / opts.duration;
if (progress > 1) progress = 1;
opts.step( delta(progress),from,to );
if (progress == 1) {
clearInterval(opts.el.timer);
opts.complete && opts.complete();
}
}, opts.delay || 20);}
}
function back(progress) {
var x = 2.9;
return Math.pow(progress, 2) * ((x + 1) * progress - x)
}
function makeEaseOut(delta) {
return function(progress) {
return 1 - delta(1 - progress)
}
}
//--------------------------- ANIMATION ----------------------------//
</script>
</head>
<body>
<div style="height:400px; background:#ccc;">
<svg height="400" width="300" style="background:#fff;">
<circle id="white" cx="150" cy="200" r="1" fill="#66bad6" />
</svg>
<svg height="400" width="300" style="background:#fff;">
<circle cx="150" cy="200" r="1" fill="#66bad6">
<animate
attributeName="r"
from="1"
to="90"
begin="0.1s"
dur="1.4s"
values="1;110;90"
keyTimes="0;0.5;1"
keySplines="
0 0 0.58 1;
0 0 0.58 1"
calcMode="spline"
fill="freeze"
/>
</circle>
</svg>
<script>
var div = document.getElementById("white");
var roundM = Math.round(div.getAttribute('r'));
setTimeout(function(){
animate({
el : div,
duration: 1400,
delta: makeEaseOut(back),
step: function(delta) {
//анимированная смена радиуса
div.setAttribute('r',delta*(90-(Math.round(roundM*100)/100))+(Math.round(roundM*100)/100));
}
});
}, 100);
</script>
</div>
</body>
</html>
Запарился подбирать параметры. Я не разбираюсь в этих кубиках безье. И с математикой туго (забыл все, аж страшно смотреть на нее)