模板分析 | SVG互动排版『Apple宫格弹跳』

最新推荐文章于 2022-04-07 22:27:38 发布
最新推荐文章于 2022-04-07 22:27:38 发布
阅读量233 收藏
点赞数
分类专栏： 模板代码 | SVG公众号互动排版 文章标签： svg 文章排版 互动排版 黑科技排版 模板代码
转载请联系微信号：dong_dian_jun
本文链接：https://blog.csdn.net/h5course/article/details/116232894
版权
本文介绍了Apple宫格弹跳效果的实现，重点讲解了SVG宫格图片如何根据ViewBox坐标排版，以及如何计算动画values值。通过案例分析，解释了ViewBox对SVG坐标的影响，以及动画执行的步骤。同时，推导出计算动画values的数学公式，帮助理解垂直居中和循环播放的关键点。
摘要由CSDN通过智能技术生成

今天挤点时间来跟大家说说Apple宫格弹跳的两个知识点，一个是宫格图片的排版，因为改变了原点(0,0)的位置，排版起来会不太适应，另外一个是动画values的值如何计算。这篇文章原本很早就要写了，但是手头的事情比较多，写到一半就搁浅了。

一：宫格图片排版

如下有两个案例，图片的坐标都为(0,0)，SVG的ViewBox坐标值分别为(0,0)和(-375,0)，对比一下他们的呈现效果。

Tips：ViewBox共有4个参数，第1个参数和第2个参数表示X坐标和Y坐标，第3个参数和第4个参数表示宽度和高度；

SVG左上角的坐标值为(0,0)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 1000" style="display: block; overflow: hidden;" width="100%" data-info="公众号：懂点君">
    <g>
        <foreignObject x="0" y
