实例|微博SVG实验 - 基于 id 能力的 复用结构
bigegpt 2024-10-12 06:29 3 浏览
大家好，我是交互设计师计育韬，本文分享一个微博 SVG 交互的经典模型开发，其效果为：在长按屏幕时，三个立方体朝不同方向飞出；在松开屏幕时，立方体运动停止后开始回到初始位置。
为什么要设置这个实例？
有以下两个原因：
今天计老师已经在头条图文中，提及了这个实例。我希望以此给到广大开发者两个层面的提示：
1）id 的使用，及其具体的定义和引用方式；
2）特殊手势结构的差异化应用；
从 id 开始，
更新你的 SVG 开发思维。
大多数当今的从业者，应该都听讲过我们的《SVG高级交互排版》系列课，相信也已经非常熟悉编组嵌套法实现多重动画复合的思路了。但是，这种思路本身并不是 XML 语法下泛 SVG 开发的主流——甚至可以一定程度上说，是在微信公众号禁用 id 前提下的一种畸形产物——你在任何其他 infographic 场景譬如常规前端开发、网页数据可视化、本地图形演示中都不会采用这种构建逻辑。
它的缺陷是显而易见的，微信公众号图文内动画的复合程度往往非常局限。并且常常要通过 <click> 和 <touchstart> 双层触发这类独有体系去增加动画复合的强度。
但有了 id，一切就回到了真正 HTML5 意义上的页面开发：一个正确的指令，在特定的触发行为下激活，传递给被你标记 id 的目标，执行对应的行为动作。同样，你也就可以给一个目标绑定多个指令和对应动作关系，使得它真正成为一种可控的，而非单一线性行为的交互目标。
所以计老师认为，微博 SVG 的理论上限，就会比微信公众号生态高非常多，不单单是动画的流畅性和综合性，还有整体交互设计的用户体验逻辑都能被极大丰富。
通过这个实例，我也更希望引导广大开发者逐步形成「定义-引用」的微博 SVG 规范书写方式，并且善于通过 <use> 这类属性更合理地布局画面元素。目前就微信公众号生态端看，由于 id 限制的缘故，套娃型代码层出不穷且层级深不见底，这既给后期调试工作带来诸多不便，又不利于代码本身的加载效率，还容易引起各类在传统 XML 开发中匪夷所思的误触情况。
更新并接受全新的微博 SVG 开发思维，它具备更敏捷的开发方式和更丰富的想象空间。减少不必要的编组和嵌套，以 H5 设计的思路重新审视 SVG 交互设计。
保持创造力，
特殊手势总有奇妙玩法。
选择 button.touchstart 和 button.touchend 作为实例的应用，计老师也是考量了触发指令多样性的演示意义。在微信公众号端，目前特殊手势的 SVG 交互模型并算不多，以下是 E2.COOL 黑科技 SVG 编辑器中的截图：
归根结底，是因为在 id 限制条件下，除了透明度动画外各类位移属性的书写都有局限性，尤其若要实现具备长按/松开形式下坐标变化的 animation，可行性均有待商榷。不过现在，我们或许已经迎来了更友好和开放的创作条件，不妨试一试在这方面进行新的探索吧！
如需获取本实例源代码，请关注微博@JZ多媒体解决方案并私信，我们将进一步在微博中为广大开发者和运营人带来更多实例演示和技术分析，长按识别下方二维码，前往微博与我们共同探讨。
相关推荐
- Redis集群对比:主从复制、哨兵模式、Cluster一文看懂所有优缺点
-
在分布式系统中，Redis作为高性能的内存数据库，其集群方案的选择直接影响到系统的稳定性、可用性和扩展性。本文将全面对比Redis的三种主流集群方案：主从复制、哨兵模式和Cluster模式，帮助开发者...
- redis的主从复制，读写分离，主从切换
-
当数据量变得庞大的时候，读写分离还是很有必要的。同时避免一个redis服务宕机，导致应用宕机的情况，我们启用sentinel(哨兵)服务，实现主从切换的功能。redis提供了一个master,多个sl...
- # Redis 入门到精通(九)-- 主从复制(3)
-
#Redis入门到精通（九）--主从复制（3）##一、redis主从复制-常见问题（1）###1、伴随着redis系统的运行，master的数据量会越来越大，一旦master重启...
- redis - 主从复制（Redis主从复制时序图）
-
1引言在上一篇文章中，我们了解了Redis两种不同的持久化方式，Redis服务器通过持久化，把Redis内存中持久化到硬盘当中，当Redis宕机时，我们重启Redis服务器时，可以由RDB文件或AO...
- # Redis 入门到精通(九)-- 主从复制(2)
-
#Redis入门到精通（九）--主从复制（2）##一、redis主从复制--数据同步阶段注意事项###1、数据同步阶段master说明1）如果master数据量巨大，数据同步阶段应...
- Redis主从复制（redis主从复制主节点挂了）
-
介绍Redis有两种不同的持久化方式，Redis服务器通过持久化，把Redis内存中持久化到硬盘当中，当Redis宕机时，我们重启Redis服务器时，可以由RDB文件或AOF文件恢复内存中的数据。不过...
- 深入解析 Redis 集群的主从复制实现方式
-
在互联网大厂的后端开发领域，Redis作为一款高性能的内存数据库，被广泛应用于缓存、消息队列等场景。而Redis集群中的主从复制机制，更是保障数据安全、实现读写分离以及提升系统性能的关键所在。今...
- Redis主从架构详解（redis主从架构高可用如何实现）
-
Redis主从架构搭建Redis主节点配置创建主节点目录（/opt/redis-master），复制redis.conf到该目录下，redis.conf配置项修改#后台启动daemonizeyes...
- 抖音“四大包塘战神”:承包了全网的快乐
-
在抖音钓鱼垂类领域，"包塘战神"军团正掀起一场黑色幽默风暴。空军华、大表坑、李赔光、透心良四位创作者，以承包鱼塘为舞台，用连续翻车的钓鱼直播构筑起流量奇观。当钓鱼佬在抖音集体转型喜剧人...
- ORACLE 11G RAC 安装-通过VM配置共享磁盘
-
简介：在自己的电脑上通过VM软件搭建Oracle11GRAC，通过修改VM的参数文件来实现磁盘共享！目标：搭建RAC环境实现：使用VMwareWorkstation8.0.0+ORACLE...
- Linux操作系统安全配置（linux系统安全配置包括）
-
一、服务相关命令systemctlenable服务名#开机自启动systemctldisable服务名#禁用开机自启动systemctlstop服务名#停止服务systemctls...
- 关于Linux性能调优中网络I/O的一些笔记
-
写在前面和小伙伴分享一些Linux网络优化的笔记,内容很浅，可以用作入门博文内容结合《Linux性能优化》读书笔记整理涉及内容包括常用的优化工具(mii-tool,ethtool,ifconfig,i...
- 从 Sonatype Nexus Repository Manager 迁移到 Artifactory
-
1.Nexus1.1下载下载链接：https://help.sonatype.com/repomanager3/product-information/download/download-archiv...
- Ubuntu20安装zabbix5.0企业监控系统亲测教程
-
前言示例主机：zabbix10.0.100.10，将安装在UbuntuServer上教程说明：因使用官方教程无法安装成功，所以本教程与官方教程有所不同安装前提：已安装UbuntuServer2...
- Linux内核设计与实现—进程管理（linux内核程序设计）
-
进程进程就是处于执行期的程序(目标码存放在某种存储介质上)。进并不仅仅局限于一段可执行程序代码(Unix称其为代码段，textsection)。通常进程还要包含其他资源，像打开的文件，挂起的信号，...
- 一周热门
- 最近发表
- 标签列表
-
- mybatiscollection (79)
- mqtt服务器 (88)
- keyerror (78)
- c#map (65)
- xftp6 (83)
- bt搜索 (75)
- c#var (76)
- xcode-select (66)
- mysql授权 (74)
- 下载测试 (70)
- linuxlink (65)
- pythonwget (67)
- androidinclude (65)
- libcrypto.so (74)
- linux安装minio (74)
- ubuntuunzip (67)
- vscode使用技巧 (83)
- secure-file-priv (67)
- vue阻止冒泡 (67)
- jquery跨域 (68)
- php写入文件 (73)
- kafkatools (66)
- mysql导出数据库 (66)
- jquery鼠标移入移出 (71)
- 取小数点后两位的函数 (73)