微信圖文SVG交互 圣誕雪花效果

加拿大航空AirCanada 圣誕驚喜 |機票大獎，感恩有你

原理

交互放在 svg 圖里, 給 svg 圖加 png 背景圖片, 保持 png 尺寸與 svg 圖 viewBox 尺寸一致.

畫雪花

微信圖文里元素不能用 id, 在 defs 里定義的雪花與漸變無效, 只能用 circle 一個套一個套實現(xiàn)漸變的效果, 用不同大小與數(shù)量的 circle 實現(xiàn)雪花大小.

<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" 使循環(huán)播放.
• 用 dur 與 begin 控制雪花掉落開始時間與時長.
• 然后就是復制, 粘貼, 調(diào)整雪花 x 軸位置與掉落開始時間與時長, 還有大小.

為防止后期老修改背景圖長度, 讓動畫 to 的 y 軸離圖底遠遠地, 如此圖高 5200, 雪花掉到 6000. 5200 是之前從 5000 修改來的. 萬一他們加元素導致 底圖到了 5800 高, 那 6000 的結束位置還是可以不修改的. 萬一高于 6000 了, 唉, 那只能選擇 6000" begin=" 全局替換了. 所以一定要寫整齊, 不然不好全局正則替換.