├── index.html ├── main.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | AnimeApp 10 | 11 | 12 |
13 |
14 | 15 | 16 |
17 |
18 |
19 |
20 |
21 |
22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | // anime({ 2 | // targets: 'div.box.red', 3 | // translateY: [ 4 | // { value: 200, duration: 500 }, 5 | // { value: 0, duration: 800 } 6 | // ], 7 | // rotate:{ 8 | // value: '1turn', 9 | // easing: 'easeInOutSine' 10 | // } 11 | // }); 12 | 13 | // anime({ 14 | // targets: 'div.box.blue', 15 | // translateY: [ 16 | // { value: 200, duration: 500, delay: 1000}, 17 | // { value: 0, duration: 800 } 18 | // ], 19 | // rotate:{ 20 | // value: '1turn', 21 | // easing: 'easeInOutSine', 22 | // delay: 1000 23 | // } 24 | // }); 25 | 26 | // anime({ 27 | // targets: 'div.box.green', 28 | // translateY: [ 29 | // { value: 200, duration: 500, delay: 2000}, 30 | // { value: 0, duration: 800 } 31 | // ], 32 | // rotate:{ 33 | // value: '1turn', 34 | // easing: 'easeInOutSine', 35 | // delay: 2000 36 | // } 37 | // }); 38 | 39 | // anime({ 40 | // targets: 'div.box.yellow', 41 | // translateY: [ 42 | // { value: 200, duration: 500, delay: 3000}, 43 | // { value: 0, duration: 800 } 44 | // ], 45 | // rotate:{ 46 | // value: '1turn', 47 | // easing: 'easeInOutSine', 48 | // delay: 3000 49 | // } 50 | // }); 51 | 52 | var playPause = anime({ 53 | targets: 'div.box', 54 | translateY: [ 55 | { value: 200, duration: 500 }, 56 | { value: 0, duration: 800 } 57 | ], 58 | rotate:{ 59 | value: '1turn', 60 | easing: 'easeInOutSine' 61 | }, 62 | delay: function(el, i, l){ return i * 1000}, 63 | autoplay:false, 64 | loop:true 65 | }); 66 | 67 | document.querySelector('#boxes .play').onclick = playPause.play; 68 | document.querySelector('#boxes .pause').onclick = playPause.pause; -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | #boxes{ 2 | width:80%; 3 | margin:auto; 4 | text-align: center; 5 | } 6 | 7 | #btns{ 8 | padding:20px; 9 | background:#f4f4f4; 10 | margin-bottom:20px; 11 | } 12 | 13 | #btns button{ 14 | background:#fff; 15 | padding:5px 10px; 16 | border:0; 17 | } 18 | 19 | #btns .fa{ 20 | font-size:30px; 21 | } 22 | 23 | #btns .fa-play-circle{ 24 | color:green; 25 | } 26 | 27 | #btns .fa-pause-circle{ 28 | color:red; 29 | } 30 | 31 | .box{ 32 | position: relative; 33 | width:100px; 34 | height: 100px; 35 | margin:4px; 36 | display:inline-block; 37 | } 38 | 39 | .red{background-color:red} 40 | .blue{background-color:blue} 41 | .green{background-color:green} 42 | .yellow{background-color:yellow} --------------------------------------------------------------------------------