14.10.2014, 18:55
|
 |
Аспирант
|
|
Регистрация: 23.05.2012
Сообщений: 44
|
|
|
Не присваиваются правильные значения атрибутов.
Вот код:
<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>
проблема такова… я меняю анимацией параметр, круга (радиус).
Объект увеличивается…. после чего мне нужно получить его текущее значение и делать другие манипуляции… но почему-то выводится значение изначальное.
|
|
14.10.2014, 18:57
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Сообщение от max0n
|
|
но почему-то выводится значение изначальное.
|
Почему-то? Ты серьезно?? Ты выводишь значение из roundM, которое никем и ничем не меняется! Меняется только значение атрибута r у элемента.
__________________
В личку только с интересными предложениями 
|
|
14.10.2014, 21:16
|
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
|
В алерт надо засунуть вот это
var roundM = Math.round(div.getAttribute('r'));
Кстати, а точно SVG надо анимировать вот таким колхозным способом? По-моему там недостижимые для колхозов индустриальные методы встроены. Я как-то почитал немного и хватило - везде стоит amimate, animate, animate - похоже там нет ничего что не анимате.
|
|
14.10.2014, 22:21
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Сообщение от 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>
Запарился подбирать параметры. Я не разбираюсь в этих кубиках безье. И с математикой туго (забыл все, аж страшно смотреть на нее)
__________________
В личку только с интересными предложениями
|
|
14.10.2014, 22:25
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
kostyanet, поставил бы плюс, да система не дает. Не нравишься ты ей..
__________________
В личку только с интересными предложениями
|
|
14.10.2014, 22:26
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Короче, из-за этой портянки кода ниче не видно. Вот:
<!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>
__________________
В личку только с интересными предложениями
|
|
14.10.2014, 22:43
|
|
Аспирант
|
|
Регистрация: 23.05.2012
Сообщений: 44
|
|
Сообщение от danik.js
|
Короче, из-за этой портянки кода ниче не видно. Вот:
<!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>
|
Всё это конечно хорошо.... но мне нужно будет больше манипуляций проводить с анимацией... так что там по любому надо JS.
А для единовременной анимации, Вы правы... так лучше. |
|
15.10.2014, 15:34
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Сообщение от max0n
|
|
мне нужно будет больше манипуляций проводить с анимацией
|
Какого рода манипуляций? Ты можешь манипулировать атрибутами элемента <animate> управляя анимацией динамически.
__________________
В личку только с интересными предложениями
|
|
15.10.2014, 16:57
|
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
|
Сообщение от max0n
|
|
Всё это конечно хорошо.... но мне нужно будет больше манипуляций проводить с анимацией.
|
И там либы есть готовые, например http://snapsvg.io/demos/ |
|
15.10.2014, 17:01
|
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
|
Сообщение от danik.js
|
|
Короче, из-за этой портянки кода ниче не видно. Вот:
|
Это да, пощщупать проперти. Делается, конечно, все не так. Поэтому как обычно, и, кстати, как и с канвасом SVG демонстрирует блеск и нищету. Либо крутейшие вещи с опупеннными либами, либо простейшие вещи чисто пощщупать проперти. Массового спроса пока не наблюдается, ибо уровень абстракции SVG слишком высок. Постигнет ее, боюсь, судьба XML.
Ну то есть это нужно просто брать редактор, они есть, и рисовать и оживлять в нем. Но как обычно из редакторов выходят как бы кривенькие по оптимизации вещи, придется допиливать, короче гемор.
Я тут из Люстры кучерявое лого в SVG сохранил, 46 килобайт, мелочь, но все равно ломанулся половину узлов убил, вроде ровно 22 кб, все равно больше PNG, но зато можно детали логотипа разукрашивать по-отдельности просто меняя циферки в тексте.
Последний раз редактировалось kostyanet, 15.10.2014 в 17:04.
|
|
|
|
