Работаем над страницей,В большинстве случаев вы столкнетесь с проблемой сделать это на странице.анимацияЭффект,Большую часть времени мы делаем анимацию, используя фреймворки (например, jquery).,Здесь я расскажу, как добиться эффекта кадровой анимации с помощью встроенного js!

1. Объяснение эффекта анимации с одинаковой скоростью: Анимация с равномерной скоростью означает, что эффект анимации выполняется с одинаковой скоростью от начала до конца.

Равномерная анимация

html,body{margin:0;padding:0;}

div{margin:0;padding:0;}

.odiv{width:200px; height:200px; background:#f00; position:relative; left:-200px; top:100px;}

.sdiv{width:20px; height:60px; background:#00f; position:absolute; top:70px; right:-20px;}

window.onload = function(){

var odiv = document.getElementById(‘odiv’);

odiv.onmouseover = function(){

startMover(0);

}

odiv.onmouseout = function(){

startMover(-200);

}

}

var timer = null;

функция startMover(itarget){//целевое значение

ClearInterval(timer);//Выполняем текущую анимацию и очищаем предыдущую анимацию

var odiv = document.getElementById(‘odiv’);

timer = setInterval(function(){

var speed = 0;

if(odiv.offsetLeft > itarget){

speed = -1;

}

else{

speed = 1;

}

if(odiv.offsetLeft == itarget){

clearInterval(timer);

}

else{

odiv.style.left = odiv.offsetLeft+speed+’px’;

}

},30);

}

//указывать:offsetWidth = ширина+отступ+граница

//offsetHeight = height+padding+border

//offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)

//offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)

/*

offsetLeft=(отступ смещения влево)+(смещение ширины среднего элемента)+(левое поле текущего элемента).

offsetTop=(верхняя часть отступа OffsetParent)+(смещение высоты среднего элемента)+(верхняя граница текущего элемента).

Ситуация особенная, когда offsetParent является телом:

В IE8/9/10 и Chrome offsetLeft = (левое поле тела)+(ширина границы тела)+(левое отступы тела)+(левое поле текущего элемента).

В FireFox offsetLeft = (поле слева от тела)+(отступ слева от тела)+(поле слева от текущего элемента).

Свойство offsetParent возвращает ссылку на объект, который находится ближе всего к элементу, вызывающему offsetParent (ближайший в содержащей его иерархии), и является элементом-контейнером, позиционированным с помощью CSS. Если этот элемент контейнера не позиционирован CSS, значение атрибута offsetParent является ссылкой на корневой элемент.

В общем, два правила:

1. Если родительский элемент текущего элемента не позиционируется CSS (позиция является абсолютной или относительной), offsetParent является телом.

2. Если родительский элемент текущего элемента имеет позиционирование CSS (позиция абсолютная или относительная), offsetParent принимает ближайший родительский элемент.

*/

2. Описание буферной анимации. Буферная анимация — это когда анимация заканчивается или начинается, а скорость динамически изменяется по мере выполнения анимации.

буферная анимация

html,body{margin:0;padding:0;}

div{margin:0;padding:0;}

.odiv{width:200px; height:200px; background:#f00; position:relative; left:-200px; top:100px;}

.sdiv{width:20px; height:60px; background:#00f; position:absolute; top:70px; right:-20px;}

window.onload = function(){

var odiv = document.getElementById(‘odiv’);

odiv.onmouseover = function(){

startMover(0);

}

odiv.onmouseout = function(){

startMover(-200);

}

}

var timer = null;

функция startMover(itarget){//Скорость и целевое значение

ClearInterval(timer);//Выполняем текущую анимацию и очищаем предыдущую анимацию

var odiv = document.getElementById(‘odiv’);

timer = setInterval(function(){

var Speed ​​= (itarget-odiv.offsetLeft)/10 //Значение изменения параметра скорости анимации буфера

//Если скорость больше 0, значит идти вправо, округляем в большую сторону

speed = speed>0?Math.ceil(speed):Math.floor(speed);

//Math.floor(); округляем вниз

if(odiv.offsetLeft == itarget){

clearInterval(timer);

}

else{

//clientLeft возвращает расстояние между значением свойства offsetLeft объекта и реальным значением в левой части текущего окна

odiv.style.left = odiv.offsetLeft+speed+’px’;

}

},30);

}

3. Анимация прозрачности

Описание: Анимация, которая обрабатывает эффекты прозрачности элементов.

анимация прозрачности

html,body{margin:0;padding:0;}

div{margin:0;padding:0;}

.odiv{width:200px; height:200px; background:#f00; position:relative; left:0px; top:100px;opacity:0.3; filter:alpha(opacity:30); float:left; margin:10px;}

window.onload = function(){

var odiv = document.getElementsByTagName(‘div’);

for(var i=0;i

{

odiv[i].onmouseover = function(){

startOP(this,100);

}

odiv[i].onmouseout = function(){

startOP(this,30);

}

odiv[i].timer = null;//Определено заранее

odiv[i].alpha = null;//Определено заранее

//Здесь обнаружена проблема. Свойство анимации объекта определять не нужно, но необходимо определить свойство прозрачности, иначе будет сообщено об ошибке.

}

}

function startOP(obj,utarget){

ClearInterval(obj.timer);//Сначала закрываем таймер

obj.timer = setInterval(function(){

var speed = 0;

if(obj.alpha>utarget){

speed = -10;

}

else{

speed = 10;

}

obj.alpha = obj.alpha+speed;

if(obj.alpha == utarget){

clearInterval(obj.timer);

}

obj.style.filter = ‘alpha(opacity:’+obj.alpha+’)’;//на основе IE

obj.style.opacity = parseInt(obj.alpha)/100;

},30);

}

4. Многообъектная анимация

Описание: Анимационные эффекты, выполняемые несколькими объектами вместе.

Анимация нескольких объектов

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}

table {border-collapse:collapse;border-spacing:0;}

fieldset,img {border:0}

address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}

ol,ul {list-style:none}

caption,th,td{text-align:center}

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}

q:before,q:after {content:”}

abbr,acronym { border:0}

.odiv{position:relative;}

.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px;}

window.onload = function(){

var olist = document.getElementsByTagName(‘li’);

for(var i=0; i

{

olist[i].onmouseover = function(){

startmov(this,400);

};

olist[i].onmouseleave = function(){

startmov(this,200);

};

olist[i].timer = null;

}

function startmov(obj,itarget){

ClearInterval(obj.timer);//Очистить анимацию перед выполнением анимации

obj.timer = setInterval(function(){

var speed =0;

speed = (itarget – obj.offsetWidth)/8;

speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(obj.offsetWidth == itarget){

clearInterval(obj.timer);

}

else{

obj.style.width = obj.offsetWidth+speed+’px’;

}

},30);

}

}

//offsetWidth получает фактическую ширину элемента (включая границы и отступы)

//Пока движется несколько объектов, все атрибуты не могут быть общими.

5. Получите анимацию стиля

Примечание. Полученный здесь стиль предназначен для расчета стиля элемента, а затем управления элементом с помощью вычисленного результата.

стиль анимации

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}

table {border-collapse:collapse;border-spacing:0;}

fieldset,img {border:0}

address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}

ol,ul {list-style:none}

caption,th,td{text-align:center}

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}

