首页 设计文章内容详情

Principle套圆引导页动效教程

2020-02-05 225 jason

之前在dribbble看到Cuberto团队发了这么一个引导页动效,感觉非常有趣,不过当时在想他用principle是如何实现的呢?这款软件又不能3D翻转…

https://dribbble.com/shots/8935861-Onboarding-animation-Made-in-Principle



后来啊,被我摸索出来了。凭借principle障眼大法,基本还原了原作的交互效果(emmm...过渡貌似不如原作丝滑),与其说这是一篇教程,不如说是一次UI动效的探索过程,分享给有缘人~



按照国际惯例,先上最终效果


难点

自然是按钮和背景的转场变换了



思路

按钮和背景的转场可以用两个圆通过缩放和拉伸变换得到

第1步 - 小白圆向右扩大

第2步 -大白圆向左压扁,大橙圆压扁同时与大白圆位置重合,橙色遮照防止大橙圆压扁时露出画板底色

第3步 -大橙圆向左拉宽,同时橙色遮照向左移出画板

第4步 -大橙圆缩小,同时移动到小白圆初始位置

这样就可以得到一次页面切换,再次切换只需要重复这个思路就可以了



Sketch视觉稿

sketch文件会分享给大家,画了几个体育icon,当然你也可以用自己的图形。打开源文件我们先查看一下图层,每个引导页包括:

1.skip跳过文案,文本图层导入principle会变成位图,无法进行文字颜色的变化(即使转曲也不行哦),所以这里只是参照,需要到principle画板中重新输入一下文本

2.页面内容图层组,其中包括主图形和文案,因为动效中这部分是整体位移变化,所以打组并加了扁平化命令principle flatten,导入principle后整个组会合成一张位图,图层可以更精简

3.页面按钮上的箭头

4.页面按钮


选中页面ABC三个画板,然后打开principle,点击导入,选择导入选中的画板



大圆画板是干嘛的,为什么不导入principle?

因为sketch的圆形导入principle后会变成一个最大圆角的正方形,在进行缩放变换的时候既要调宽高,还要调圆角,才能保证它始终是个圆,并且无法使其拉伸变成椭圆形;不过把圆cmd+c/cmd+v复制到principle中变成位图,就不会出现这种问题



Principle图层调整

上面提到导入后的个别图层需要调整

1.按照sketch中的参数重新输入一个Skip文本图层,导入的Skip层就可以删掉了

2.从sketch大圆画板中复制白圆粘到principle,调整位置和大小,替换掉页面A按钮图层

3.从sketch大圆画板中复制橙圆粘到principle,调整位置与白圆居中对齐

现在画板页面A变成了这个样子




好的,准备工作算是弄完了,接下来就是一顿操作见证奇迹~




1.选中画板[页面A]中的白圆,给他一个点击(Tap)事件并复制出画板[页面A 2],修改画板[页面A 2]底色为白色并删掉其中的页面A箭头,[页面A]中的箭头拖入白圆,让白圆作为箭头的父级,[页面A 2]中的白圆大小改为2000x2000,并与橙圆顶对齐,然后将内容层向左拖出画板


2.点开[页面A]到[页面A 2]之间的动画连线,第一个填充变化,就是画板底色的变化曲线,改为无动画。其他的曲线时长改为0.2s,并将白圆的位置、宽高四条变化曲线改为线性(Linear)


3.给画板[页面A 2]一个自动(Auto)事件并复制出[页面A 3],将[页面A 3]中白圆的宽高锁解开,宽度调为0,记录下他的水平位置x=142。将橙圆宽度也调为0,水平位置142


4.在画板[页面A 3]底部画一个橙色矩形,色值与橙圆一样,其他参数如图


5.点开[页面A 2]到[页面A 3]之间的动画连线,将橙圆的位置和宽度变化曲线变为线性,时长同样0.2s


6.给画板[页面A 3]一个自动(Auto)事件并复制出[页面A 4],将橙遮照向左移出画板,橙圆宽度拉回2000,水平位置-1818


7.点开[页面A 3]到[页面A 4]之间的动画连线,橙遮照的曲线调为线性0.1s


8.给画板[页面A 4]一个自动(Auto)事件并复制出[页面A 5],橙圆变为一开始白圆的状态(宽高91,水平位置142,垂直位置621)


9.点开[页面A 4]到[页面A 5]之间的动画连线,将橙圆的所有曲线调为线性0.2s


10.将[页面A 5]中的skip字体颜色改为蓝色#7540EE,把导入的画板[页面B]中的内容和箭头、以及sketch中的蓝圆复制过来,注意图层顺序,蓝圆调整宽高和位置覆盖在橙圆上面


11.现在画板[页面A 5]其实就是引导页的第二个页面,导入的[页面B]可以删掉了,[页面A 5]重命名为[页面B],把页面B内容复制到[页面A 4]中,并向右移出画板,蓝圆也复制到[页面A 4]中,不透明度和比例调为0,[页面B]中的箭头拖入蓝圆作为子级


12.点开[页面A 5]到[页面B]之间的动画连线,文本、页面B内容和蓝圆的曲线时长都调为0.2s,并且起点移动到0.1s处,蓝圆的曲线为线性



做到这里预览一下效果,第1-2页的转场动效就做完了!



[页面B]要往下进行还差一个大白圆,复制一个白圆2放在底部,这时文本/页面B内容/蓝/白 2这四个图层就与画板[页面A]的图层对应上了



接下来就可以按[页面A]的12个步骤往下做了,相信聪明的你可以举一反三做出后两页转场,有几点需要注意一下

1.[页面B 2]画板底色是蓝色,[页面C 2]画板底色是橙色

2.[页面B 3]中的小橙圆和[页面C 3]中的小白圆已经没用了,删掉

3.Skip在[页面C 2]不透明度为0,在[页面C 5]不透明度回到100

4.给画板[页面C 5]一个自动(Auto)指向[页面A],之间的动画曲线全部设为无动画,形成循环




如果哪里做的有问题,检查一下是不是图层命名和之前画板的图层冲突了,或者曲线没调好~







当然,如果你有不明白的地方或者有更好的实现方法,欢迎在评论区交流


感谢阅读


作者:咖喱l波特


转载请联系我


本文转载自网络,如有侵权,请联系删除。 仅供学习 分享 欣赏 不做任何商业用途 版权归原作者所 有 如侵必删