.

3.图片按钮 Button

老赵发表于:2015年01月03日 20:34:15更新于:2019年07月19日 10:55:16

视频教程

一、案例效果

0015cb3f753773ca5c3bf5a47bd7617

《测一测你的女王指数》


二、场景应用

按钮/Button 组件可以表现2种状态。比如我们做测试题的时候,点击选中了一个答案,那么点击这个动作进行时,我们会看到被点击的元素变成了另外的颜色或表示被选中。这就需要图片按钮来表现。

除了支持点击触发外,还可以设置为开关模式,类似于电源开关,有两个显示状态:激活前和激活后。

《你是撩神还是撩渣,测一测你的七夕撩妹指数!》

《测一测你的理想生活》

《内蒙古方言终极大考,不服来战!》

《【节日合成海报】你的童心指数》


三、素材准备

文末附件下载练习素材。

准备图片按钮的2个状态图片,切记要用PNG或者JPG格式的图片,并且要注意将PNG多余的透明区域裁切掉,保证图片按钮的两个激活状态,即两张图片一样大小,防止变形。


三、组件用法

基本用法

1.点击图片按钮,添加到页面。

0015cb3fad5da92c9ae55ae16407ac5


2.选中图片按钮,可以替换素材。对于两个替换图片的要求是必须保证2张图尺寸跟比例大小一致。

0015cb3fd785a7ab060d5cd55c1a729


3.替换完素材后,图片按钮会变形,需要勾选尺寸与位置的显示比例,即可按照图片原尺寸比例显示。

0015cb3fdf8c91ea2d80e7053771b30


4.如果觉得图片按钮的大小不合适,还可以勾选锁定比例去调整。

0015cb3fe8c57b9aca8f87a06b47e0c


5.图片按钮默认的是开关模式,即点击了图片按钮以后,就是从初始状态切换到激活状态;但如果去掉勾选,点一下图片按钮,如果不松开的情况下,图片按钮会切换到激活状态,但一旦松开点击动作,会立刻切换回初始状态,我们用动图给大家展示。

0015cb40240cb3fef4b97124fca5544


旧版视频教程

无广告视频网址  优酷视频网址


时间

讲解内容

BUTTON效果展示




00:07

BUTTON效果展示

使用BUTTON




00:33

BUTTON添加

00:53

BUTTON状态介绍

BUTTON触发器设定




00:07

BUTTON触发器介绍

02:21

BUTTON与SET ELEMENT TO

00:07

BUTTON的开关状态装下2种状态触发器设定演示

02:21

非开关状态下的BUTTON触发器说明



附件:图片按钮的2个状态图片.zip • 9.79KB • 下载

--------- 不了解设计的程序员不是好客服 ---------------

回复(6)