q:before,q:after {content:”}

abbr,acronym { border:0}

.odiv{position:relative;width:200px; height:200px; border:2px solid #000; background:red; font-size:20px;}

hjshfjdfsdfhsdj

/*

currentStyle: получить рассчитанный стиль, также называемый текущим стилем и окончательным стилем.

Преимущества: вы можете получить окончательный стиль элемента, включая значение по умолчанию браузера, в отличие от стиля, который может получить только встроенный стиль, поэтому он используется чаще.

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

alert (oAbc.currentStyle);

Жаль, что эта полезная вещь не совсем поддерживается крупными браузерами. Точнее, в протестированных мной браузерах «объект CSSStyleDeclaration» появлялся в IE8 и Opera 11; «неопределенный» появлялся в FF 12, chrome 14 и Safari 5.

Хотя currentStyle не может быть применен ко всем браузерам, вы можете отличить поддерживаемые и неподдерживаемые браузеры на основе приведенных выше результатов тестирования, а затем найти совместимый метод записи.

var oAbc = document.getElementById(“abc”);

if(oAbc.currentStyle) {

//IE、Opera

alert("Я поддерживаю currentStyle");

} else {

//FF、chrome、safari

alert("Я не поддерживаю currentStyle");

}

Фактически, в браузере FF мы можем использовать getComputedStyle(obj, false) для достижения того же эффекта, что и currentStyle в IE.

getComputedStyle(obj,false): В новой версии FF требуется только первый параметр, который является объектом операции. Запись «false» в качестве второго параметра также является распространенным способом его записи. Цель — обеспечить совместимость. со старой версией браузера Firefox.

Совместимое написание:

var oAbc = document.getElementById(“abc”);

if(oAbc.currentStyle) {

//IE、Opera

//alert("Я поддерживаю currentStyle");

alert(oAbc.currentStyle.width);

} else {

//FF、chrome、safari

//alert("Я не поддерживаю currentStyle");

alert(getComputedStyle(oAbc,false).width);

}

На пустой странице проверяется id="abc" тела. При тестировании приведенного выше кода в IE и Opera появляется сообщение «auto», а в трех других браузерах — «***px». Хотя результаты разные, можно обнаружить, что Chrome и Safari могут успешно читать значения атрибутов так же, как Firefox. Все три браузера (FF, Chrome и Safari), не поддерживающие currentStyle, поддерживают getComputedStyle.

Результаты показывают, что если судить о том, поддерживает ли браузер currentStyle + getComputedStyle, он может быть совместим со всеми основными браузерами. И метод совместимого письма не сложный. Вы его освоили? ^_^

Поддержка текущего стиля: IE, Opera

Поддержка getComputedStyle: FireFox, Chrome, Safari.

Обратите внимание на содержимое последнего всплывающего окна. currentStyle возвращает значение браузера по умолчанию «auto», а getComputedStyle возвращает конкретное значение «**px». Это должна быть небольшая разница между ними. Заинтересованная детская обувь может общаться и учиться вместе.

*/

window.onload = function(){

var odiv = document.getElementById(‘odiv’);

odiv.onmouseover = function(){

startMov(this);

};

function startMov(obj){

setInterval(function(){

obj.style.width = parseInt(getStyle(obj,’width’))+1+’px’;

obj.style.fontSize = parseInt(getStyle(obj,’fontSize’))+1+’px’;

},30);

}

function getStyle(obj,attr)

{

if(obj.currentStyle){

return obj.currentStyle[attr];

}

else{

return getComputedStyle(obj,false)[attr];

}

}

}

//offsetWidth получает фактическую ширину элемента (включая границы и отступы)

//Пока движется несколько объектов, все атрибуты не могут быть общими.

6. Описание сложной многообъектной анимации: Сложная многообъектная анимация может управлять изменениями различных атрибутов элементов для достижения анимационных эффектов.

Сложная анимация нескольких объектов

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}

