Principle5秒交互小动效-相册预览效果

用户头像
上海/UI设计师/8年前/949浏览
Principle5秒交互小动效-相册预览效果
用户头像
Cheungx

超简单的新手级别小教程,适合不爱看文字版功能介绍的小伙伴。

每次一个几分钟的简单案例,渐渐上手Principle


01-首先,打开Principle,新建一个画板:

02-用矩形工具将元素画好:


03-选中最大的图片,在右侧发现“闪电”图标,点击图标会出现支持的事件列表:


04-得到一个新的一模一样的画板:


05-多复制小图备用:



06-将第一张图放大,其他小图左对齐:



07-绘制一个半透明蒙层:



08-为蒙层增加事件:



09-将这些图编组:


10-并将边框缩小(相当于给这个组价格遮罩):



11-将这个组的X轴交互改为Scroll:

OK!

7
举报
|
7
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
UI通用设计素材1
拟物风质感写实UI卡片合集源文件
UI 登录界面设计模板包
【新年UI图标】钱包icon
智能家居中心 简约 UI设计组件库
Security Camera UI kit
科技医疗透明柜UI界面设计
钱包ui模板
我的钱包-UI界面设计-app
手表表盘UI系列
新能源APP应用UIKit
【新年UI图标】礼物/活动icon
3D渐变流体抽象矢量UI背景图
APP/小程序商业项目UI模板|99个高保真UI+79个原型
新拟态风格 UI设计组件库
【新年UI图标】30个图标
【新年UI图标】汽车icon
【新年UI图标】会员icon
【新年UI图标】秒杀icon
户外旅行飞机情侣假日出行
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
3D卡通UI界面图标可爱插画免扣素
高级表盘系列UI源文件
你可能喜欢
大家都在看
登录注册