| Предыдущая тема :: Следующая тема |
| Автор |
Сообщение |
Cr@ZyBoY
Starting Member
Возраст: 17
Пол: мужской
Зарегистрирован: 29.08.2008
Сообщения: 46
Откуда: Мытищи
Монет: 648
|
 Добавлено: Tue Nov 04, 2008 4:33 pm Заголовок сообщения: Проблема с наследованием Скачать пост |
цитировать |
|
В общем тема такая: пишу библиотеку анимации с поддержкой изменения скорости по тригонометрическим функциям. Для этого создал класс Transitions:
| Код: | var Transitions = window.Transitions = {};
Transitions.types = {
Line: function(p) {
return p;
},
Bounce: function(p) {
var value;
for (var a = 0, b = 1; 1; a += b, b /= 2) {
if (p >= (7 - 4 * a) / 11) {
value = b * b - Math.pow((11 - 6 * a - 11 * p) / 4, 2);
break;
}
}
return value;
},
Sine: function(p) {
return (1 - Math.cos(p * Math.PI)) / 2;
}
};
for (var t in Transitions.types) {
Transitions[t] = {
me: t,
easeIn: function(p) {
return Transitions.types[this.me](p);
},
easeOut: function(p) {
return 1 - Transitions.types[this.me](1 - p);
},
easeInOut: function(p) {
return (p <= 0.5) ? Transitions.types[this.me](2 * p) / 2 : (2 - Transitions.types[this.me](2 * (1 - p))) / 2;
}
}
} |
В объекте Transitions.types находятся функции по умолчанию - линейное изменение, синусоида и колебания. Далее идёт цикл, который создаёт в классе Transitions соответствующее свойство из types с тремя свойствами: easeIn, easeOut и easeInOut (прямая функция, перевёрнутая и прямая/перевёрнутая).
Функции вызываются примерно следующим образом: Transitions.Bounce.easeIn(число), Transitions.Sine.easeInOut(число). В ответ на это данные функции возвращают изменённые значения, в соответствии с указанной в них формулой.
Если просто вызвать такую функцию, например, вот так: | Код: | | alert(Transitions.Sine.easeIn(0.6)); |
, то всё замечательно работает.
Проблема в том, что эти функции используются в другом классе - в классе самой анимации:
| Код: | function Transition(curve, milliseconds, callback) {
var start = new Date().getTime();
var that = this;
var done, oneLeft;
this.runCallback = function() {
that.run();
};
this.run = function() {
if (!that.hasNext()) return;
callback(that.next());
setTimeout(that.runCallback, 10);
}
this.hasNext = function() {
if (done) return oneLeft;
var now = new Date().getTime();
if ((now - start) > milliseconds) {
done = true;
oneLeft = true;
}
return true;
}
this.next = function() {
oneLeft = false;
var now = new Date().getTime();
var percentage = Math.min(1, (now - start) / milliseconds);
return curve(percentage);
}
} |
И если я напишу вот так:
| Код: | var transition = new Transition(Transitions.Sine.easeIn, 1000, function(percentage) {
element.style.top = (to - from) * percentage + from + "px";
});
transition.run(); |
З.Ы: element, to и from определены, дело не в них. Дело в том, что постоянно выводится ошибка | Цитата: | | Ошибка: Transitions.types[this.me] is not a function |
Почему выходит ошибка, если при простом вызове Transitions.Sine.easeIn() всё нормально работает?
Группы: [Разработчики]
|
|
| Вернуться к началу |
|
 |