table {border-collapse:collapse;border-spacing:0;}

fieldset,img {border:0}

address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}

ol,ul {list-style:none}

caption,th,td{text-align:center}

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}

q:before,q:after {content:”}

abbr,acronym { border:0}

.odiv{position:relative;}

.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}

window.onload = function(){

var li1 = document.getElementById(‘li1’);

var li2 = document.getElementById(‘li2’);

li1.onmouseover = function(){

startMov(this,400,’width’);

};

li1.onmouseout = function(){

startMov(this,200,’width’);

};

li2.onmouseover = function(){

startMov(this,200,’height’);

};

li2.onmouseout = function(){

startMov(this,100,’height’);

};

function startMov(obj,itarget,attr){

ClearInterval(obj.timer);//Очистить анимацию перед выполнением анимации

obj.timer = setInterval(function(){

var icur = parseInt(getStyle(obj,attr));

var speed =0;

speed = (itarget – icur)/8;

speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(icur == itarget){

clearInterval(obj.timer);

}

else{

obj.style[attr] = icur+speed+’px’;

}

},30);

}

function getStyle(obj,attr)

{

if(obj.currentStyle){

return obj.currentStyle[attr];

}

else{

return getComputedStyle(obj,false)[attr];

}

}

}

//offsetWidth получает фактическую ширину элемента (включая границы и отступы)

