ipad概念画板手写+svg动画效果
先上图:
概念画板是个好东西,可以直接导出为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 免费软件)
推荐阅读
remote-cloudflare-kv 在 Vercel 上使用 Cloudflare KV
最近我在做 Next.js 项目部署 Cloudflare Pages 时发现本地开发调试、登录鉴权等好多问题,所以又想要切回到 Vercel 中,便有了这么一个项目,可以在 Cloudflare 以外的环境上得到类似于 Worker Runtime 的 KV 使...
willin阅读 299
🖼️ 如何解决 SVG 图片中字体失效的问题
如果你喜欢我的文章,希望点赞👍 收藏 📁 评论 💬 三连支持一下,谢谢你,这对我真的很重要!「SVG 图片中字体失效」的修复方案很简单,只想看答案翻到最后看结论就行。如果想看我的排查思路和具体原因可以从头开始...
卤代烃赞 6阅读 1.5k
svg之viewBox
基本语法首先,我在大小为400 x 400的画布中绘制了一个200 x 200的矩形:可以发现,没有问题。现在,我把svg的宽和高改变后:可以看见,等比例变小了。简单的理解就是:viewBox规范了画布的大小,svg标签里面的内...
zxl20070701赞 3阅读 637
[React] react + vite + ts项目中优雅使用.svg 文件
在react + vite + ts项目中svg文件的基本使用如1所示1、直接在JSX组件中引入SVG文件,使用img标签,img标签的src代码嵌入到JSX组件中,例如:// XXcomponent.tsx
DiracKeeko阅读 477
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。