微信图文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 图)顶外部位置向下用
fromto向下缓慢移动到画面下外部. - 其中用
repeatCount="indefinite"使循环播放. - 用
dur与begin控制雪花掉落开始时间与时长. - 然后就是复制, 粘贴, 调整雪花 x 轴位置与掉落开始时间与时长, 还有大小.
为防止后期老修改背景图长度, 让动画
to的 y 轴离图底远远地, 如此图高 5200, 雪花掉到 6000. 5200 是之前从 5000 修改来的. 万一他们加元素导致 底图到了 5800 高, 那 6000 的结束位置还是可以不修改的. 万一高于 6000 了, 唉, 那只能选择6000" begin="全局替换了. 所以一定要写整齐, 不然不好全局正则替换.