//Пока движется несколько объектов, все атрибуты не могут быть общими.

7. Сложная анимация нескольких объектов (с прозрачностью)

Сложная анимация нескольких объектов (с прозрачностью)

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}

table {border-collapse:collapse;border-spacing:0;}

fieldset,img {border:0}

address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}

ol,ul {list-style:none}

caption,th,td{text-align:center}

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}

q:before,q:after {content:”}

abbr,acronym { border:0}

.odiv{position:relative;}

.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}

#li1{opacity:0.3;filter:alpha(opacity:30);}

window.onload = function(){

var li1 = document.getElementById(‘li1’);

var li2 = document.getElementById(‘li2’);

li1.onmouseover = function(){

startMov(this,100,’opacity’);

};

li1.onmouseout = function(){

startMov(this,30,’opacity’);

};

li2.onmouseover = function(){

startMov(this,200,’height’);

};

li2.onmouseout = function(){

startMov(this,100,’height’);

}

li1.timer = null;

li2.timer = null;

function startMov(obj,itarget,attr){

ClearInterval(obj.timer);//Очистить анимацию перед выполнением анимации

obj.timer = setInterval(function(){

var icur = 0;

if(attr == ‘opacity’){

icur = Math.round(parseFloat(getStyle(obj,attr))*100 //Преобразуем в целое число и округление;

//Компьютеры часто ошибаются при вычислении десятичных дробей!

}

else{

icur = parseInt(getStyle(obj,attr));

}

var speed =0;

speed = (itarget – icur)/8;

speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(icur == itarget){

clearInterval(obj.timer);

}

else{

if(attr == ‘opacity’){

obj.style.filter = ‘alpha(opacity:’+(icur+speed)+’)’;

obj.style.opacity = (icur+speed)/100;

}

else{

obj.style[attr] = icur+speed+’px’;

}

}

},30);

}

function getStyle(obj,attr)

{

if(obj.currentStyle){

return obj.currentStyle[attr];

}

else{

return getComputedStyle(obj,false)[attr];

}

}

}

//offsetWidth получает фактическую ширину элемента (включая границы и отступы)

//Пока движется несколько объектов, все атрибуты не могут быть общими.

8. Описание цепной анимации: Цепная анимация предназначена для выполнения следующего эффекта анимации после завершения текущей анимации.

цепная анимация

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}

table {border-collapse:collapse;border-spacing:0;}

fieldset,img {border:0}

address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}

ol,ul {list-style:none}

caption,th,td{text-align:center}

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}

q:before,q:after {content:”}

abbr,acronym { border:0}

.odiv{position:relative;}

.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}

#li1{opacity:0.3;filter:alpha(opacity:30);}

