目錄
一、搭建開發(fā)環(huán)境
?二、基本功能和使用
開始制作動(dòng)畫
動(dòng)畫屬性
三、anime.stagger——交錯(cuò)動(dòng)畫
四、timeline——時(shí)間軸
?五、控制、回調(diào)與助手
一、控制
?二、回調(diào)
三、助手
六、easings——?jiǎng)赢嬤\(yùn)動(dòng)曲線
七、SVG動(dòng)畫
官網(wǎng)定義：
anime.js 是一個(gè)簡便的JS動(dòng)畫庫，用法簡單而且適用范圍廣，涵蓋CSS，DOM，SVG還有JS的對象，各種帶數(shù)值屬性的東西都可以動(dòng)起來。
一、搭建開發(fā)環(huán)境
1、新建一個(gè)文件夾 ，用vs?code打開，將其添加到工作區(qū)。
2、打開終端
在終端輸入：
npm i animejs --save
?3、創(chuàng)建文件夾，使用anime.js包
位置如圖。
4、實(shí)現(xiàn)一個(gè)簡易的動(dòng)畫樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: brown;
}
</style>
</head>
<body>
<div></div>
<script src="node_modules/animejs/lib/anime.min.js"></script>
<script>
anime({
targets:'div',
translateX:'400px',
easing:'linear',
duration:2000
})
</script>
</body>
</html>?就能實(shí)現(xiàn)一個(gè)方塊勻速運(yùn)動(dòng)的效果了。
?二、基本功能和使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div id = 'first'></div>
<div class = 'second'></div>
<div class = 'second'></div>
<div class = 'second'></div>
<script src="../node_modules/animejs/lib//anime.min.js"></script>
<script>
anime({
targets:'#first',
translateX:'400px'
})
</script>
</body>
</html>?第一個(gè)div動(dòng)：
?如果把代碼改成這樣：
<script>
anime({
targets:'.second',
translateX:'400px'
})
</script>
?可以看到，targets用來作為選擇器來選擇移動(dòng)元素。?
開始制作動(dòng)畫
anime({
targets: 'div',
translateX: [
{ value: 100, duration: 1200 },
{ value: 0, duration: 800 }
],
rotate: '1turn',
backgroundColor: '#FFF',
duration: 2000,
loop: true
});targets屬性定義了制作動(dòng)畫的元素或js對象：
- css選擇器 如：'div','#el path';
- DOM元素 如： document.querySelector('.item')
- 節(jié)點(diǎn)列表 如： document.querySelectorAll('.item')
- 對象
- 數(shù)組 如：['div', '.item', domNode]
動(dòng)畫屬性
1、CSS：
- opacity 透明度 0~1
- backgroundColor
- fontSize
- borderRadius
- backgroundColor
2、transforms變換：
- translateX x軸的值
- translateY y軸的值
- retate 旋轉(zhuǎn)
- scale 大小變換 例：scale:2? ?scale:0.5? ?
- rotate 旋轉(zhuǎn) 例：rotate:'1turn'（旋轉(zhuǎn)一周）
3、對象屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="JSobjectProp">
<span>{"myProperty":"0"}</span>
</div>
<script src="../node_modules/animejs/lib//anime.min.js"></script>
<script>
var myObject = {
prop1: 0,
prop2: '0%'
}
var JSobjectProp = anime({
targets: myObject,
prop1: 50,
prop2: '100%',
easing: 'linear',
round: 1,
update: function () {
var el = document.querySelector('#JSobjectProp span');
el.innerHTML = JSON.stringify(myObject);
}
});
</script>
</body>
</html>開始：?
?
?變?yōu)椋?/p>
4、DOM屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<input class="text-output" value="0">
<script src="../node_modules/animejs/lib//anime.min.js"></script>
<script>
var domAttributes = anime({
targets: 'input',
value: 1000, // value變化為1000
round: 100, //表示小數(shù)，把1分成了100份，也就是展示兩位小數(shù)點(diǎn)
easing: 'easeInOutExpo'
});
</script>
</body>
</html>
?5、給每個(gè)屬性單獨(dú)設(shè)置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div></div>
<script src="../node_modules/animejs/lib//anime.min.js"></script>
<script>
anime({
targets: 'div',
translateX: {
value: 250,//通過value來設(shè)置值
duration: 800 //表示延長動(dòng)畫效果的時(shí)間
},
rotate: {
value: 360,
duration: 1800,
easing: 'easeInOutSine'
},
scale: {
value: 2,
duration: 1600,
delay: 800,
easing: 'easeInOutQuart'
},
delay: 250 // All properties except 'scale' inherit 250ms delay
});
</script>
</body>
</html>?6、屬性參數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div></div>
<script src="../node_modules/animejs/lib//anime.min.js"></script>
<script>
anime({
targets: 'div',
translateX: 270,
direction: 'alternate',
loop: true,
// 接收三個(gè)參數(shù)：
// el：表示當(dāng)前目標(biāo)元素
// i: 表示當(dāng)前目標(biāo)元素下標(biāo)
// l：表示目標(biāo)元素的總長度
delay: function (el, i, l) {
return i * 100;
},
endDelay: function (el, i, l) {
return (l - i) * 100;
}
});
</script>
</body>
</html>三、anime.stagger——交錯(cuò)動(dòng)畫
1、
anime.stagger(value, options)
//它針對多個(gè)元素。
//第一個(gè)參數(shù)接收：Number, String, Array
//第二個(gè)參數(shù)接收：Objectanime({
targets: '.basic-staggering-demo .el',
translateX: 270,
delay: anime.stagger(100) // increase delay by 100ms for each elements.
});
效果：?
?
2、?
anime.stagger(value, {start: startValue}) //在value后面添加對象屬性?
anime({
targets: '.staggering-start-value-demo .el',
translateX: 270,
delay: anime.stagger(100, {start: 500}) // delay starts at 500ms then increase by 100ms for each elements.
});3、
anime.stagger([startValue, endValue]) //作為rotate旋轉(zhuǎn)的屬性值anime({
targets: '.range-value-staggering-demo .el',
translateX: 270,
rotate: anime.stagger([-360, 360]), // rotation will be distributed from -360deg to 360deg evenly between all elements
easing: 'easeInOutQuad'
});
?4、
anime.stagger(value, {from: startingPosition}) //從哪個(gè)位置依次延遲anime({
targets: '.staggering-from-demo .el',
translateX: 270,
delay: anime.stagger(100, {from: 'center'})
});5、
anime.stagger(value, {direction: 'reverse'}) //反向延遲anime({
targets: '.staggering-direction-demo .el',
translateX: 270,
delay: anime.stagger(100, {direction: 'reverse'})
});6、
anime.stagger(value, {grid: [rows, columns]})anime({
targets: '.staggering-grid-demo .el',
scale: [
{value: .1, easing: 'easeOutSine', duration: 500},
{value: 1, easing: 'easeInOutQuad', duration: 1200}
],
//grid: [14, 5]表示14行5列
//from 表示從哪里開始
delay: anime.stagger(200, {grid: [14, 5], from: 'center'})
});
7、
anime.stagger(value, {grid: [rows, columns], axis: 'x'})
//axis設(shè)置為x，表示將一整行設(shè)置為整體
//設(shè)為y，會將一整列設(shè)置為整體anime({
targets: '.staggering-axis-grid-demo .el',
translateX: anime.stagger(10, {grid: [14, 5], axis: 'x'})
})
?
四、timeline——時(shí)間軸
接下來學(xué)習(xí)官網(wǎng)的時(shí)間軸模塊。
?這個(gè)模塊告訴我們可以創(chuàng)建一個(gè)時(shí)間軸，在這個(gè)時(shí)間軸上可以創(chuàng)建多個(gè)動(dòng)畫，并且添加在時(shí)間軸上的每一個(gè)動(dòng)畫都會在上一個(gè)動(dòng)畫結(jié)束之后開始執(zhí)行。
1、創(chuàng)建時(shí)間軸
創(chuàng)建一個(gè)時(shí)間軸：
//調(diào)用該方法：
var myTimeline = anime.timeline(parameters);如何通過這個(gè)時(shí)間軸調(diào)用對象：
myTimeline.add(parameters, offset);
//parameters 動(dòng)畫相關(guān)的參數(shù)
//offset 時(shí)間偏移量實(shí)例：?
// 創(chuàng)建了一個(gè)時(shí)間軸對象
var tl = anime.timeline({
easing: 'easeOutExpo',
duration: 750 // 持續(xù)時(shí)間是750ms
});
// 時(shí)間軸上分別創(chuàng)建了三個(gè)動(dòng)畫
tl
.add({
targets: '.basic-timeline-demo .el.square', //方形
translateX: 250, // 平移250px
})
.add({
targets: '.basic-timeline-demo .el.circle', //圓形
translateX: 250,
})
.add({
targets: '.basic-timeline-demo .el.triangle', //三角形
translateX: 250,
});
?會等到上一個(gè)方塊執(zhí)行完，才會執(zhí)行圓。
2、時(shí)間偏移量
?時(shí)間偏移量是我們創(chuàng)建時(shí)間軸的第二個(gè)參數(shù)。
默認(rèn)情況下，每一個(gè)動(dòng)畫都會在上一個(gè)動(dòng)畫結(jié)束之后開始執(zhí)行，通過時(shí)間偏移量就可以改變每個(gè)動(dòng)畫開始執(zhí)行的時(shí)間。
如下圖可以看到，時(shí)間偏移量可以有兩種數(shù)據(jù)類型：String字符串、Number數(shù)字
?字符串是相對于上一個(gè)動(dòng)畫的設(shè)置的，比如：
'+=200'表示：是上一個(gè)動(dòng)畫執(zhí)行結(jié)束完200ms后再執(zhí)行當(dāng)前的動(dòng)畫
'-=200'表示：是上一個(gè)動(dòng)畫執(zhí)行結(jié)束前200ms后執(zhí)行當(dāng)前的動(dòng)畫
數(shù)字偏移量是相對于整個(gè)時(shí)間軸的絕對偏移量。
200表示：當(dāng)前時(shí)間軸開始200ms后執(zhí)行。
// Create a timeline with default parameters
var tl = anime.timeline({
easing: 'easeOutExpo',
duration: 750
});
tl
.add({
targets: '.offsets-demo .el.square',
translateX: 250,
})
.add({
targets: '.offsets-demo .el.circle',
translateX: 250,
}, '-=600') // 相對偏移量————字符創(chuàng)
.add({
targets: '.offsets-demo .el.triangle',
translateX: 250,
}, 400); // 絕對偏移量————數(shù)字3、參數(shù)繼承
| 添加在時(shí)間軸中的動(dòng)畫，都可以繼承表格里的這些屬性 |
targets |
easing |
duration |
delay |
endDelay |
round |
注意：
direction 和 loop 是不可以被繼承的。演示：（繼承targets屬性）?
?
?五、控制、回調(diào)與助手
一、控制
頁面中需要的元素：
?1、動(dòng)畫上的屬性
animation.play(); //開始animation.pause(); //暫停animation.restart(); //重新開始animation.reverse(); //反向移動(dòng)// seek 當(dāng)前元素顯示在具體時(shí)間的某一幀
// timeStamp:跳到具體的時(shí)間
animation.seek(timeStamp); // 通過滾動(dòng)條來控制動(dòng)畫
// scrollPercent / 100：求滾動(dòng)條的百分比
// animation.duration：當(dāng)前動(dòng)畫的時(shí)間
// (scrollPercent / 100) * animation.duration：具體跳到的時(shí)間值
animation.seek((scrollPercent / 100) * animation.duration);
?
?2、時(shí)間軸上的屬性
//?控制時(shí)間軸上的動(dòng)畫：
timeline.play();
timeline.pause();
timeline.restart();
timeline.seek(timeStamp);
?二、回調(diào)
?1、UPDATE：每更新一幀就會調(diào)用一次
var updates = 0;
anime({
targets: '.update-demo .el',
translateX: 270,
delay: 1000,
direction: 'alternate',
loop: 3,
easing: 'easeInOutCirc',
// anim當(dāng)前動(dòng)畫的實(shí)例
update: function(anim) {
updates++;
// anim.progress 當(dāng)前動(dòng)畫的進(jìn)度
progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
updateLogEl.value = 'updates : '+updates;
}
});示例：?
?表示更新了58幀。
2、BEGIN & COMPLETE
BEGIN：動(dòng)畫開始執(zhí)行前觸發(fā)一次
COMPLETE：動(dòng)畫結(jié)束時(shí)觸發(fā)一次
? ? ? ? 這兩個(gè)屬性是布爾類型
示例：
注意箭頭處的寫法是不一樣的?。。?/p>
?效果：
?3、LOOPBEGIN & LOOPCOMPLETE
LOOPBEGIN：循環(huán)開始時(shí)就會觸發(fā)一次
LOOPCOMPLETE：循環(huán)結(jié)束時(shí)就會觸發(fā)一次
注意：動(dòng)畫一定是循環(huán)的動(dòng)畫
var loopBegan = 0;
var loopCompleted = 0;
anime({
targets: '.loopBegin-loopComplete-demo .el',
translateX: 240,
loop: true,
direction: 'alternate',
easing: 'easeInOutCirc',
loopBegin: function(anim) {
loopBegan++;
beginLogEl.value = 'loop began : ' + loopBegan;
},
loopComplete: function(anim) {
loopCompleted++;
completeLogEl.value = 'loop completed : ' + loopCompleted;
}
});4、CHANGE：動(dòng)畫元素每更新一次就調(diào)用一次
與update的區(qū)別：change在delay和endDelay期間是不更新的，update反之。
var changes = 0;
anime({
targets: '.change-demo .el',
translateX: 270,
delay: 1000,
endDelay: 1000,
direction: 'alternate',
loop: true,
easing: 'easeInOutCirc',
update: function(anim) {
progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
},
change: function() {
changes++;
changeLogEl.value = 'changes : ' + changes;
}
});?5、FINISHED PROMISE：每一個(gè)動(dòng)畫實(shí)例完成都會返回一個(gè)promise
// animation表示創(chuàng)建的動(dòng)畫實(shí)例
animation.finished.then(function() {
// Do things...
});var progressLogEl = document.querySelector('.promise-demo .progress-log');
var promiseEl = document.querySelector('.promise-demo .el');
var finishedLogEl = document.querySelector('.promise-demo .finished-log');
var demoPromiseResetTimeout;
function logFinished() {
anime.set(finishedLogEl, {value: 'Promise resolved'});
anime.set(promiseEl, {backgroundColor: '#18FF92'});
}
var animation = anime.timeline({
targets: promiseEl,
delay: 400,
duration: 500,
endDelay: 400,
easing: 'easeInOutSine',
update: function(anim) {
progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
}
}).add({
translateX: 250
}).add({
scale: 2
}).add({
translateX: 0
});
animation.finished.then(logFinished);三、助手
1、anime.remove
// remove 將某個(gè)targets對象移出
anime.remove(targets);
animation.remove(targets);var animation = anime({
targets: '.remove-demo .el',
translateX: 270,
direction: 'alternate',
loop: true,
easing: 'easeInOutQuad'
});
document.querySelector('.remove-el-button').addEventListener('click', function() {
animation.remove('.remove-demo .line:nth-child(2) .el');
});2、anime.get
// get 獲取元素的信息
// target 獲取的元素
// propertyName 獲取的元素的屬性
// unit 單位
anime.get(target, propertyName, unit);var logEl = document.querySelector('.get-value-demo-log');
var el = document.querySelector('.get-value-demo .el');
logEl.innerHTML = '';
logEl.innerHTML += '".el" width is :<br>';
logEl.innerHTML += '"' + anime.get(el, 'width', 'px') + '"';
logEl.innerHTML += ' or "' + anime.get(el, 'width', 'rem') + 'rem"'3、anime.set
// set 設(shè)置元素的屬性值是什么
// {property: value} ：是一個(gè)對象，{屬性：值}
// target(s) 類型是'string', var
// value 類型是object
anime.set(targets, {property: value});anime.set('.set-value-demo .el', {
translateX: function() { return anime.random(50, 250); },
rotate: function() { return anime.random(0, 360); },
});4、anime.random
// random 返回一個(gè)隨機(jī)數(shù)
anime.random(minValue, maxValue);function randomValues() {
anime({
targets: '.random-demo .el',
translateX: function() {
return anime.random(0, 270);
},
easing: 'easeInOutQuad',
duration: 750,
complete: randomValues
});
}
randomValues();5、anime.running
//running 表示動(dòng)畫實(shí)例，其長度代表動(dòng)畫個(gè)數(shù)
anime.runningvar runninLogEl = document.querySelector('.running-log');
anime({
targets: '.running-demo .square.el',
translateX: 270,
direction: 'alternate',
loop: true,
easing: 'linear'
});
anime({
targets: '.running-demo .circle.el',
translateX: 270,
direction: 'alternate',
loop: true,
easing: 'easeInOutCirc'
});
anime({
targets: '.running-demo .triangle.el',
translateX: 270,
direction: 'alternate',
easing: 'easeInOutQuad',
loop: true,
update: function() {
runninLogEl.innerHTML = 'there are currently ' + anime.running.length + ' instances running';
}
});六、easings——?jiǎng)赢嬤\(yùn)動(dòng)曲線
1、使用
// linear表示線性
easing: 'linear'2、方法
查看這些方法是如何的變化
| IN | OUT | IN-OUT | OUT-IN |
'easeInQuad' |
'easeOutQuad' |
'easeInOutQuad' |
'easeOutInQuad' |
'easeInCubic' |
'easeOutCubic' |
'easeInOutCubic' |
'easeOutInCubic' |
'easeInQuart' |
'easeOutQuart' |
'easeInOutQuart' |
'easeOutInQuart' |
'easeInQuint' |
'easeOutQuint' |
'easeInOutQuint' |
'easeOutInQuint' |
'easeInSine' |
'easeOutSine' |
'easeInOutSine' |
'easeOutInSine' |
'easeInExpo' |
'easeOutExpo' |
'easeInOutExpo' |
'easeOutInExpo' |
'easeInCirc' |
'easeOutCirc' |
'easeInOutCirc' |
'easeOutInCirc' |
'easeInBack' |
'easeOutBack' |
'easeInOutBack' |
'easeOutInBack' |
'easeInBounce' |
'easeOutBounce' |
'easeInOutBounce' |
'easeOutInBounce' |
舉例：
?3、BéZIER曲線和spring彈簧
二者都是參數(shù)改變變化的曲線
// 方法接收4個(gè)參數(shù)，通過參數(shù)來改變運(yùn)動(dòng)曲線
easing: 'cubicBezier(.5, .05, .1, .3)'// mass 質(zhì)量
// stiffness 高度
// damping 阻尼
// velocity 速度
easing: 'spring(mass, stiffness, damping, velocity)'| 屬性 | 默認(rèn)值 | MIN | MAX |
| Mass | 1 |
0 |
100 |
| Stiffness | 100 |
0 |
100 |
| Damping | 10 |
0 |
100 |
| Velocity | 0 |
0 |
100 |
4、ELASTIC
// amplitude 振幅
// period 來回的次數(shù)
// 也是表示彈簧，只不過彈的方向不一樣
easing: 'easeOutElastic(amplitude, period)'| IN | OUT | IN-OUT | OUT-IN |
'easeInElastic' |
'easeOutElastic' |
'easeInOutElastic' |
'easeOutInElastic' |
| 屬性 | 默認(rèn)值 | MIN | MAX | |
| Amplitude | 1 |
1 |
10 |
|
| Period | .5 |
0.1 |
2 |
5、跳動(dòng)
// numberOfSteps跳動(dòng)的步數(shù)
easing: 'steps(numberOfSteps)'| 屬性 | 默認(rèn)值 | MIN | MAX |
| Number of steps | 10 |
1 |
∞ |
6、自定義函數(shù)
easing: function() { return function(time) { return time * i} }注意返回的一定是個(gè)函數(shù)
anime({
targets: '.custom-easing-demo .el',
translateX: 270,
direction: 'alternate',
loop: true,
duration: 2000,
easing: function(el, i, total) {
return function(t) {
return Math.pow(Math.sin(t * (i + 1)), total);
}
}
});七、SVG動(dòng)畫
1、運(yùn)動(dòng)
// svg path 表示svg的路徑
var myPath = anime.path('svg path');
// myPath 接收三個(gè)參數(shù)
// myPath('x'),傳入的是svg path中 x 的值
// myPath('y'),傳入的是svg path中 y 的值
// myPath('angle'),傳入的是svg path中 角度 的值var path = anime.path('.motion-path-demo path');
anime({
targets: '.motion-path-demo .el',
translateX: path('x'),
translateY: path('y'),
rotate: path('angle'),
easing: 'linear',
duration: 2000,
loop: true
});示例：
?效果：
?2、變形
給大家分享一個(gè)svg的繪制編輯器網(wǎng)頁：
svg編輯器
?效果：就可以在頁面看到動(dòng)態(tài)的五邊形
?3、劃線
首先要有一個(gè)畫好的svg的線，然后通過：
strokeDashoffset: [anime.setDashoffset, 0]?來實(shí)現(xiàn)劃線。
?效果：
筆記參考：https://www.jianshu.com/p/39fc8a837b31?文章來源：http://www.zghlxwxcb.cn/news/detail-790172.html
官方文檔：https://animejs.com/documentation/#functionBasedParameters文章來源地址http://www.zghlxwxcb.cn/news/detail-790172.html
到了這里，關(guān)于【Anime.js】——JavaScript動(dòng)畫庫：Anime.js——學(xué)習(xí)筆記的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
