Не присваиваются правильные значения атрибутов.
Вот код:
<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="800" style="background:#fff;">
<circle id="white" cx="400" cy="200" r="1" fill="#66bad6" />
</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);
setTimeout(function(){alert("roundM="+roundM);}, 1500); //вывод изначального значения, вместо текущего
</script>
</div>
</body>
</html>
проблема такова… я меняю анимацией параметр, круга (радиус). Объект увеличивается…. после чего мне нужно получить его текущее значение и делать другие манипуляции… но почему-то выводится значение изначальное. |
Цитата:
|
В алерт надо засунуть вот это
var roundM = Math.round(div.getAttribute('r')); Кстати, а точно SVG надо анимировать вот таким колхозным способом? По-моему там недостижимые для колхозов индустриальные методы встроены. Я как-то почитал немного и хватило - везде стоит amimate, animate, animate - похоже там нет ничего что не анимате. |
Цитата:
Слева колхоз, справа по-научному:
<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>
Запарился подбирать параметры. Я не разбираюсь в этих кубиках безье. И с математикой туго (забыл все, аж страшно смотреть на нее) |
kostyanet, поставил бы плюс, да система не дает. Не нравишься ты ей..
|
Короче, из-за этой портянки кода ниче не видно. Вот:
<!DOCTYPE html>
<svg height="400" width="800" style="background:#fff;">
<circle cx="400" 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>
|
Цитата:
А для единовременной анимации, Вы правы... так лучше. |
Цитата:
|
Цитата:
|
Цитата:
Ну то есть это нужно просто брать редактор, они есть, и рисовать и оживлять в нем. Но как обычно из редакторов выходят как бы кривенькие по оптимизации вещи, придется допиливать, короче гемор. Я тут из Люстры кучерявое лого в SVG сохранил, 46 килобайт, мелочь, но все равно ломанулся половину узлов убил, вроде ровно 22 кб, все равно больше PNG, но зато можно детали логотипа разукрашивать по-отдельности просто меняя циферки в тексте. |
Цитата:
Безиер был человеком Pierre Étienne Bézier |
Цитата:
Я все равно не втыкаю че эти циферки значат. Пока не до них. |
| Часовой пояс GMT +3, время: 05:09. |