Сегодня я кратко изучил JS Sports Animation, записал свой опыт и поделился ими со всеми.
Ниже приведены результаты, которые я разобрался.
Точка знания 1: скорость анимация.
1. Во -первых, первым шагом является реализация анимации скорости движения, инкапсулировать функцию, используемые знания - setInterval (function () {
Кода -копия выглядит следующим образом:
ODIV.STYLE.LEFT = ODIV.OFFSETLEFT+10+"PX";
}, 30).
Что касается того, почему здесь используется OffSetleft, я специально Baidu, и полезная информация, которую я получил:
A.OffSetleft и слева - это то же самое, что и представляют левое положение детского узла относительно родительского узла.
беременный Но слева и читаемым, так и писательским, в то время как OffSetSetleft только для чтения;
в И OffsetSetleft не имеет единицы, и он не содержит PX при получении позиции узела дочернего узела.
Я продемонстрирую другие знания здесь. Спасибо этому блоггеру, http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201372885729561/.
2. Пусть движущийся узел остановится. Здесь мы используем оператор IF для проверки. Если offsetleft == 0, clearInterval (таймер), таймер здесь должен инициализировать = NULL заранее, а затем назначить предыдущую анимацию движения.
3. Здесь есть проблема. Если движение снова запускается до конца движения, скорость движения будет накапливаться. Здесь, до тех пор, пока все начинается, достаточно ClearInterval (таймер).
4. Установите эффект движения и удаления и установите параметры для движения, один - скорость скорости, а другой - целевая позиция. Мы обнаружили, что скорость также может быть оценена по положению ITARGET, поэтому необходим только один параметр.
Точка знания 2: Градиент прозрачности
1. На самом деле, это похоже на то, что просто сейчас, за исключением того, что ценность ITARGE является прозрачным, и процесс состоит в том, чтобы очистить таймер и включить другой таймер, чтобы вынести суждения и т. Д.
2. Определите параметр alpha = прозрачность, обратите внимание, что таймер должен быть записан так:
Кода -копия выглядит следующим образом:
альфа+= скорость;
ODIV.STYLE.FILTER = 'ALPHA (непрозрачность:'+alpha+')'; // это очень важный метод, обратите внимание, что он написан так
Odiv.Style.Opacity = Alpha/100; // Будьте осторожны, чтобы не забыть разделить на 100
3. Вышеуказанное-все встроенные стили.
Точка знания три: буферизацию движения
1. Буферизация движения означает, что чем больше расстояние, тем больше скорость и чем меньше расстояние, тем меньше скорость, то есть скорость связана с расстоянием.
2. Согласно вышеуказанному утверждению, скорость переопределяется. Скорость 0 в начале, а теперь:
Кода -копия выглядит следующим образом:
var speed = itarget-odiv.offsetleft;
Переопределить таймер:
Кода -копия выглядит следующим образом:
ODIV.STYLE.LEFT = ODIV.OFFSETLEFT+SPEED+'PX';
В настоящее время мы обнаружили, что скорость была слишком высокой, поэтому мы могли бы сделать это так:
Кода -копия выглядит следующим образом:
var speed = (itarget-odiv.offsetleft)/10;
3. В это время будет серьезная проблема. Поскольку минимальная единица экрана составляет PX, окончательное левое значение будет отображаться как десятичное значение, а iTarget не будет целью. Это может быть решено суждением. Math.floor () должен быть представлен здесь, который округляет, а также появится Math.ceil (), который заверняется. После определения скорости мы пишем это:
Кода -копия выглядит следующим образом:
speed = speed> 0? math.ceil (speed): math.floor (speed);
Это гарантирует, что скорость является целым числом и что она составляет 0 в критическом значении.
Точка знания 4: многообъективное движение
1. Сначала получите все объекты, сформируйте массив, а затем используйте для цикла, чтобы сделать это (насколько классический этот метод!), Добавьте события узла в цикл для цикла и используйте его, чтобы заменить текущий узел в функции, например: startmove (это, itarget), startmove (obj, itarget) при определении функции.
2. При принятии текущей ширины, вы должны использовать значение OBJ.
3. Когда мышь движется очень быстро, ширина узла не может быть восстановлена до его первоначального состояния. Это потому, что таймер - это таймер, который все используют. Следующий узел очистил таймер до того, как предыдущий узел вернулся в свое исходное состояние. Решение состоит в том, чтобы добавить индекс в каждый узел, который должен добавить adiv [i] .timer = null к вышеуказанному для цикла; и затем определите функцию, чтобы заменить таймер на Obj.timer. Поэтому мы должны обратить внимание на тот факт, что что -то происходит, когда делятся таймером.
4. В движении прозрачности Альфа заменяет скорость, но даже если таймер не является общим, движение нескольких объектов будет иметь проблемы. Это связано с тем, что альфа распространена, в результате чего каждый объект разрывает друг друга. Решение состоит в том, чтобы назначить альфа каждому узлу в цикле для петли, как таймер.
Резюме: Решение вопросов конфликта, либо инициализация, либо персонализировать.
Точка знания 5. Получить стиль
1. В таймере, который изменяет ширину узла (двигайтесь в целом, удалите маленький), если вы добавите границу в узел, он меньше, чем целевой узел, когда он перемещается и больше, чем целевой узел, когда он перемещается. Обратите внимание на ширину+прокладку+прокрутки (прокрутки)+граница, поэтому причина в том, что каждое смещение увеличивает границу*2- (значение каждого уменьшения таймера).
2. Решение вышеуказанной проблемы состоит в том, чтобы записать ширину в линии и использовать Parseint (Odiv.Style.width) вместо OffSetleft, но его не всегда нельзя записать в строке, поэтому мы определяем функцию для получения стиля цепи:
Кода -копия выглядит следующим образом:
function getStyle (obj, attr) {
if (obj.currentStyle) {
вернуть obj.currentStyle [attr]; // т.е. браузер
}
еще{
вернуть getComputerStyle (obj, false) [attr]; // другие браузеры
}
}
3. Для шрифта в JS есть только метод написания шрифтов.
Точка знания 6: Любое значение атрибута
1. Все смещено- будут иметь небольшие ошибки. Используйте функцию GetStyle. Эта функция часто используется с parseint () и обычно сохраняется с переменными.
2. При написании стиля. Всемирные, вы также можете написать его как стиль ['ширина'].
3. Для регулировки значения атрибута нескольких объектов вы можете инкапсулировать стиль как параметр, так что функции атрибутов нескольких объектов включали три значения атрибута (obj, attr, itarget).
4. Вышеуказанная кадр движения не подходит для изменений прозрачности, потому что прозрачность - это десятичная. По двум причинам первым является Parseint, а второй - ATTR = ...+PX. Здесь мы можем использовать интерпретацию IF для обработки прозрачности отдельно, заменить Parseint Parsefloat и удалить Px.
5. Сам компьютер имеет ошибку, 0,07*100 не равно 7, поэтому мы вводим функцию, которая является математикой. Round (), которая является округлым значением.
Точка знания 7: Цепное движение
1. Установите структуру Move.js.
2. Пропустите функцию обратного вызова fn () и используйте, если судить. Если есть fn (), то выполните fn ().
Точка знания 8: одновременные упражнения
1. Если две функции движения записываются для управления одновременным движением, произойдет перезапись функций.
2. Используйте JSON в качестве точки знания. Петля JSON использует для (I в JSON), а параметры функции движения - OBJ, JSON и FN.
3. Там нет значения ITARGET, и его заменяется JSON [ATTR].
После написания этого все закончилось. Я надеюсь, что все это понравится. Я также надеюсь, что всем будет полезно изучать спортивную анимацию JS.