如何制作《超简单的AI自测题》

最近更新了一波轻交互的公众号文章:

今天开始陆续更新一些教程《通过svg标签实现文章的点击交互功能》。

背景:

微信文章只能放阉割版的svg,例如use标签不能使用,标签里的id会被清除等。

我是如何发现svg哪些内容被阉割的?

通过谷歌开发者工具,查看微信文章保存前后的svg标签变化,可以方便的看出保存的时候哪些svg标签被去除了。

点击交互功能的基本原理:

通过svg标签的动画标签实现动画。是实现 svg 动画的基本标签,将标签放在某个元素的标签中,即可对该元素添加动效

主要技术:

第一期《超简单的AI自测题》里主要使用了这个标签:

原理如下图:

题目卡片一张张叠加在一起,并把答案藏于屏幕外,通过点击卡片上的按钮,把卡片移除,并把答案移入屏幕。如下图:

题目1跟它的答案1通过便签归组管理,其他题目也是类似的处理方式。

全部代码下载可以在付费社群--知识星球里获取。

1 看到一些好案例,关键技术解决方案,写出文章又不成体系,发星球里;

2 我会在知识星球发一些非常机密的研究心得;

3 一些非常有技巧的知识,给付费用户;

4 公众号的迭代版本,针对文章发更为升级、核心的内容。

5 当然,还有资深的专家在星球里。

如何复制到微信公众号文章里?

方法1:

使用在线的微信文章编辑器html功能,把svg的代码贴入,然后预览,全选复制,到微信公众号文章编辑界面粘贴即可。 在线编辑器的功能基本来源于百度开源的umeditor编辑器;

方法2:

如何制作svg?

如果是mac可以用sketch,如果是window,用Adobe Illustrator,当然也可以通过写代码,把设计好的svg模版固定下来,自动生成其他类似的svg。

以下为广告:

聚集各路跨界能手——有各领域的设计师、程序员、算法专家。

也许我们可以一块做点好玩的事情。如需入群可以联系我。

关于:

本公众号定期更新人工智能&设计&科技内容。

谈点设计,敲点代码,偶尔创作点人工智能实验产品

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180123G0MXEA00?refer=cp_1026

扫码关注云+社区