Александр Михалицын
Администратор
Возраст: 14
Пол: мужской
Зарегистрирован: 13.06.2008
Сообщения: 541
Благодарности: 2/3
Откуда: Свердловская область, Краснотурьинск
Монет: 9276
|
| Добавлено: Tue Nov 04, 2008 7:12 pm Заголовок сообщения: Скачать пост |
цитировать |
|
Так,
ну это особенность JavaScript'a,
ты не можешь присвоить метод другой переменной
и использовать - например, вот так, работать не будет:
| Код: | function myClass()
{
this.text = 'Hello, World!';
this.method = function()
{
alert(this.text);
}
}
var ex_myClass = new myClass();
var some_var = ex_myClass.method;
setTimeout(some_var, 1000); |
Дело в том, что после присвоения ссылке метода,
метод оказывается в глобальном или инном контексте,
смотря в каком контексте была определенна переменная (ссылка).
Тоесть если ты вызываешь свой метод
по ссылке из другой функции, то в её контексте будет
искаться переменная me!
//Внимание!!!
Запуск вследующего примера опасен для жизни. 
Перед тем, как его запустить, запустите предыдуший.
Например:
| Код: | function myClass()
{
this.text = 'Hello, World!';
this.method = function()
{
alert(this.text);
}
}
var ex_myClass = new myClass();
function neVazjno()
{
this.text = 1;
var some_var = ex_myClass.method;
setTimeout(some_var, 1000);
}
neVazjno(); |
Вот такие вот дела...
ООП....
Все что тут написано, я знаю благодаря терпиливым людям:
Furax, WingedFox.
(Это отнюдь не значит, что они писали за меня этот текст,
они просто объяснили некоторые принципы, а до этих
вещей я уже сам допер. Обращайтесь - попробую помочь.)
А Furax, WingedFox,
вам огромное человеческое и дружеское спасибо! 
Дим, у меня у самого мозги набекрень от этого ООП были,
поверь. Но я пару десятков часов, поэксперемментировал
и все встало на свои места. 
_________________
Мои файлы
Мой локальный сервер
Мой аккаунт на forum.dklab.ru
Группы: [Sunset-cms team]
[Авторы модификаций]
[Модераторы]
[Разработчики]
|
|
| Вернуться к началу |
|
|
Cr@ZyBoY
Starting Member
Возраст: 17
Пол: мужской
Зарегистрирован: 29.08.2008
Сообщения: 46
Откуда: Мытищи
Монет: 648
|
| Добавлено: Tue Nov 04, 2008 9:20 pm Заголовок сообщения: Скачать пост |
цитировать |
|
Так всё таки, что нужно сделать, чтобы Transitions.Sine.easeIn и остальное нормально вызывалось из класса Transition? Просто я уже перепробовал всё, что только можно 
Группы: [Разработчики]
|
|
| Вернуться к началу |
|
|
Александр Михалицын
Администратор
Возраст: 14
Пол: мужской
Зарегистрирован: 13.06.2008
Сообщения: 541
Благодарности: 2/3
Откуда: Свердловская область, Краснотурьинск
Монет: 9276
|
| Добавлено: Wed Nov 05, 2008 7:00 am Заголовок сообщения: Скачать пост |
цитировать |
|
Cr@ZyBoY,
вызывай ка глобал вару.
Тоесть так:
| Код: | this.next = function() {
oneLeft = false;
var now = new Date().getTime();
var percentage = Math.min(1, (now - start) / milliseconds);
return Transitions.Sine.easeIn(percentage);
}
|
По другому, помоему никак.
Хотя... с извратами страшными, возможно что-то и можно изобрести,
еще есть вот такой способ:
| Код: | function Transition(curve, milliseconds, callback) {
this.me = чему-то там... например через аргумент передай!
Тогда остальное можно оставить! |
_________________
Мои файлы
Мой локальный сервер
Мой аккаунт на forum.dklab.ru
Группы: [Sunset-cms team]
[Авторы модификаций]
[Модераторы]
[Разработчики]
|
|
| Вернуться к началу |
|
|
Furax
Бледнотик
Возраст: 22
Пол: Не указан
Зарегистрирован: 29.08.2008
Сообщения: 172
Благодарности: 3/0
Монет: 1272
|
|
| Вернуться к началу |
|
|
Cr@ZyBoY
Starting Member
Возраст: 17
Пол: мужской
Зарегистрирован: 29.08.2008
Сообщения: 46
Откуда: Мытищи
Монет: 648
|
| Добавлено: Wed Nov 05, 2008 5:26 pm Заголовок сообщения: Скачать пост |
цитировать |
|
| Цитата: | | вызывай ка глобал вару. |
Мне же не только синусоиду вызывать нужно, но и остальные!
Furax
Уже пробовал, но что-то никак... Буду ещё экспериментировать...
Группы: [Разработчики]
|
|
| Вернуться к началу |
|
|
Cr@ZyBoY
Starting Member
Возраст: 17
Пол: мужской
Зарегистрирован: 29.08.2008
Сообщения: 46
Откуда: Мытищи
Монет: 648
|
| Добавлено: Wed Nov 05, 2008 6:30 pm Заголовок сообщения: Скачать пост |
цитировать |
|
Всё, разобрался
| Код: | for (var t in Transitions.types) {
Transitions[t] = {};
Transitions[t].easeIn = function(p) {
return Transitions.types[this](p);
}.bind(t);
Transitions[t].easeOut = function(p) {
return 1 - Transitions.types[this](1 - p);
}.bind(t);
Transitions[t].easeInOut = function(p) {
return (p <= 0.5) ? Transitions.types[this](2 * p) / 2 : (2 - Transitions.types[this](2 * (1 - p))) / 2;
}.bind(t);
} |
http://sjs-tech.ru/test/carbon_js_v0_2_0_animation.htm
Группы: [Разработчики]
|
|
| Вернуться к началу |
|
|
Furax
Бледнотик
Возраст: 22
Пол: Не указан
Зарегистрирован: 29.08.2008
Сообщения: 172
Благодарности: 3/0
Монет: 1272
|
| Добавлено: Wed Nov 05, 2008 7:27 pm Заголовок сообщения: Скачать пост |
цитировать |
|
Cr@ZyBoY
Странный закон... При такой анимаци синусоида вообще не в тему - речь идёт о свободном падении.
Группы: [Разработчики]
|
|
| Вернуться к началу |
|
|
Cr@ZyBoY
Starting Member
Возраст: 17
Пол: мужской
Зарегистрирован: 29.08.2008
Сообщения: 46
Откуда: Мытищи
Монет: 648
|
| Добавлено: Wed Nov 05, 2008 8:12 pm Заголовок сообщения: Скачать пост |
цитировать |
|
Furax
Синусоида - это синусоида, в данном случае она не используется Это просто рабочий пример использования класса Transitions.Bounce.easeIn. С тем же успехом я мог бы написать Transparence.Sine.easeIn (Out, InOut), текстовые блоки двигались бы просто по другому закону
Посмотри тот пример, я его немного переписал для обработки всех возможных на данный момент законов.
Группы: [Разработчики]
|
|
| Вернуться к началу |
|
|
Александр Михалицын
Администратор
Возраст: 14
Пол: мужской
Зарегистрирован: 13.06.2008
Сообщения: 541
Благодарности: 2/3
Откуда: Свердловская область, Краснотурьинск
Монет: 9276
|
| Добавлено: Thu Nov 06, 2008 12:18 pm Заголовок сообщения: Скачать пост |
цитировать |
|
Всем на будушее.
Только вот я бы нестал к this прикручивать t,
это ведь не контекст, работает, но идеалогически
не верно.
Лучше так:
| Код: | for (var t in Transitions.types) {
Transitions[t] = {};
Transitions[t].easeIn = function(p) {
return this(p);
}.bind(Transitions.types[t]);
Transitions[t].easeOut = function(p) {
return 1 - this(1 - p);
}.bind(Transitions.types[t]);
Transitions[t].easeInOut = function(p) {
return (p <= 0.5) ? this(2 * p) / 2 : (2 - Transitions.types[this](2 * (1 - p))) / 2;
}.bind(Transitions.types[t]);
} |
_________________
Мои файлы
Мой локальный сервер
Мой аккаунт на forum.dklab.ru
Группы: [Sunset-cms team]
[Авторы модификаций]
[Модераторы]
[Разработчики]
|
|
| Вернуться к началу |
|
|
Cr@ZyBoY
Starting Member
Возраст: 17
Пол: мужской
Зарегистрирован: 29.08.2008
Сообщения: 46
Откуда: Мытищи
Монет: 648
|
| Добавлено: Fri Nov 07, 2008 4:39 pm Заголовок сообщения: Скачать пост |
цитировать |
|
Как понять, идеалогически не верно? Какая разница, что передать в функцию - переменную или объект? Помойму всё равно.
p.s: спасибо за ссылку, теперь хоть разобрался, что там к чему было и почему не работало
Группы: [Разработчики]
|
|
| Вернуться к началу |
|
|
Александр Михалицын
Администратор
Возраст: 14
Пол: мужской
Зарегистрирован: 13.06.2008
Сообщения: 541
Благодарности: 2/3
Откуда: Свердловская область, Краснотурьинск
Монет: 9276
|
|
| Вернуться к началу |
|
|
Cr@ZyBoY
Starting Member
Возраст: 17
Пол: мужской
Зарегистрирован: 29.08.2008
Сообщения: 46
Откуда: Мытищи
Монет: 648
|
| Добавлено: Sat Nov 08, 2008 5:21 pm Заголовок сообщения: Скачать пост |
цитировать |
|
Хм, а кто сказал, что this обязательно должен указывать на текущий объект? Даже по той ссылке, что ты приводил, рассказывается о том, что this может указывать совсем на другое место.
Такой метод передачи в функцию через this чего угодно используется уже достаточно давно и широко, так что не вижу причин для паники
Группы: [Разработчики]
|
|
| Вернуться к началу |
|
|
Александр Михалицын
Администратор
Возраст: 14
Пол: мужской
Зарегистрирован: 13.06.2008
Сообщения: 541
Благодарности: 2/3
Откуда: Свердловская область, Краснотурьинск
Монет: 9276
|
| Добавлено: Sun Nov 09, 2008 10:11 am Заголовок сообщения: Скачать пост |
цитировать |
|
Cr@ZyBoY,
через this передается требуемый контекст!
И ни в коем случае он не должен являться
строкой, числом, массивом.
Это должен быть Object.
Ты можешь меня не слушать, типа я тут для пантов что-то говорю,
дело в общем твоё.
| Цитата: | | Такой метод передачи в функцию через this чего угодно |
Через this ты можешь передать что угодно, но сам this должен обозначать контекст, уже после обращаться к необходимой информации, при помощи свойств, как это продемонстрировал я.
_________________
Мои файлы
Мой локальный сервер
Мой аккаунт на forum.dklab.ru
Группы: [Sunset-cms team]
[Авторы модификаций]
[Модераторы]
[Разработчики]
|
|
| Вернуться к началу |
|
|
|
|
[ Time: 0.5727s ][ Queries: 61 (0.4776s) ][ Gzip: off ][ Memory: 0mb ]
|
Подписанные темы
FAQ
Поиск
Пользователи
Группы
Регистрация
Профиль
Войти и проверить личные сообщения
Вход
