写代码可以很有趣

公众号动画排版

cover

SVG道具收集动画排版教程

年后有些忙,好久没给大家带干货啦,这次给大家带来SVG集福卡的动画排版案例。 通过引导用户寻找隐藏在画面中的福字,来收集5张福卡,收集完成后会触发一段烟花GIF动画,你会发现这种形式可以有效地延长用户停留时间,增加图文的趣味性和交互性。 老规矩,我们先来看一下案例效果。 点击触发动画 ...
cover-blog

SVG滑动排版基础

这是一篇很滑的SVG排版教程,行歌会用6个小案例带你全面了解公众号SVG滑动排版技术,分别是:基础滑动,基于flex布局的滑动,双层滑动,穿透滑动,开门式滑动,动画滑动,这6个案例覆盖了大部分滑动排版的应用场景,相信在学习后你可以游刃有余地将它们应用到自己的项目中去。 ...
cover

SVG线条描边动画原理

SVG的线条动画也称为描边动画,一般在公众号排版的长图文交互中比较常见,线条动画可以更好地引导用户的注意力,是一种不错的图文交互方式。 这次行歌带大家了解线条动画的基本原理,然后介绍如何在AI中绘制描边线条,最终用代码实现线条交互动画。 先来看看我们这次要实现的SVG描边动画小案例。 ...
blog_cover

SVG点A现B进阶应用

点A现B,又或是点击弹图,应该公众号SVG排版中最常见的应用场景之一。 前段时间行歌还录制了免费的视频教程专门来介绍点A现B的基本原理,我把教程链接在文末,对原理不了解的同学可以先去看看视频教程。 老规矩,先来看一下这次要实现的其中一个案例。 ...
blog_cover

自适应宽度SVG图文伸长动画

中秋国庆双节长假余额不足,不知大家这个假期过得怎么样?赶着假期的尾巴,抽空献上之前陈诺的教程,先来回顾下案例。 对于之前看过我SVG基础教程的同学,相信已经对固定宽度的SVG伸长动画结构和用法了然于胸,在这种结构中我们先将图文的宽度固定,然后通过等比例计算出图文的最终高度。 ...
cover

揭秘SVG密码解锁类排版动画

之前在公众号上看到一些密码解锁类SVG动画案例,觉得是一种不错的交互方式,最近抽空研究了一下此类效果的实现原理,并做了一个小案例,这次就带大家剖析解锁类SVG的实现细节。 实现原理 ...
cover

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

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