先上圖:
概念畫板是個好東西,可以直接導出爲svg,並且可以通過 airdrop 直接傳到電腦
實現代碼:
anime({
targets: '.lines path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 200,
delay: function(el, i) { return i * 200 },
loop: true
});
採用素描特性,每個 path 動畫時間 200ms, 下一個元素在當前元素畫完後開始。
- svg動畫庫 https://anime.js.cool
- 在線示例: https://jsfiddle.net/willin/7...
- Gif錄屏用的是: LICEcap (mac os 免費軟件)