Непонятки в анимации
 

вот полный код

function animate(opts) {

var start = new Date;

var timer = setInterval(function() {

var progress = (new Date - start) / opts.duration;

opts.step(progress);

if(progress > 1) progress = 1;
if(progress == 1) clearInterval(timer);


}, 15)

return timer;

}

function animateProp(opts) {

var start = opts.start;

var end = opts.end 
var prop = opts.prop;


opts.step = function(progress){
opts.elem.style[prop] = start+(end-start)*progress+ 'px';

 }
 
 return animate(opts);


}

var div = document.getElementById('opa');

div.onclick = function() {

animateProp({start:0,end:100, prop:'marginLeft', duration:1000, elem:div})


}

Несколько вопросов....

1) При клике вызывается ф-я animateProp(а тут ее параменты)

но почему они заключены в {}, если это объект, не разумнее было было сделать так : animateProp(opts= {start:....}) ???

2) При вызове ф-и animateProp, те параметры, которые указываются в ({}) - обращаются к ПЕРЕМЕННЫМ? Ну например в параметре указано animateProp({start:0}), а в этой же ф-и :

animateProp(opts) {var start = opts.start}

так свойство {start:0}, обращается вначале к var start, а затем переход в opts.start ?

Если да, то почему мы не можем поставить (без var) просто opts.start,
ведь opts.elem имеется и работает....

зачем это лишнее вычисление выражения ? аргумент функции в любом из этих вариантов получит объект

потому что объекты передаются по ссылке, если так не сделать любые изменения в функции полученного объекта затронут и передаваемый объект.

а в обще- http://learn.javascript.ru/

чего ? рано вам ещё такой код рассматривать -основы изучайте .
локальная переменная start инициируется значением свойства start, получаемого объекта в качестве аргумента функции

это я знаю.

Меня интересует вопрос.

Почему работает вот это opts.elem без переменной var elem = opts.elem;

а исходя из кода :
это HTML Element какой является объектом
и присваивание переменной ничего не изменит

тогда почему нельзя сделать тоже самое с остальными?

Например opts.start вместо var start = opts.start.

Тут же тоже идет присвание

Еще раз:
разница понятна между простым значением свойства объекта- которое передаётся по значению, и значением свойства- объект, какой передаётся по ссылке?

Не нужно думать "тоже самое , не тоже самое" -нужно учить основы

Хмммм.... раз elem:div, где div - значение свойства (elem), является объектом, который передается по ссылке в виде параметра, правильно?

Тогда что значит передача по значению?? В учебнике (где объекты) не нашел такое информации, может пропустил....:cray:

Нет. свойство elem передаваемого объекта инициируется значением переменной div(получает ссылку на объект) и вместе они ссылаются на объект , какой является HtMl элементом -объектом(если не вдаваться в то, что есть Dom)

в гугле забанили? http://www.google.com.ar/search?sour...%8E+javascript

первая же ссылка http://js-help.net/text/function/pos...arametrov1.php

Блин, там как-то более понятно, наверное потому что на простых примерах.... переменная и объект.

А у нас тут значение свойства и объект. эх

