大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
现在很多公众号都直接在正文页通过SVG交互动画增加文章的阅读交互体验,而不再跳转H5。结合这一需求,本期分享的内容是如何开发交互式SVG,并嵌入微信公众号正文页。设计师和前端开发同学都可以来学习下。学会了可以接这方面的私活了,短平快地赚小钱钱。
公司主营业务:网站制作、成都网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联建站是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联建站推出郾城免费做网站回馈大家。先看下最终SVG交互效果:
(体验公众号正文页实际效果,请到本文底部扫码关注公众号)
1 为什么公众号需要交互SVG
技术要有落地的应用场景才能发挥实效。为什么很多公众号开始做SVG交互而放弃H5呢?
主要原因有两点:
当然,对于需要复杂交互,或者更多功能的话,还是需要单独开发H5。
SVG虽然只能实现简单的交互,但既能增加交互体验又不会太分散用户对内容的关注点,在很多场景下还是很有需求的。
2 应用场景
SVG交互本质还是基于SVG SMIL animation,配合SVG的click事件,实现非常简单的交互。
虽然实现的效果很有限,但还是有很多发挥空间的,比如以下应用场景:
下面开始讲解本期Demo的制作全过程。
3 素材制作
3.1 背景图片
使用PS等软件设计SVG的背景图,建议宽度为640px~750px,也可以更高,但文件大小也会增加。 本例制作了 640px x 800px 的jpg背景图:
3.2 SVG素材
可以去阿里巴巴矢量图库(www.iconfont.cn/)网站下载。也可以自行使用AI制作。 但需要注意控制好SVG的图片尺寸。SVG的图片的尺寸即点击区域,所以控制好图片中空余的留白区域。
本Demo从阿里矢量库中下载了爆竹SVG,下载后用AI打开,缩小图片的尺寸:
由于微信编辑器不允许嵌入