V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
islujw
V2EX  ›  CSS

复杂的 polygon 矢量如何做 CSS 动画?

  •  
  •   islujw · 2017-07-25 02:23:57 +08:00 · 3170 次点击
    这是一个创建于 2438 天前的主题,其中的信息可能已经有所发展或是发生改变。

    使用 iPad Pro 上的 Nebo app 写了一些字,导出为 HTML,是 svg 的。

    但是有一些笔画比较复杂,尽管我都尽可能一笔一画拆开了,但 svg 内不全是 <path>,而有一些是 <polygon>,也就是超过三边的多边形矢量。

    我知道 <path> 的矢量,能做单个笔画从无书写到完整的动画,原理是将线条的描边设为虚线式,然后设置每个虚线段的长度超过线条本身长度,再变化虚线段之间的距离值。

    但 <polygon> 的笔画可想而知,因为笔画较为复杂,而变为了非线条的面,每个 <polygon> 内的坐标都有数百个点。

    那么,如何为 <polygon> 制作一笔一画出现的 CSS 动画呢?

    4 条回复    2017-07-25 13:40:16 +08:00
    P233
        1
    P233  
       2017-07-25 07:14:38 +08:00
    把 polygon 转成 path 呢? "points" 改成 "d",属性值的开头和结尾分别添加 "M" 和 "z"
    P233
        2
    P233  
       2017-07-25 07:34:05 +08:00
    @P233 有点问题,用 stroke 变化,原来的 polygon 是个闭环
    islujw
        3
    islujw  
    OP
       2017-07-25 13:05:58 +08:00
    @P233 polygon 是定义多边形,和 path 应该是不一样的。
    P233
        4
    P233  
       2017-07-25 13:40:16 +08:00
    https://stackoverflow.com/questions/32060838/svg-handwriting-animation-without-using-stroke-properties

    这个应该会有帮助吧,没有直接变化笔画本身,而是去变化笔画的遮罩。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1590 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 16:54 · PVG 00:54 · LAX 09:54 · JFK 12:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.