写代码可以很有趣

SVG

cover

公众号动画排版进阶之二级展开

我们对公众号排版中的长图文动画结构已经很熟悉了,它是一种一级展开的层次结构,这次介绍下比一级展开复杂一丢丢的二级展开,先来看一下效果。 二级展开除了第一级的结构有所不同外,第二级结构和普通的伸长动画并没有什么不同,我们先来对比下两种结构。 一级展开结构 ...
cove

公众号排版利器Flex布局

Flex布局是W3C提出的一种简洁,高效,响应式的解决方案,相对于传统的布局大大的提高了前端的工作效率。 这种布局方案起初面世时,由于兼容性问题并没有得到广泛的应用,直到近些年,各大主流浏览器已经对Flex布局有了全面的支持,尤其是在移动端,已经可以放心的使用。 ...
cover

剖析苹果公众号花开动画

最近在水果公众号上看到一段菊花绽放的动画,丝般润滑的感受,吹弹可破的花瓣,让我忍不住看了下究竟,将所得整理了下,作为小技巧分享给大家。 具体看下图,视频转换成GIF质量下降,有兴趣可以去水果公号看。 ...
cover

微信公众号SVG交互动画实战

越来越多的公众号在自己的图文消息中加入了SVG交互动画,近来一些小伙伴也在问我这些动画交互效果是如何实现的。 有的小伙伴在看了一些文章教程后,对于一些细节处理还是无从下手。 ...
blog-cover

公众号SVG动画交互实战

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