Principle教程:如何完成数字变化+环形加载?

访客4年前黑客资讯450

在日常的设计事情中,不免会碰着一些建造可交互原型的事情。可交互的原型比拟于静态原型来说,直观是更大的利益。其次,在研究一些动效的时候,直接调好参数给工程师,会比口述来得越发简朴粗暴,效率更好。

Principle教程:如何完成数字变革+环形加载?

媒介

凡是在项目中,对付一些交互演示,动态演示会比口头描写更具像化。

而移动端凡是借助Principle来建造演示结果。

把握Principle的须要性 1. 简朴易学

或许16个课时,每个课时半个小时(包括操练时间),约莫抽2周的晚上就可以学完。

教程推荐:BiliBili-靳浩 Principle教程。

2. 提高还原

交互说明演示+类型的动效说明,交互演示清晰地将用户交互转达给整个项目团队,动效说明则让开拓可以或许尽大概地还原交互需求。

3. 敦促落地

对付某些用户交互,演示比口头表达更有落地性。

4. 体验顺畅

让用户体验更具有“舒适感”(用户交互与反馈呈现的机缘,动效反馈时长和速率等)。

在一些项目交互演示中,经常会用到数字变革和环形加载,接下来我将分享如何通过Principle来实现数字变革和环形加载。

能力一、数字变革

应用场景:

页面出场,数字变革

数字响应用户操纵变革,好比:主动领取嘉奖金后余额增加

下面先容两种数字变革实操案例,别离是「数字递增」和「数字转动」。

实操:数字递增

Principle教程:如何完成数字变革+环形加载?

第1步

新建组件,在组件中复制出几组数字,数字之间建设Auto自动动画,此时预览结果是从第1位数字到最后1位,无过渡动画。

第2步

为了让动画不跳过中间的数字变革,可以在每个数字面板上复制一个沟通名称的矩形b,错开奇数面板和偶数面板中b的位置,再配置b每次位移动画的时长,好比0.5s。

第3步

b的位移配置使得数字的过渡泛起出来,可以通过变动b每次位移动画的时长来节制数字之间的过渡时长,最后将所有矩形b的透明度改为0。

Principle教程:如何完成数字变革+环形加载?

‍‍动画完成。

实操:数字转动

Principle教程:如何完成数字变革+环形加载?

第1步

新建组件,在组件面板1中建设一个文本,输入数字串(好比从0到9),给面板1建设Auto自动动画,生成面板2。

第2步

移动面板2中数字串的位置,然后配置位移动画的时长,好比0.8s。

第3步

将2个面板都勾上“Clip Sublayers”,只展示显示在面板上的内容。

Principle教程:如何完成数字变革+环形加载?

动画完成。 扩展案例

Principle教程:如何完成数字变革+环形加载?

可以实验还原以上扩展案例。

能力二、环形加载

应用场景:

圆环加载,例:正在加载中动画作为页面过渡

圆环进度条,好比暗示页面数据读取进程或审核进程

实操:加载圆环「半圈」

Principle教程:如何完成数字变革+环形加载?

第1步

筹备素材,画2个圆形成一个圆环,筹备2个直径和圆环宽度相等的圆点。(ps:你也可以在Sketch画好素材后定名为“圆环”然后导入Principle中,通过这种 *** Principle中的圆环就是位图了,不能再修改颜色。假如直接在Principle画圆环的画可以随意变动颜色。)

Principle教程:如何完成数字变革+环形加载?

第2步

领略道理,参照对素材举办打组、调解巨细、以及定名(名称带有旋转的是要配置旋转的,便于领略)。

Principle教程:如何完成数字变革+环形加载?

Principle教程:如何完成数字变革+环形加载?

第3步

面板1选择Auto动画,自动复制出头板2,面板2中将“旋转点、旋转环”配置为180度,配置旋转时长好比1s,完成圆环前进180度动画。

Principle教程:如何完成数字变革+环形加载?

动画完成。

思考:如何完成加载1圈? 法1:改变加载半圈的起点

Principle教程:如何完成数字变革+环形加载?

相关文章

,百县榜“不老神”2020中国特色小吃百佳县市

,百县榜“不老神”2020中国特色小吃百佳县市

中国小康网独家专稿 文|中国县域发展榜课题组信息部主任 王韵雅 《小康》杂志社联合多个国家权威部门和专业机构,面向中国县域基层行政单位,开创“百县榜单工程”,展现中国实现全面小康的辉煌成就,创建中...

输入账号看qq密码的软件免费

每一个人对微信都有不一样的认知,有一些人觉得微信帮助了她们的生活,让她们的生活更加方便、幸福感更强,还有一些人却觉得微信让他们失去了很多的朋友,有的时候一个两个的bug就把她与男友创造很久的聊天记录给...

得到APP“知识直播” 不拼带货,拼知识

得到APP“知识直播” 不拼带货,拼知识

直播电商带货,如今如火如荼,但获得app独树一帜,开启了常识直播。常识直播是以直播的形式+常识内容,是以“通报/分享常识”为主的及时在线直播。那本文就来看看获得做常识直播的优势和计策,enjoy~...

金税盘和税控盘的区别是什么(3分钟带你了解两者的区别)

  税务ukey,和金税盘、税控盘有什么区别?其实困惑产生的缘由就是因为不了解我国发票开具系统的变迁。所以,我们今天来了解一下发票开具历史,也许看过之后,你就知道金税盘、税控盘和税务ukey三者的区别...

产品经理:一个商业云AIoT智能硬件产品的完整拆解

产品经理:一个商业云AIoT智能硬件产品的完整拆解

本文作者按照自身项目履历,具体复盘了贸易云AIoT智能硬件产物项目从0到1的全进程,总结了在项目执行进程中所碰着的问题,分享给各人用以参考进修。 写在前面的话 笔者从2013年开始进入智能家居规模,...

狂欢七月 网易游戏全明星阵容闪耀Chinajoy

 火爆的7月,是我国游戏迷们一年一度的欢乐星光盛典!7月28-31日,第九届Chinajoy将在上海新国际博览会宣布拉开序幕。做为我国网络游戏领域的大佬,网易游戏本次携集团旗下17款手机游戏出展,...