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

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

第一期 超简单的AI自测题

第二期 喵星人密信

第三期 vim答题卡

第四期 猜拳

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

背景:

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

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

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

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

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

主要技术:

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

<animateTransform 
attributeName="transform" 
type="translate" 
values="0 0;-640 0" 
fill="freeze" 
begin="click+.5s" 
dur=".5s">
</animateTransform>

原理如下图:

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

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

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

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

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

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

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

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

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

方法1:

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

方法2:

在谷歌开发者工具里直接修改微信图文的代码,位于<body>……</body>标签中。

如何制作svg?

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

原文发布于微信公众号 - 科技Mix设计Lab(Design-AI-Lab)

原文发表时间:2018-01-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

深入浅出React(一):React的设计哲学 - 简单之美

本文作者:IMWeb 刘起 原文出处:IMWeb社区 未经同意,禁止转载 编者按:自2013年Facebook发布以来,React吸引了越来越多的开发...

2095
来自专栏非著名程序员

最美动画特效库,你们值得收藏

昨天,我抽时间整理了一下我收藏的一些开源库,真的是收藏了很少看,但是昨天整理的时候,感觉到了一些真的不错的开源动画特效的库,在这里分享给大家。 1 Slid...

2518
来自专栏草根博客站长有话说

展望 WordPress 5.0 会给我们带来哪些更新?

目前 WordPress 最后的一个正式版已经到 4.9.7 了, WordPress 5.0 也即将到来了,那么 WordPress 5.0 会给我们带来哪些...

2233
来自专栏程序员宝库

趣图:各种程序员的键盘热力图

1896
来自专栏技术/开源

TypeScript 优秀开源项目大合集

TypeScript出来有段时间了,也冒出了很多用TypeScript开发的优秀开源项目,搜寻了一些基于TypeScript项目,分享给大家:https://g...

4889
来自专栏携程技术中心

Qnext大会 | React Web——浏览器端复用React Native代码解决方案

原创专栏|杨乾军 ? 自2008年开始接触前端,至今已有8年的前端开发经验,是一名资深前端攻城狮。目前在去哪儿平台事业部前端架构组。 1 背景 ? 一直以来...

3386
来自专栏PHP在线

HTML5移动应用开发

1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构...

3718
来自专栏EAWorld

为什么使用React作为云平台的前端框架(PPT)

大家好,很高兴可以和大家分享“为什么使用React作为我们的前端框架”。 首先,我们来看一下普元云的总体架构图。 ? 从图中可以看到,在我们普元云平台中,我们最...

4044
来自专栏葡萄城控件技术团队

MultiRow中文版技术白皮书

引言 Microsoft .NET是一项比较成熟的技术开发框架,很多的商业应用都是基于.NET开发的,在这些商业应用中,作为数据展示和录入的表格控件,是不可或缺...

2075
来自专栏web前端教室

如果会 HTML5,刚进公司要做什么?|前端卧谈会第1期

image.png 那还是要看你是什么公司?做什么具体工作呀?还有你自身的水平情况了。但考虑你问出的这个问题,估计你也是个小白新手啦。 所以我就默认你是个前端新...

2068

扫码关注云+社区