Има абсолютна увереност, че анимациите могат да имат значителен ефект върху цялостния външен вид и усещане на уебсайта. Те са приятна функция, стига да могат да се изпълняват разумно и да направят потребителското изживяване приятно. Освен това можете безпроблемно да привлечете окото на вашите потребители, за да увеличите трафика на вашия интернет сайт чрез анимации, за да ги задържите на вашия сайт за по-дълго време.
Освен това е много вероятно да има многобройни JavaScript библиотеки, които ще използваме за изграждане на великолепни анимации за нашите уебсайтове чрез тяхното използване, което ни позволява да създаваме невероятни анимации на нашата уеб страница.
Нека започнем списъка с библиотеки за анимация на JavaScript, които да изпробвате без определен ред.
1. Аниме js
Като библиотека за анимация на Javascript, Anime.js предоставя прост, но мощен API, който позволява работата да се извършва бързо.
Може да работи с CSS свойства, SVG файлове, DOM атрибути и JavaScript обекти.
Анимациите могат да се възпроизвеждат, поставят на пауза, рестартират, обръщат или спират с помощта на Anime.js. Освен тези функции, библиотеката също така предоставя феноменален брой функции за анимиране на елементи с последващи преминавания и припокривания. Също така можем да слушаме събития, свързани с анимация, като използваме обратни извиквания и обещания, които ни позволяват да получаваме известия, когато видим нещо, което е анимирано.
Едно от основните предимства на Anime.js е неговата гъвкавост. Библиотеката позволява на потребителите да създават широк набор от анимации, от просто движение до сложни и многопластови ефекти. Това го прави много подходящ за различни анимационни нужди, от прости анимации на потребителския интерфейс до по-сложни и интерактивни ефекти.
Друго предимство на Anime.js е неговата лекота на използване. Библиотеката има прост и интуитивен API, който улеснява разработчиците да започнат работа с библиотеката и да създадат първите си анимации. Дори и да сте нов в уеб анимацията, можете бързо и лесно да създавате плавни и ангажиращи анимации с Anime.js.
Анимационна библиотека като Anime.js несъмнено е една от най-добрите на пазара. От целевата страница на техния уебсайт можете да усетите силата, която предлага с красивите анимации, върху които е изграден.
По-долу са някои примери за анимация, направена с anime.js
- Морфинг: Създава преход между две SVG форми.
<!-- html --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script> <svg id="demo-svg" width="600" height="600"> <polygon stroke="none" fill="gray" points=" 400 150 , 300 250 , 300 400 , 400 500 , 500 400 , 500 250 , 400 150"> </polygon> </svg> <!-- css --> <style> body{ background-image: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114)); } #demo-svg path{ stroke-dasharray: 1000; stroke-dashoffset: 0; </style> // anime.js anime({ targets: '#demo-svg polygon', points: [ { value: '400 150 , 300 250 , 300 400 , 400 500 , 500 400 , 500 250 , 400 150'}, { value: '400 200 , 400 350 , 300 450 , 400 350 , 500 450 , 400 350 , 400 200'} ], easing: 'easeOutQuad', duration: 2500, loop: true });
- Чертеж на линия: Създава анимация за чертане на път с помощта на свойството
'stroke-dashoffset'. Задайте стойността на 'dash-offset' на пътя сanime.setDashoffset()във форматирана стойност от до.
<!-- html --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script> <svg id="demo" width="1385px" height="256px"> <path stroke="blue" stroke-width="3" fill="url(#PSgrad_0)" d="M1348.721,156.648 C1331.497,202.034 1319.740,225.274 1303.335,239.491 C1291.579,249.881 1279.822,253.982 1273.807,255.075 L1267.792,234.843 C1273.807,232.929 1281.736,229.101 1288.845,223.086 C1295.407,217.892 1303.609,208.596 1309.077,196.292 C1310.171,193.832 1310.991,191.918 1310.991,190.551 C1310.991,189.184 1310.444,187.270 1309.350,184.262 L1260.410,62.322 L1286.657,62.322 L1315.639,140.517 C1318.646,149.266 1321.927,159.655 1324.115,167.584 L1324.661,167.584 C1327.122,159.655 1329.856,149.539 1333.137,139.970 L1359.384,62.322 L1384.812,62.322 L1348.721,156.648 ZM1219.680,177.974 L1218.860,177.974 C1211.478,188.363 1197.260,197.659 1178.395,197.659 C1151.601,197.659 1137.931,178.794 1137.931,159.655 C1137.931,127.666 1166.365,110.168 1217.493,110.442 L1217.493,107.708 C1217.493,96.771 1214.485,77.086 1187.418,77.086 C1175.114,77.086 1162.264,80.913 1152.968,86.928 L1147.500,71.071 C1158.436,63.962 1174.294,59.314 1190.972,59.314 C1231.437,59.314 1241.279,86.928 1241.279,113.449 L1241.279,162.936 C1241.279,174.419 1241.826,185.629 1243.467,194.652 L1221.594,194.652 L1219.680,177.974 ZM1218.040,127.120 C1191.792,126.573 1161.991,131.221 1161.991,156.921 C1161.991,172.506 1172.380,179.888 1184.684,179.888 C1201.908,179.888 1212.845,168.951 1216.673,157.741 C1217.493,155.281 1218.040,152.547 1218.040,150.086 L1218.040,127.120 ZM1083.799,0.531 L1107.859,0.531 L1107.859,194.652 L1083.799,194.652 L1083.799,0.531 ZM993.310,197.659 C975.812,197.659 960.501,190.004 952.572,176.880 L952.026,176.880 L952.026,248.787 L928.239,248.787 L928.239,105.520 C928.239,88.569 927.692,74.898 927.145,62.322 L948.745,62.322 L949.838,85.015 L950.385,85.015 C960.228,68.883 975.812,59.314 997.412,59.314 C1029.400,59.314 1053.460,86.382 1053.460,126.573 C1053.460,174.146 1024.479,197.659 993.310,197.659 ZM990.029,78.453 C973.625,78.453 958.314,90.209 953.666,108.254 C952.846,111.262 952.026,114.816 952.026,118.097 L952.026,140.790 C952.026,144.344 952.572,147.625 953.119,150.633 C957.494,167.311 971.984,178.794 989.209,178.794 C1014.636,178.794 1029.400,158.015 1029.400,127.666 C1029.400,101.146 1015.457,78.453 990.029,78.453 ZM804.666,132.861 C805.213,165.397 825.992,178.794 850.052,178.794 C867.277,178.794 877.666,175.787 886.689,171.959 L890.790,189.184 C882.314,193.011 867.824,197.386 846.771,197.386 C806.033,197.386 781.700,170.592 781.700,130.674 C781.700,90.756 805.213,59.314 843.764,59.314 C886.962,59.314 898.446,97.318 898.446,121.651 C898.446,126.573 897.899,130.401 897.625,132.861 L804.666,132.861 ZM841.850,76.539 C817.516,76.539 806.853,98.958 804.940,115.636 L875.206,115.636 C875.479,100.325 868.917,76.539 841.850,76.539 ZM749.720,144.071 C755.735,169.772 760.109,187.543 763.937,194.652 L739.330,194.652 C736.323,189.457 732.222,173.599 727.027,150.633 C721.559,125.206 711.716,115.636 690.117,114.816 L667.697,114.816 L667.697,194.652 L643.910,194.652 L643.910,12.834 C655.940,10.374 673.165,9.007 689.570,9.007 C714.997,9.007 731.401,13.655 742.885,24.044 C752.181,32.246 757.375,44.823 757.375,59.041 C757.375,83.374 742.064,99.505 722.652,106.067 L722.652,106.887 C736.870,111.809 745.345,124.932 749.720,144.071 ZM733.589,61.775 C733.589,37.988 716.364,27.599 691.210,27.325 C679.727,27.325 671.525,28.419 667.697,29.512 L667.697,96.771 L692.030,96.771 C717.457,96.771 733.589,82.827 733.589,61.775 ZM579.942,118.371 C579.942,97.045 572.013,79.273 549.320,79.273 C533.462,79.273 521.159,90.483 517.058,103.880 C515.964,106.887 515.417,110.988 515.417,115.090 L515.417,194.652 L491.357,194.652 L491.357,98.138 C491.357,84.468 491.084,73.258 490.263,62.322 L511.589,62.322 L512.956,84.194 L513.503,84.194 C520.065,71.617 535.376,59.314 557.249,59.314 C575.567,59.314 604.002,70.250 604.002,115.636 L604.002,194.652 L579.942,194.652 L579.942,118.371 ZM367.784,132.861 C368.331,165.397 389.110,178.794 413.170,178.794 C430.395,178.794 440.785,175.787 449.807,171.959 L453.908,189.184 C445.433,193.011 430.942,197.386 409.889,197.386 C369.151,197.386 344.818,170.592 344.818,130.674 C344.818,90.756 368.331,59.314 406.882,59.314 C450.081,59.314 461.564,97.318 461.564,121.651 C461.564,126.573 461.017,130.401 460.744,132.861 L367.784,132.861 ZM404.968,76.539 C380.634,76.539 369.972,98.958 368.058,115.636 L438.324,115.636 C438.597,100.325 432.035,76.539 404.968,76.539 ZM263.898,197.659 C246.400,197.659 231.089,190.004 223.160,176.880 L222.613,176.880 L222.613,248.787 L198.827,248.787 L198.827,105.520 C198.827,88.569 198.280,74.898 197.733,62.322 L219.332,62.322 L220.426,85.015 L220.973,85.015 C230.816,68.883 246.400,59.314 267.999,59.314 C299.988,59.314 324.048,86.382 324.048,126.573 C324.048,174.146 295.067,197.659 263.898,197.659 ZM260.617,78.453 C244.213,78.453 228.902,90.209 224.254,108.254 C223.433,111.262 222.613,114.816 222.613,118.097 L222.613,140.790 C222.613,144.344 223.160,147.625 223.707,150.633 C228.081,167.311 242.572,178.794 259.797,178.794 C285.224,178.794 299.988,158.015 299.988,127.666 C299.988,101.146 286.044,78.453 260.617,78.453 ZM83.186,197.659 C34.519,197.659 0.343,159.929 0.343,104.153 C0.343,45.644 36.706,7.366 85.920,7.366 C136.227,7.366 168.763,45.917 168.763,100.599 C168.763,164.030 130.212,197.659 83.186,197.659 ZM84.826,26.778 C45.455,26.778 25.770,63.142 25.770,103.606 C25.770,142.977 47.096,178.247 84.553,178.247 C122.283,178.247 143.609,143.524 143.609,101.693 C143.609,65.056 124.471,26.778 84.826,26.778 Z" /> </svg> anime({ targets: '#demo path', strokeDashoffset: [anime.setDashoffset, 0], easing: 'easeInOutQuad', duration: 7500, delay: function(el, i) { return i * 250 }, direction: 'alternate', loop: true });
Това са основни примери, но Anime.js предлага много повече опции и функции за създаване на сложни и сложни анимации. Можете да научите повече за използването на Anime.js, като прочетете документацията и уроците на уебсайта Anime.js.
2. Три js
Three.js е уеб-базирана JavaScript библиотека с различни браузъри и интерфейс за програмиране на приложения, който позволява създаването на 3D анимации за компютърна графика в уеб браузър на всяка платформа чрез използване на WebGL и JavaScript библиотека и интерфейс за програмиране на приложения, наречен Three. js.
Рамката Three.js е проектирана да улесни създаването на 3D компютърни анимации, които се показват в браузъра, без необходимост от самостоятелно приложение или плъгин, както в традиционните случаи.
Едно от основните предимства на Three.js е неговата гъвкавост. Библиотеката позволява на разработчиците да създават широка гама от 3D графики и анимации, от прости геометрични фигури до сложни и детайлни модели. Това го прави много подходящ за различни приложения, от игри и интерактивни преживявания до визуализации на данни и добавена реалност.
Друго предимство на Three.js е неговата производителност. Тъй като е изграден върху WebGL, той може да използва GPU на устройствата на потребителите, за да създава високопроизводителни графики и анимации. Това означава, че потребителите могат да се насладят на плавни и отзивчиви графики и анимации, дори на устройства с ограничени ресурси.
По-долу са някои примери за анимация, направена с Three.js
// three.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js"></script>
// create scene
var scene = new THREE.Scene();
// create camera
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// create renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
// add the renderer to the page
document.body.appendChild( renderer.domElement );
// create cube
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x808080} );
var cube = new THREE.Mesh( geometry, material );
// add cube to scene
scene.add( cube );
// move camera back
camera.position.z = 5;
// animate
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();
Това е елементарен пример, но той показва основните стъпки, включени в създаването на 3D сцена с Three.js. Можете да научите повече за използването на Three.js, като прочетете документацията и уроците на уебсайта Three.js.
Като цяло Three.js е мощна и гъвкава библиотека за създаване на 3D графики и анимации в мрежата. Независимо дали сте уеб разработчик, който иска да създаде завладяващи изживявания, или дизайнер, който иска да визуализира данни по нови и ангажиращи начини, Three.js е страхотен инструмент, който трябва да разгледате.
3. Скорост js
С Velocity.js можем да използваме същия API като $.animate() на jQuery като двигател за анимация. Съвместим е както с jQuery, така и без него. Той е изключително бърз и разполага с широк набор от функции, включително цветна анимация, трансформации, цикли, облекчаване, поддръжка на SVG и превъртане. Той съчетава jQuery и CSS преходи и има най-доброто от двата свята.
Освен това Velocity предлага и добра съвместимост, особено с по-стари платформи на браузъри. Освен страхотна документация, Velocity.js има и страхотна общност, готова да ви помогне, ако имате нужда от помощ.
По-долу са някои примери за анимация, направена с velocity.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Dosis:wght@300&display=swap');
body {
background: gray;
}
.loader {
width: 150px;
height: 150px;
display: block;
margin: 100px auto 0;
position: relative;
}
.text {
font-family: 'Dancing Script', cursive;
text-align: center;
font-size: 28px;
color: white;
z-index: 9;
position: relative;
padding: 50px 0 0 0;
}
.shadow {
position: relative;
height: 6px;
border-radius: 50%;
background-color: #1c1818;
margin: 100px 0 0 0;
}
.box {
display: block;
width: 150px;
height: 150px;
background: #153149;
position: absolute;
borderRadius: "50px",
top: 0;
}
// velocity.js
$(document).ready(function() {
function loader() {
var color = "#9fcbe8";
$('.box')
.velocity({
rotateY: "360deg",
borderRadius: "50%",
scale: 0.5,
backgroundColor: color
},
{duration: 1600,
loop: true,
easing: [0.750, 0.000, 0.500, 1.000]
});
$('.text')
.velocity({
rotateY: "360deg",
scale: 0.5,
translateY: "38px"
},
{duration: 1600,
loop: true,
easing: [0.750, 0.000, 0.500, 1.000]
});
$('.shadow')
.velocity({
scale: 0.5,
translateY: "0px"
},
{duration: 1600,
loop: true,
easing: "liner"
});
}
loader();
});
Бих казал, че Velocity.js е един от най-мощните и ефективни инструменти за създаване на гладки и ефективни анимации в мрежата и аз силно го препоръчвам. Въпреки че може да не е най-добрият избор за всяка ситуация, определено си струва да го обмислите, ако търсите библиотека с анимации, която е бърза и съвместима с различни браузъри.
Повторение на сесия с отворен код
OpenReplay е пакет с отворен код за повторение на сесии, който ви позволява да видите какво правят потребителите във вашето уеб приложение, като ви помага да отстраните проблемите по-бързо. OpenReplay се хоства самостоятелно за пълен контрол върху вашите данни.
Започнете да се наслаждавате на изживяването си при отстраняване на грешки — започнете да използвате OpenReplay безплатно.
4. GreenSock js
GSAP е популярна JavaScript библиотека, която улеснява създаването на високоефективни анимации в мрежата. Неговият оптимизиран код и интелигентни техники осигуряват плавни анимации без забавяне във всички основни браузъри, включително мобилни устройства. GSAP също така предлага разнообразие от предварително изградени инструменти и функции, които улесняват разработчиците да създават сложни анимации бързо и лесно, дори ако са нови в уеб анимациите. Като цяло GSAP е многофункционална и мощна платформа за създаване на уеб анимации.
Едно от основните предимства на GSAP е способността му да създава анимации с висока производителност. Неговата оптимизирана кодова база и интелигентни техники гарантират, че вашите анимации вървят гладко и не причиняват забавяне или трептене. Това е особено важно за мобилни устройства, където ресурсите често са ограничени.
Друго предимство на GSAP е неговата простота. Платформата включва широк набор от предварително изградени инструменти и функции, които улесняват разработчиците да създават сложни анимации бързо и лесно. Дори и да сте нов в уеб анимацията, можете да започнете да работите с GSAP за нула време.
<!-- html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<button id="replay-button">Replay</button>
<div id="box" class="box">Animate me!</div>
// gsap.js
var animation = TweenMax.to("#box", 1, {
width: 200,
height: 200,
backgroundColor: "blue",
ease: Power1.easeInOut
});
document.getElementById('replay-button').addEventListener('click', function() {
animation.restart();
});
Това е основен пример, но GSAP предлага много повече опции и функции за създаване на сложни и сложни анимации. Можете да научите повече за използването на GSAP, като прочетете документацията и уроците на уебсайта на GSAP.
Като цяло GSAP е мощен инструмент, който позволява на разработчиците да създават гладки и ефективни анимации в мрежата. Независимо дали сте опитен уеб разработчик или току що започвате, GSAP е страхотна платформа, която да обмислите за следващия си проект за анимация.
По-долу са някои примери за анимация, направена с GSAP.js
5. Mo js
Библиотеката за графики за движение на JavaScript Mo.js е бърза, готова за ретина, модулна и с отворен код. Синтаксисът на тази библиотека и начина на кодиране на анимациите са структурирани са различни от тези на други библиотеки. В резултат на декларативния API, анимацията е напълно адаптивна, което улеснява създаването на нови анимации.
В тази библиотека има вградени компоненти, които да ви помогнат да започнете да анимирате от нулата, като HTML и форма и завихряния, изблици и залитане, но има и инструменти, които да ви помогнат да създадете анимацията си естествено. Mo.js ви позволява да създавате възхитителни анимации с точност, да подобрявате потребителското изживяване и да обогатявате визуално съдържанието на вашия сайт.
По-долу са някои примери за анимация, направена с Mo.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/mo-js/0.288.1/mo.min.js"></script>
// mo.js
var shape2 = new mojs.Shape({
shape : 'polygon',
points: 4,
radius : 60,
left:'50 %',
isShowStart : true,
fill: {'#bf3030':'#a11260'},
delay : 400,
easing: 'sin.out',
scale: {0 : 1} ,
duration : 350,
backwardEasing: 'sin.in',
yoyo: true,
}).play();
var shape4 = new mojs.Shape({
shape : 'polygon',
points: 4,
radius: 150,
fill: 'transparent',
strokeWidth:{11:2},
stroke:'#34495e',
easing : 'sin.out',
strokeDasharray: '100%',
strokeDashoffset: {'100%': '300%'},
delay : 800,
duration:1500,
repeat : 2000000
}).play();
var shape4 = new mojs.Shape({
shape : 'polygon',
points: 4,
radius: 130,
fill: 'transparent',
strokeWidth:{11:2},
stroke:'#34495e',
easing : 'sin.out',
strokeDasharray: '100%',
strokeDashoffset: {'100%': '300%'},
delay : 1050,
left:'50 %',
duration:1500,
repeat : 20000000
}).play();
var shape4 = new mojs.Shape({
shape : 'polygon',
points: 4,
radius: 110,
fill: 'transparent',
strokeWidth:{11:2},
stroke:'#34495e',
easing : 'sin.out',
strokeDasharray: '100%',
strokeDashoffset: {'100%': '300%'},
delay : 950,
duration:1500,
repeat : 2000000
}).play();
var shape4 = new mojs.Shape({
shape : 'polygon',
points: 4,
radius: 90,
fill: 'transparent',
strokeWidth:{11:2},
stroke:'#34495e',
easing : 'sin.out',
strokeDasharray: '100%',
strokeDashoffset: {'-100%': '-300%'},
delay : 850,
duration:1500,
repeat : 2000000
}).play();
var shape4 = new mojs.Shape({
shape : 'polygon',
points: 4,
radius: 70,
fill: 'transparent',
strokeWidth:{11:2},
stroke:'#34495e',
easing : 'sin.out',
strokeDasharray: '100%',
strokeDashoffset: {'-100%': '-300%'},
delay : 750,
duration:1500,
repeat : 200000
}).play();
new MojsPlayer({ add: timeline, isPlaying: true, isRepeat: true });
Като цяло Mo.js е мощен и многофункционален инструмент за създаване на сложни и ангажиращи анимации в мрежата. Независимо дали сте уеб разработчик, който иска да създаде интерактивни изживявания, или дизайнер, който иска да добави малко визуално усещане към вашия уебсайт, Mo.js е страхотна библиотека, която да разгледате.
Резюме
В тази статия разгледахме различни библиотеки за анимация на JavaScript, които можете да използвате, докато създавате уебсайт или уеб приложение. Има много библиотеки, но засега се съсредоточихме върху тези 5. Преди да приключим, нека да разгледаме обобщение на тези библиотеки.
- Anime js: това е JavaScript библиотека за анимация, която позволява правенето на анимации с прост, но мощен API. Това е една от най-добрите библиотеки за анимация на JavaScript.
- Three js: това е мощна библиотека за 3d анимация в JavaScript, която прави пускането на 3d лесно в JavaScript, има няколко характеристики и функции, които помагат да се правят страхотни 3d анимации.
- Velocity js: ако търсите да правите анимации, но не с jquery, имате Velocity js, за да ви помогне тук, а освен това е бърз.
- GreenSock js: това е гладка анимационна библиотека за изграждане на отзивчиви, лесни за достъп анимации.
- Mo js: Това е друга отлична библиотека за анимация на движение в JavaScript, има няколко добри функции и е напълно адаптивна.
Накратко, тези пет библиотеки са едни от най-полезните библиотеки, които можете да намерите в интернет за създаване на анимации.
Първоначално публикувано в blog.openreplay.com на 9 януари 2023 г.
