杰晶网络

公众号SVG动画交互实战代码
网络编程 2024/12/29 佚名
3 2

越来越多的公众号在图文消息中加入了SVG动画交互效果，SVG支持事件触发动画，相对于单独做一个H5而言，由于公众号消息依托于微信服务器，为广告主节约了服务器流量成本。这次我们以苹果公众号的一篇交互消息为例，剖析下里面的效果是怎样实现的。

公众号SVG动画交互实战代码

苹果公众号SVG交互

动画主要分为两屏，第一屏出现闪动文字提示用户点击交互，用户点击后第一屏动画消失接着播放第二屏的gif动画，最后画面停止在产品图片帧上。

1.首先构建第一屏动画：

1.1 SVG的基本结构

<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg"></svg>

先来介绍viewBox属性

viewBox=”x, y, w, h”

x、y 控制SVG内所有元素的相对位置。w，h用来控制svg宽高，这里的宽高并不是svg元素的dom尺寸，而是svg的内分辨率，受svg的width，height和preserveAspectRatio等属性值影响。

preserveAspectRatio=”xMinYMin meet”

preserveAspectRatio属性用来设置viewBox的缩放和对齐方式，xMinYMin meet的意思是，根据视口的宽高进行等比例缩放，这里的视口就是指width和height值组成的矩形区域。

1.2 加入闪动文字

<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
 <text x="340" y="1750" fill="#fff" 点一下屏幕，有请主角<</text>
</svg>

设置文字的位置和颜色属性。

1.3 为文字添加动画，这里需要用到 <g>和<animate>标签

<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
 <g>
   <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
   <text x="340" y="1750" fill="#fff" 点一下屏幕，有请主角<</text>
 </g>
</svg>
  • animate标签用来对元素的某个属性进行动画。
  • attributeName指定属性名，这里是透明度opacity。
  • begin指定动画开始的时间，可以是一组用分号分隔的值。
  • dur指定动画的时长，值越小动画越快，反之亦然。
  • values指定attributeName属性的变化值，可以是单值也可以是分号分隔的列表。这里的1;0;1指定是透明度在0->1->0之间变换，产生闪烁的效果。
  • g标签即group的缩写，用来对元素进行组合， 这样animate效果就限制在组内。

1.4 加入首屏和动画图片

<svg version="1.1" viewBox="0 0 1080 620" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
 <g>
  <g>
   <foreignObject x="0" y="0" width="1080" height="1950">
    <svg ></svg>
   </foreignObject>
   <foreignObject x="0" y="0" width="1080" height="1950" transform="translate(1080, 0)">
    <svg xmlns="http://www.w3.org/2000/svg" >
    </svg>
   </foreignObject>
   <g>
    <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
    <text x="340" y="1750" fill="#fff" 点一下屏幕，有请主角<</text>
   </g>
  </g>
 </g>
</svg>
  • 这里我们加入了两组foreignObject对象用来显示封面和gif动画图片。
  • foreignObject可以理解成一个svg容器，支持x, y, width, height, transform位移等属性，这里我们将包含gif动画图片的foreignObject位移属性设置为 transform=”translate(1080, 0)，使gif动画沿x轴向右移动自身宽度距离，使动画开始隐藏起来，等待事件触发显示。
  • 我们将元素放在不同的分组里，方便后面添加事件。

1.5 加入事件触发

<svg version="1.1" viewBox="0 0 1080 620" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
 <animate attributeName="height" begin="click+3.5s" restart="never" dur="0.01s" from="620" to="0" fill="freeze"></animate>
 <animate attributeName="opacity" begin="click+3.5s" restart="never" dur="0.02s" from="1" to="0" fill="freeze"></animate>
 <g>
  <animateTransform attributeName="transform" type="translate" fill="freeze" calcMode="discrete" restart="never" keyTimes="0;0.000001;1" values="0 0;-1080 0;-1080 0" dur="1200s" begin="click"></animateTransform>
  <g>
   <foreignObject x="0" y="0" width="1080" height="1950">
    <svg ></svg>
   </foreignObject>
   <foreignObject x="0" y="0" width="1080" height="1950" transform="translate(1080, 0)">
    <svg xmlns="http://www.w3.org/2000/svg" >
    </svg>
   </foreignObject>
   <g>
    <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
    <text x="340" y="1750" fill="#fff" 点一下屏幕，有请主角<</text>
   </g>
  </g>
 </g>
</svg>
  • animateTransform用来对元素进行位移，旋转，斜切等操作。
  • transform，可以是 translate、scale、rotate、skewX、skewY 。
  • fill，指定动画间隙的填充方式。支持参数有：freeze、remove。remove是默认值，表示动画结束直接回到开始的地方。freeze表示动画维持结束后的状态。
  • restart， 支持的参数有always、whenNotActive、never。always是默认值，表示每点一次重新执行动画；whenNotActive表示动画正在进行的时候不能重启动画；never表示动画仅执行一次。
  • begin， 延迟时间已经介绍过，这里补充下click，表示点击后立即触发， click+2表示点击后2秒触发。
<animateTransform attributeName="transform" type="translate" fill="freeze" calcMode="discrete" restart="never" keyTimes="0;0.000001;1" values="0 0;-1080 0;-1080 0" dur="1200s" begin="click"></animateTransform>

这段代码的意思是，鼠标点击后，我们将gif动画所在组向左移动1080距离，使原来隐藏的动画暴露出来，还记得我们开始是怎么隐藏gif动画的么。

<animate attributeName="height" begin="click+3.5s" restart="never" dur="0.01s" from="620" to="0" fill="freeze"></animate>
 <animate attributeName="opacity" begin="click+3.5s" restart="never" dur="0.02s" from="1" to="0" fill="freeze"></animate>

这里添加了两组animate动画，我希望在动画播放结束后隐藏当前的svg层，这里设置在点击事件3.5秒后触发，正好是动画播放的时间。

2.构建第二屏动画：

第二屏动画是一张静态图片，用来显示gif动画最后一帧的产品图，没有什么新知识点，如有疑问可以参考本文的源码。

最后介绍一下两屏动画的组织方式，我将每屏动画放在一个单独的div标签中，并设置div标签的高度为0，由于svg元素的高度不受父容器高度影响，结果会产生类似层叠定位效果，就像设置父容器定位position:absolute一样。

<div >
 <svg></svg>
</div>
<div >
 <svg></svg>
</div>

公众号SVG动画交互实战代码

这样我们就可以将多组动画放在各自的div中，当使用animate动画隐藏了该组svg元素后，下面一层的svg就会展示出来等待交互。

3. 插入到公众号文章中

我们现在用到的图片都在本地，首先需要将用到的图片上传到公众号素材库中，提取url地址并替换掉本地图片地址。

公众号SVG动画交互实战代码

因为公众号图文编辑器本身并不支持代码编辑，我们需要借助chrome开发者工具，将代码插入到编辑器并保存。

公众号SVG动画交互实战代码

大功告成，快看看效果吧！

源码和效果演示:

https://dev.xingway.com/experiments/wechat/svg/

标签：
公众号SVG动画,公众号SVG
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“公众号SVG动画交互实战代码”
暂无“公众号SVG动画交互实战代码”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网