微信图文SVG交互 圣诞雪花效果

微信图文SVG交互 圣诞雪花效果

加拿大航空AirCanada 圣诞惊喜 |机票大奖，感恩有你

原理

交互放在 svg 图里, 给 svg 图加 png 背景图片, 保持 png 尺寸与 svg 图 viewBox 尺寸一致.

画雪花

微信图文里元素不能用 id, 在 defs 里定义的雪花与渐变无效, 只能用 circle 一个套一个套实现渐变的效果, 用不同大小与数量的 circle 实现雪花大小.

<g transform="translate(30 -10)">
    <animateTransform attributeName="transform" type="translate" from="30 -10" to="30 6000" begin="+0s" dur="30s" repeatCount="indefinite"/>
    <circle cx="0" cy="0" r="6" fill="rgba(255,255,255,.7)"/>
    <circle cx="0" cy="0" r="7" fill="rgba(255,255,255,.6)"/>
    <circle cx="0" cy="0" r="8" fill="rgba(255,255,255,.5)"/>
    <circle cx="0" cy="0" r="9" fill="rgba(255,255,255,.4)"/>
    <circle cx="0" cy="0" r="10" fill="rgba(255,255,255,.3)"/>
    <circle cx="0" cy="0" r="11" fill="rgba(255,255,255,.2)"/>
    <circle cx="0" cy="0" r="12" fill="rgba(255,255,255,.1)"/>
  </g>

雪花掉落动画

<animateTransform attributeName="transform" type="translate" from="30 -10" to="30 6000" begin="+0s" dur="30s" repeatCount="indefinite"/>

• 所有雪花从画板(svg 图)顶外部位置向下用 from to 向下缓慢移动到画面下外部.
• 其中用 repeatCount="indefinite" 使循环播放.
• 用 dur 与 begin 控制雪花掉落开始时间与时长.
• 然后就是复制, 粘贴, 调整雪花 x 轴位置与掉落开始时间与时长, 还有大小.

为防止后期老修改背景图长度, 让动画 to 的 y 轴离图底远远地, 如此图高 5200, 雪花掉到 6000. 5200 是之前从 5000 修改来的. 万一他们加元素导致 底图到了 5800 高, 那 6000 的结束位置还是可以不修改的. 万一高于 6000 了, 唉, 那只能选择 6000" begin=" 全局替换了. 所以一定要写整齐, 不然不好全局正则替换.