ipad概念画板手写+svg动画效果

先上图:

clipboard.png

概念画板是个好东西,可以直接导出为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, 下一个元素在当前元素画完后开始。

欢迎在各平台 Follow 我。

211 声望
12 粉丝
0 条评论
推荐阅读
Mastodon 长毛象多租户:自定义域名、自定义账号别名
配置自定义域名后缀支持后,也可以通过 user1@domain2.com 搜索到。该配置需要在主节点中设置 ALTERNATE_DOMAINS。

willin阅读 167

🖼️ 如何解决 SVG 图片中字体失效的问题
如果你喜欢我的文章,希望点赞👍 收藏 📁 评论 💬 三连支持一下,谢谢你,这对我真的很重要!「SVG 图片中字体失效」的修复方案很简单,只想看答案翻到最后看结论就行。如果想看我的排查思路和具体原因可以从头开始...

卤代烃6阅读 1.4k

svg之viewBox
基本语法首先,我在大小为400 x 400的画布中绘制了一个200 x 200的矩形:可以发现,没有问题。现在,我把svg的宽和高改变后:可以看见,等比例变小了。简单的理解就是:viewBox规范了画布的大小,svg标签里面的内...

zxl200707013阅读 617

封面图
[React] react + vite + ts项目中优雅使用.svg 文件
在react + vite + ts项目中svg文件的基本使用如1所示1、直接在JSX组件中引入SVG文件,使用img标签,img标签的src代码嵌入到JSX组件中,例如:// XXcomponent.tsx

DiracKeeko阅读 398

unplugin-svg-component 助你优雅的使用 svg 图标
现如今, 项目中的小图标往往会使用 svg 的方式来做, 许多 svg 插件供我们选择, 比如说 vite-plugin-svg-icons, 这个插件的使用的范围是比较广的, 但是就我使用下来而言, 发现几个痛点:

Jevon617阅读 384

封面图

欢迎在各平台 Follow 我。

211 声望
12 粉丝
宣传栏