中华网家电

设为书签Ctrl+D将本页面保存为书签,全面了解最新资讯,方便快捷。
业 界/ 互联网/ 行 业/ 通 信/ 数 码/ 手 机/ 平 板/ 笔记本/ 相 机
当前位置:频道首页 > 快讯 > 正文

好酷!奥迪这篇推文「点击切换GIF+消失展开」怎么做的?

好酷!奥迪这篇推文「点击切换GIF+消失展开」怎么做的?
2024-06-07 17:01:06 来源:看点时报

在这个数字化时代,信图文中加SVG交互已经成了常态。而其中的点击播放GIF后展开效果,更是我们日常浏览中经常遇到的。

以往,我们看到的点击播放GIF后展开效果,首屏显示的图片往往必须与GIF播放内容比例一致,而且首屏几乎没有其他交互的可能,排版效果就很受限。但你是否注意到,奥迪这篇图文中最新应用的这种效果——「点击切换GIF+消失展开」,让展开更灵活多变。

https://img2.danews.cc/upload/images/20240607/cfeed4bdbee97ab34fc8729c28893d03.PNG

现在,首屏显示的图片可以与GIF的比例不一致,甚至还可以添加其他的交互效果。这种变化让排版更加灵活,不再受到比例的束缚。当然,这种变化也带来了一些新的挑战。比如,如何衡首屏图片与GIF内容的关联,如何让两者在视觉上更加和谐统一,这些都是设计师需要思考的问题。但正是这些挑战,也激发了设计师们不断探索和创新的动力。让我们以奥迪的图文为例,来学一下这种「点击切换GIF+消失展开」交互图文的排版过程。

第1步:选择组合

登录 iPaiban Pro 编辑器后,点击编辑器右侧「组合」按钮,在「花样展开」-「切换图片+展开」分类中找到「点击切换GIF+消失展开」组合,或者直接在搜索框中搜索组合编号11775,点击选择。

第2步:进入组合编辑模式

点击「编辑组合」,进入组合编辑模式。

第3步:设置「展开前」内容

点击「展开前」区域,接着点击右侧两个「换图」按钮,分别上传单击前和单击后的图片。

注意单击前&后图的尺寸要求:每张静态图(PNG|JPEG)尺寸保持一致;动态图(GIF)比例与静态图保持一致。

第4步:设置「展开后」内容

「展开后」的内容支持嵌套各种组件,需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中,然后上传需要的素材即可。 添加组件位-拖动组件到组件位中-上传图片,每需要一个样式就按照这3步操作:

第5步:设置动画参数

点击右侧红色小三角符号,分别设置GIF动图播放时长播放后消失动画时长展开时长。 展开高度一般无需调整,但当大家在手机上预览时,如果发现展开后有多余的空白或者没有展现出全部内容,这时候可以通过「加减展开高度」使其恰好展开。

第6步:导入公众号后

内容编辑完毕后,点击左上角「保存并退出」退出组合编辑模式回到编辑器主页面。

效果满意后点击「同步至信后」就可以了。

使用同步功能无需频繁在编辑器和信后切换,同步成功后可以立即扫描二维码查看。

如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。

的来说,点击切换GIF+消失展开效果是技术进步和设计创新的产物,它让我们看到了更多可能,也让我们的视觉体验变得更加丰富多彩,推荐运营的小伙伴使用。

免责声明:市场有风险,选择需谨慎!此文仅供参考,不作买卖依据。

责任编辑:kj005

文章投诉热线:182 3641 3660  投诉邮箱:7983347 16@qq.com
关键词:

向凌云受聘为多民族玻利维亚国金融经济顾问

2024-06-03 09:28:39向凌云受聘为多民族玻利维亚国金融经济顾问

2024爱企查毕业季校园行:构建诚信就业市场,为成电、广大学子保驾护航

2024-05-31 19:02:332024爱企查毕业季校园行:构建诚信就业市场,为成电、广大学子保驾护航

全屋净水需求迸发,国内品牌净水器排名榜之一的立升值得信赖

2024-05-24 09:34:34全屋净水需求迸发,国内品牌净水器排名榜之一的立升值得信赖

家电以旧换新热潮喷涌,哪一款净水器比较好,值得入手?

2024-05-22 15:14:03家电以旧换新热潮喷涌,哪一款净水器比较好,值得入手?

黑鲨新品引爆2024 ChinaJoy!游戏玩家专属神器,让你征服对手!

2024-05-22 10:34:18黑鲨新品引爆2024 ChinaJoy!游戏玩家专属神器,让你征服对手!

网易免费送清华校友VIP邮箱 终生拥有清华专属账号名

2024-05-16 11:06:04网易免费送清华校友VIP邮箱 终生拥有清华专属账号名

相关新闻