首页 > 其他分享 >【秀米教程7】SVG点击展开推文,手机横屏下拉效果动画

【秀米教程7】SVG点击展开推文,手机横屏下拉效果动画

时间:2023-12-28 10:24:26浏览次数:24  
标签:SVG 文本框 竖屏 秀米 点击 内容 设置 推文

效果展示

效果展示:点击图片展开推文内容
image

效果图

操作步骤

  1. 点击【图文模板】 - 【SVG】 - 在左边选择自己想要的下拉效果

image

  1. 点击下拉效果图的边框 - 点击【编辑】
    显示内容:显示当前编辑下的内容,但不能编辑

image

  1. 点击【转场设置】
    ①解释说明:【转场设置】下方有“转场淡出(0.5秒)+展开(13秒)”提示
    ②转场淡出(0.5秒):封面淡出的时长
    ③展开(13秒):内容展开的总时长

image

  1. 清除封面中的内容,并设置自己想要的图片 - 点击【图片】,设置【以本图为布局基准】
    image

  2. 在【内容页】中设置封面+展开的内容

    • 展开的内容:先在SVG外部做好(“展开页”中不太方便编辑),把做好的内容进行收藏,最后将收藏的内容插入到“内容页”中

image

  1. 点击【分段展开】中的设置 - 右边小窗口线下滑动查看动画停顿分隔线 - 点击【分割线】,上方会显示单个模块的动画时长。

    :点击小窗口中间的 “+”号 可以在小窗口中间区域添加分隔符

    我们手动设置的动画时长可以不一样,这样会使动画更有运动效果显得更加自然。匀速变化的动画会显得不自然。

image

可能遇到的问题?

  1. 问题描述:当所有效果做好之后,我们将推文同步到微信公众号后台预览到手机,推文有时会有下拉效果,有时没有下拉效果。
  2. 解决办法:将下拉动画设置成匀速变化。设置步骤:取消【分段展开】-设置【时长】

    时长:时长根据展开的内容长度进行合适的设置,内容越长,时长越长;内容越短,时长越短

image

实战推文制作

水平时间轴下拉效果

image

大图横屏效果图

  1. 设置图片素材为竖图:点击或右击图片 - 设置图片【向右旋转】,此时的图片在插入秀米时就可以横屏浏览
    image
  2. 设置文字为竖版:点击【深度布局】可以观察到正常的文字是横屏的,我制作的文本框有2个盒子(方框)并且是竖屏。
    image
  3. 设置步骤:点击【深度布局】- 插入【基本卡片】box1(盒子1),并删除里面的文字,只保留box1

image

image

  1. box1中再插入【基本卡片】box2(盒子2)

image

  1. 选择box2,并旋转90°,此时文本框就是竖屏,我们在里面输入任何内容时文字都将是竖屏。
小贴士
也可以直接设置box1旋转90°,我想达到的效果是无论文字长短,文本框都会根据文字的段落长度(宽度自适应)+固定上下边距进行设置,这样编辑会更加方便,但“文字宽度自适应”是根据屏幕宽度进行变化的。

image

  1. 选择box1,设置【组前距和组后距】为适当的值(例如:20像素),使竖屏文本框有一下的一下边距,这样会使推文更加美观。
    【相关秀米教程文章推荐】 推文排版中的色系、文章结构与模块,你一定要注意

image

  1. 选择box1对竖屏文本框进行【收藏】,在需要使用时直接在【收藏】中进行调用。

    小技巧:竖屏文本框在编辑时不方便查看,在前期编辑时可以用横屏文本框进行编辑,确认无误后再将文本框进行竖屏设置。
    【相关秀米教程文章推荐】 制作专属秀米模板,更加适应你的工作内容
    image

原文链接:https://www.cnblogs.com/MrFlySand/p/17932121.html(查看原文)

标签:SVG,文本框,竖屏,秀米,点击,内容,设置,推文
From: https://www.cnblogs.com/MrFlySand/p/17932121.html

相关文章

  • 【秀米教程7】SVG点击图片,横屏下拉效果动画
    原文链接:https://www.cnblogs.com/MrFlySand/p/17930117.html效果展示效果展示:点击图片展开推文内容效果图操作步骤点击【图文模板】-【SVG】-在左边选择自己想要的下拉效果点击下拉效果图的边框-点击【编辑】显示内容:显示当前编辑下的内容,但不能编辑点击【......
  • SVG动画
    一、下载SVG网站:https://undraw.co/点击“browsenow”点击“search”点击第一个点击“DownloadSVGforyourprojects”对代码进行格式化将代码拷贝到vscode中,用快捷键“Shift+Alt+F”进行格式化,格式化之后如下所示:<svgxmlns="http://www.w3.org/2000/svg"data-......
  • 改变上传的svg颜色并生成新的svg文件,再上传或者更新至服务器上
    最近有个需求,就是把上传的svg改颜色,并生成新的svg图片上传值服务器上<!DOCTYPEhtml><html><head><title>上传svg并修改颜色得到新的svg文件</title><style>#svgContainer{padding:50px;display:inline-block;}......
  • WPF使用SVG
    使用svg创建path<Window.Resources><Geometryx:Key="Icon-Close">M512.72533385.12c235.3920426.538667191.146667426.538667426.581333s-191.146667426.581333-426.538667426.581334c-235.4346670-426.581333-191.146667-426.581......
  • 史上最全SVG开源项目
    史上最全SVG开源项目徐大大中文​关注 3人赞同了该文章SVG(ScalableVectorGraphics)是一种矢量图形格式,它提供了一种可以在网络上高效描述矢量图形的方法,其标准最初由W3C制定,于1999年发布SVG规范1.0版本。在HTML5之前,SVG只能作为插件运行在浏览器......
  • svg 绘制旗帜
    效果: constdrawFlag=()=>{constviewBox=1024;constpoleHeight=1000;constpoleWidth=60;constpoleX=10;constpoleY=10;constx=poleX+poleWidth;consty=poleY+poleWidth;constwidth=800;constheight=6......
  • 动态绘制svg
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=......
  • Highcharts 用SVGRenderer方法点击鼠标移动光标​
    需求演示如何使用SVGRenderer方法来实现点击鼠标移动光标,并解释说明属性功能。分析使用SVGRenderer方法来实现点击鼠标移动光标,可以按照以下步骤进行操作:创建SVGRenderer实例:首先,你需要创建一个SVGRenderer实例,用于渲染SVG元素和操作SVG属性。设置SVG元素属性:使用SVGRenderer的方法......
  • Highcharts 用SVGRenderer方法使柱状图连接列边​
    需求在Highcharts中,可以使用SVGRenderer方法来创建路径连接柱状图的列边,并根据具体的数据和需求进行适当的调整和扩展。分析要使用Highcharts的SVGRenderer方法来绘制柱状图并连接列边,可以按照以下步骤进行操作:创建柱状图:使用Highcharts的 chart 方法创建一个柱状图,并......
  • Highcharts 使用SVGRenderer方法绘制极地图​
    需求展示如何创建一个极地图、设置样式,并使用SVGRenderer方法绘制解释说明的路径和文本。分析要使用Highcharts的SVGRenderer方法绘制极地图,可以按照以下步骤操作:首先,创建一个极地图实例,并设置所需的配置项;创建一个SVGRenderer实例,使用SVGRenderer的path方法绘制路径;可以......