window.onload = function(){

var li1 = document.getElementById(‘li1’);

li1.onmouseover = function(){

startMov(li1,400,’width’,function(){

startMov(li1,200,’height’,function(){

startMov(li1,100,’opacity’);

});

});

};

li1.onmouseout = function(){

startMov(li1,30,’opacity’,function(){

startMov(li1,100,’height’,function(){

startMov(li1,100,’width’);

});

});

};

li1.timer = null;

функция startMov(obj,itarget,attr,fn){//fn функция обратного вызова

ClearInterval(obj.timer);//Очистить анимацию перед выполнением анимации

obj.timer = setInterval(function(){

var icur = 0;

if(attr == ‘opacity’){

icur = Math.round(parseFloat(getStyle(obj,attr))*100 //Преобразуем в целое число и округление;

//Компьютеры часто ошибаются при вычислении десятичных дробей!

}

else{

icur = parseInt(getStyle(obj,attr));

}

var speed =0;

speed = (itarget – icur)/8;

speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(icur == itarget){

clearInterval(obj.timer);

if(fn){

fn();

}

}

else{

if(attr == ‘opacity’){

obj.style.filter = ‘alpha(opacity:’+(icur+speed)+’)’;

obj.style.opacity = (icur+speed)/100;

}

else{

obj.style[attr] = icur+speed+’px’;

}

}

},30);

}

function getStyle(obj,attr)

{

if(obj.currentStyle){

return obj.currentStyle[attr];

}

else{

return getComputedStyle(obj,false)[attr];

}

}

}

//offsetWidth получает фактическую ширину элемента (включая границы и отступы)

//Пока движется несколько объектов, все атрибуты не могут быть общими.

9. Одновременная анимация движения нескольких объектов (поддерживается цепная анимация)

Одновременная анимация движения нескольких объектов

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}

table {border-collapse:collapse;border-spacing:0;}

fieldset,img {border:0}

address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}

ol,ul {list-style:none}

caption,th,td{text-align:center}

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}

q:before,q:after {content:”}

abbr,acronym { border:0}

.odiv{position:relative;}

.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}

#li1{opacity:0.3;filter:alpha(opacity:30);}

window.onload = function(){

var li1 = document.getElementById(‘li1’);

li1.onmouseover = function(){

startMov(li1,{width:201,height:200,opacity:100});

};

li1.onmouseout = function(){

startMov(li1,{width:200,height:100,opacity:30});

};

li1.timer = null;

функция startMov(obj,json,fn){//fn функция обратного вызова

ClearInterval(obj.timer);//Очистить анимацию перед выполнением анимации

var flag = true;//Завершилась ли анимация

obj.timer = setInterval(function(){

for(var attr in json){

var icur = 0;

if(attr == ‘opacity’){

icur = Math.round(parseFloat(getStyle(obj,attr))*100 //Преобразуем в целое число и округление;

//Компьютеры часто ошибаются при вычислении десятичных дробей!

}

else{

icur = parseInt(getStyle(obj,attr));

}

var speed =0;

speed = (json[attr] – icur)/8;

speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(icur != json[attr]){

flag = false;

}

if(attr == ‘opacity’){

obj.style.filter = ‘alpha(opacity:’+(icur+speed)+’)’;

obj.style.opacity = (icur+speed)/100;

}

else{

obj.style[attr] = icur+speed+’px’;

}

if(flag){

clearInterval(obj.timer);

if(fn){

fn();

}

}

}

},30);

}

function getStyle(obj,attr)

{

if(obj.currentStyle){

return obj.currentStyle[attr];

}

else{

return getComputedStyle(obj,false)[attr];

}

}

}

//offsetWidth получает фактическую ширину элемента (включая границы и отступы)

//Пока движется несколько объектов, все атрибуты не могут быть общими.

Последний анимационный эффект дополняет коды всех вышеперечисленных анимаций, и вы можете расширить его согласно приведенным выше кодам!

Фактически, эти девять собственных эффектов анимации JS обладают уникальными особенностями. Каждый исходный код можно напрямую скопировать и запустить. Я надеюсь, что это будет полезно каждому при освоении анимации JS.

Заявление об авторских правах: Содержание этой статьи добровольно предоставлено пользователями Интернета, а мнения, выраженные в этой статье, представляют собой только точку зрения автора. Этот сайт предоставляет только услуги по хранению информации, не имеет никаких прав собственности и не принимает на себя соответствующие юридические обязательства. Если вы обнаружите на этом сайте какое-либо подозрительное нарушение авторских прав/незаконный контент, отправьте электронное письмо, чтобы сообщить. После проверки этот сайт будет немедленно удален.

Издатель: Full stack программист и руководитель стека, укажите источник для перепечатки: https://javaforall.cn/181635.html Исходная ссылка: https://javaforall.cn