了解本专栏 订阅专栏 解锁全文 超级会员免费看
懂点君
关注
专栏目录
订阅专栏
SVG互动排版 | 展开嵌套多个展开
懂点君
11-15 852
案例效果 模板代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" /> <title>公众号：懂点
iconfont svg 增加没用_SVG微信交互图文｜一周案例汇总｜2021这些炫酷排版值得一看...
weixin_33632843的博客
01-12 194
又是一周汇总时刻，让我们一起看看2021年初，「小编备用」准备了哪些值得一看的交互图文呢？1.模拟账单生成效果-点击加入购物车，生成相同账单你的2021预言账单来了​mp.weixin.qq.com梅赛德斯奔驰这篇推文是场景模拟账单效果的优化运用，同样设计别出心栽模拟网购的消费场景，画面色彩绚丽，看到时有眼前一亮的感觉，文中利用点击切换效果模拟网购下单加入购物车环节。推文末尾与「小编备用」账单生成...
svg 点击 事件_公众号排版干货：大号都在用，SVG真香？
weixin_39879522的博客
12-06 991
大家好，我是熊三酱。最近大号们悄悄开始在公众号里使用一种排版黑科技，大概是这样婶儿的：人民网-两会报道卷轴 ▲不会画出版社-互动漫画 ▲不仅内容有料有深度，互动形式上更是抓人眼球，一打听，原来他们是用了SVG样式。今天熊三酱就跟大家简单聊一聊SVG。百度百科：SVG格式 ▲其实俺村也不是刚通网，SVG这种效果在电脑网页、H5里早就见惯不怪了。但为什么对这些作品大家都啧啧称奇并奔走转发呢？因为这是直...
详细教你微信公众号正文页SVG交互开发技巧
10-16
主要介绍了详细教你微信公众号正文页SVG交互开发技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
二、svg文字之排版
NeverSayNever
05-09 9789
1、 Several lines: First line Second line 运行结果为： 2、
公众号文章里使用svg进行交互
xiongwn的博客
10-11 2万+
前言 最近看到一个案例，初看的时候对产品经理说很简单，是一个长页面，底图上有按钮，按了之后有素材动效，这对于前端来说是最基础的功能。后来定睛一看发现，还有微信阅读数和评论，发现事情并不简单。整个交互层全都在公众号文章里，这可是新鲜，翻了一下评论发现有不少同行在问是如何实现的，结果作者很得意地笑而不答，直到看到有人提到svg。有关键字就好办了，上网一查确实是黑科技，利用了微信文章富文本编辑的一个——...
SVG排版教程 | SVG排版入门基础知识汇总
懂点君
11-24 1632
编程零基础想要入门学习SVG互动排版之前，建议大家还是先了解一下HTML5网页基础知识，因为SVG是HTML5的一小部分，掌握HTML5网页基础有利于学习和上手SVG互动排版的相关知识
SVG互动排版公众号图文『一次点击，连续播放gif』模板代码
懂点君
07-12 663
模板代码 <section style="line-height: 0;overflow: hidden;"> <!-- 第一张gif --> <svg viewbox="0 0 1000 1000" style="display: block;width: 100%;background: #fff url(https://mmbiz.qlogo.cn/mmbiz_gif/JpraGu7eGqT7wBib6hKQkpEibBBLKH2EAGBAYqpRu
SVG互动排版公众号图文『点击播放GIF与音乐，并展开长图』模板代码
懂点君
07-19 831
模板代码 <section style="overflow: hidden;line-height: 0;"> <!-- 长图内容 --> <section style="height: 0;" data-author="公众号：懂点君"> <svg viewbox="0 0 1000 1779" style="display: block;width: 100%;background: url(https://mmbiz.qpi
微信推文svg样板 取消系统加设置的积分
05-16
这个为什么没有微信公众号运营开发的选项呢？ 这个是 一些微信推文svg动画的基础思路 因为微信推文中无法使用 id 属性，所以一些 短动画应该拼接成一个长动画使用
SVG互动文章排版『点击上下展开』模板代码
懂点君
05-27 901
模板效果 SVG互动文章排版“点击上下展开”模版代码 模板代码 <section style="overflow: hidden;" data-info="公众号：懂点君"> <!-- 最后一张图片 --> <section style="height: 0px;overflow: visible;box-sizing: border-box;" data-info="公众号：懂点君"> <img style="displa
秀米编辑器如何排版svg推文，以展开为模板讲解
热门推荐
qq_41227106的博客
06-23 2万+
1、打开秀米官网，点击右上角登录（建议微信登录） https://xiumi.us/#/ 2、如果想在秀米排版的能同步到公众号，请授权一下公众号，具体参考以下两篇文章 http://www.coozhi.com/youxishuma/hulianwang/80847.html https://jingyan.baidu.com/article/cb5d6105de98b4005d2fe05d.html 加下来进行排版公众号 1、进入首页，选择新建一个图文 2、找到svg 在svg图中找到你想要的切换动效
公众号点击图片后变化的互动效果怎么搞？教你用黑科技SVG排版技术提高图文互动性
free_pi的博客
04-08 1万+
公众号点击图片后变化的互动效果怎么搞？教你用黑科技SVG排版技术提高图文互动性 今天看到央视新闻发送的一则关于‘武汉解封’的软文，发现中间点击图片显示的效果挺有意思，随即网上查找了一下原来使用SVG互动效果实现的。 原文链接如下：https://mp.weixin.qq.com/s/e5Q5PurMYJD11rAxGSiPTg 1. 什么是SVG？ SVG简单来说就是一种图像文件格式，是可交互...
解答疑问 | 公众号文章中为什么不能添加外部超链接？
懂点君
11-29 3007
咱们能经常遇到文章中需要添加外部超链接，但是有的公众号是无法添加外部超链接，这到底是什么回事呢？是有什么条件限制吗？懂点君查阅相关资料给大家归纳整理了一下，让大家了解的更清楚！
SVG公众号排版『iOS手机长按禁止选中文字』解决方法
懂点君
11-22 2583
最近一位老铁向懂点君提问了一个问题：在iOS手机中长按切换图片会选中文字（SVG效果上下有文本内容），安卓手机则不会选中文字。看到问题后，脑子里立马蹦出了一个解决方法，在svg元素和p元素添加禁止文本复制的CSS属性：user-select: none，在iOS手机测试了一下，发现问题仍然没有解决，长按还是能选中文本内容。
SVG公众号排版『大尺寸背景图重复安卓不显示』解决方法
懂点君
11-22 2416
今天懂点君给大家分享一个兼容问题，大尺寸背景图平铺/重复在安卓微信上不能正常显示，也就是背景图显示不出来。 一开始我是猜测跟平铺/重复没有关系，是图片尺寸太大导致背景图不显示，具体咱们来看如下案例。
SVG黑科技排版『点击多次展开无缝长图』
懂点君
04-07 1590
SVG公众号排版连续点击三次展开无缝长图、点击多次展开无缝长图、点击展开套展开
SVG排版公众号文章『两次互动，展开长图』模板代码
懂点君
03-04 1481
模板效果 点击手机查看效果 模板代码 <section style="overflow: hidden;margin: 0 auto;text-align: center;"> <!-- 长图内容 --> <section style="height:0;display: block;margin-left: auto;margin-right: auto;"> <section style="background-colo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

懂点君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值