巧用魔术图制作跑马灯效果

收藏

本帖最后由 nimotea 于 2024-7-9 09:43 编辑

背景
在大屏展示场景中，往往需要通过一些动态的效果展示类似排行榜，时间轴一样的跑马灯效果。就像下图一样
ezgif.com-video-to-gif-converter.gif

timeline-ezgif.com-video-to-gif-converter.gif

除了动效之外，因为要显示排名信息，所以排名值，时间信息，上升下降趋势等效果都需要在大屏上动态设计。其实这些效果都可以使用我们的魔数图组件来完成，接下来就给大家带来，魔术图跑马灯效果的具体教程。

操作
在仪表板设计器中，我们通过拖拽出魔数图组件，并放置到合适位置
1.PNG757817382.png

拖拽出魔数图后，我们可以给魔术图上绑定分组或者度量，魔术图就会根据我们绑定的分类来分割每一个小的展示项。
2.PNG604761352.png

然后我们就可以点击编辑按钮来设计每个子项模板的样式了。

魔术图中我们可以利用富文本或者图片组件来组合拼出各种想要的展示样式，如果需要展示绑定数据，一方面富文本组件中本身就可以设置数据字段，另外，我们也可以使用魔术图自带的变量表达式 (【帮助文档】魔术图组件) CardCategoryValue["上升"] 来设置我们在魔术图外部绑定的字段值 (CardCategoryValue 表达式由于不会二次请求，在性能方面更有优势)。
3.PNG567449035.png

设置好模板后，我们就可以点击左上角返回仪表板来设置魔术图整体的跑马灯效果了。
5.PNG458533324.png

其中条目样式内边距和外边距可以控制条目的边界感，条目布局中设置排布方向控制滚动方向，最后在数据交互栏目中打开自动滚动配置就完成了跑马灯的展示效果了。

资料
为了方便查看，我将制作的两个demo 也作为附件，如果有需要的可以下载导入测试包查看。

跑马灯Demo.zip (8.13 MB, 下载次数: 27)

		自动登录	找回密码
密码			立即注册

巧用魔术图制作跑马灯效果

0 个回复