Наверное единственно что я понял, это то, что если значение свойства не на что не ссылается, а имеет только лишь значение это есть передача по значению (простая). и то врятли это истина (

Ещё раз :

да какие основы, по этому и учебнику изучаю, от начала, и вот до анимации дошел уже. При том чтобы понять animate несколько раз объекты, интервалы и прочее прочитывал из этого и учебника...

Вот оно как , вундеркинд оказывается . Прочёл несколько раз и уже знает и изучил. А я, и не только я, считали наивные, что месяцы и годы практики нужны и постоянное изучение и повторение.

и толку то ? js ни за неделю, не за месяц , ни за полгода нормально не изучить.
Во многих местах опыт меньше 2х лет js и опытом не считается
току от того до куда дошли, если вы основ не знаете, не понимаете их?

Дак почему тогда вопрос возник ? А это основы основ .
вы себя тешите и обманываете по поводу своего уровня

http://otvet.mail.ru/question/67594982

Да я вообще-то и не говорил, что шарящий во всем этом. Просто вы постоянно ссылаетесь на основы, а основы это общее понятие, так и модальные окна можно считать за основы, что их заново изучать ? Я же говорю, что несколько наверное десятков раз прочел именно про объекты, где рассказывается, что они передаются по ссылке и не становятся копией, как переменные, вот, на этом и все. Просто если бы в уроке по анимации хоть бы строчка об этом присутствовала, возможно было бы легче. Честно говоря синтаксис передачи свойств объекта виде параметров, я впервые увидел, и для меня это было непонятно, поэтому вопрос и возник, ибо раньше этого не встречал, и описано именно это в учебнике не было.

Анимация это сложная тема, и в учебнике по этому поводу люди отписывались в комментах. Поэтому и пишу сюда на форум, чтобы разобраться, а не тупо скопипастить код, для этого много ума не надо.

Cтоп. Причём анимация к JS?
Есть - реализация анимации с использованием JS.
Для этого нужно знать и основы анимации на должном уровне , и основы JS на уровне позволяющем это реализовать.
В чтении главы по анимации основы JS первичны, и в первую очередь нужно их изучить, прежде чем реализовывать или рассматривать любой код длинной более 2х строк

Ну а как же мне не реализовывать, когда практика нужна. Ранее у меня по главе анимации возникало гораздо больше вопросов чем сейчас(например про progress), и я не первый день сижу над ней. Ну точнее на всех этих вытекающий последствиях непонятности, а именно с передачей данных и переменными.

Если бы не было этой главы, вопросов бы не возникло, ну а раз возникло, это к лучшему!

задавайте вопросы по теме, но не по синтаксису языка.

отношение пройденного времени к длительности

это то же самое, что и процентная доля одного числа в другом — на сколько процентов первое достигло второго (в контексте анимации)

а сама переменная progress = процентное соотношение в долях, принадлежит промежутку [0, 1] (и из-за специфики математики JS и таймаутов может выйти за правый предел)

хм, я когда читал статью, тоже нифига не просёк её.

хотя на самом деле это очень простая вещь (я про анимацию двух ключевых кадров — конечного и начального), я бы смог обьяснить, как она работает, 5 летнему ребёнку (ну или начинающему программисту)


я всё никак не соберусь уже доделать библу по анимации и написать серию статей по анимациям в CSS.

на вопросах учатся и развиваются.

Ну вот у нас есть код

animateProp({elem : div})

div - это HTML объект, свойство elem получает ссылку на этот объект.

Т.е. elem получает ссылку на объект. А т.к. это объект то передача осуществляется по ссылке. т.е. elem и будет ссылкой.

Позже в ф-и этот параметр elem становится свойством объекта opts.

А тут

animateProp({start : 0)}

Параметр start ни на что не ссылается, а имеет лишь значение : 0, и чтобы передать это значение он должен обращаться к переменной var start.

Так?

переменная "var start" содержит в себе undefined, если не применять оператор "=", т.е. если не передавать значение.

каким образом вопрос относится к анимации?

Т.к. стоит в контексте анимации это и вызвало затруднение.

Вообще я правильно понимаю то что описал?

Верно ли то утверждение, что переменная start инициируется значением параметра (оно же свойство) start и получает значение свойства ?

А свойство параметр elem, изначально имеет ссылку на объект HTML, поэтому передача данных по переменной не происходит?

еле-еле , но да )

она инициируется со значением undefined - оно вообще никак не связано со свойством орбъекта, только имена похожие.

function a (opts) {
    var started;


    alert(started);
}

a({  started: 0 });

если же использовать приравнивание на opts.started, то в неё будет его помещено значение

(значение, а не ссылка — потому что примитивы (необъекты) передаются по значению)

function a (opts) {
    var started;

*!*
    started = opts.started;
*/!*

    alert(started);
}

a({  started: 0 });

нет, происходит. он является ссылкой на объект. сам объект — часть DOM. а передаётся по ссылке из-за специфики JS, в котором все объекты передаются по ссылке

var first = {  test: "Hello" };

var second = first;

first.abcd = " World!";

alert( second.test + second.abcd );

хммм. тогда почему в opts.duration, нет переменной var duration, которая бы получала значение свойства?

потому что её не создали... и берут длительность из свойства объекта, не создавая локальной переменной

Хммм))

Впринципе понятно, вот только почему в одном случае мы не создаем переменную (duration) и все работает, а в другом например с start, простое применение opts.start - без переменной ничего не дает

без примеров кода ничего не понятно