专业的品牌信息化整合营销服务机构

互联网信息化咨询/技术开发/整合营销

请通过以下方式免费咨询

微信公公众号正文页SVG交互开发技术-易龙天

      现在很多公众号直接在正文页通过SVG交互动画增加文章的阅读交互体验,而不再跳转H5页面,结合这一需求易龙天今天就和大家一起来了解一下SVG交互技术吧。

1 为什么公众号需要交互SVG

技术要有落地的应用场景才能发挥实效。为什么很多公众号开始做SVG交互而放弃H5呢?

主要原因有两点。

1)H5制作成本高,需要一定的开发周期和服务器支撑。

2)从正文页跳转H5页面多了一个步骤,容易造成用户流失。当然,对于需要复杂交互,或者更多功能的话,还是需要单独开发H5

     SVG虽然只能实现简单的交互,但既能增加交互体验又不会太分散用户对内容的关注点,在很多场景下还是很有需求的。

2 应用场景

       SVG交互本质还是基于SVG SMIL animation,配合SVG的click事件,实现非常简单的交互。

虽然实现的效果很有限,但还是有很多发挥空间的,比如以下应用场景:

【汽车宣传】点击车子后,车子移动,经过某个位置显示某个特性或地点名称文案。

【心理测试】点击某个选项后,出现选择结果。

【拆红包】一层一层拆掉红包,显示最里面内容。

【密码解锁】点击指定的几个数字后,显示解锁内容。

【猜灯谜】点击后显示内容,类似翻牌。