恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
教你用 Principle 做卡片翻转动效
0.0°
2019-08-23 原创文章 教程 举报 1614 9 7 1

这篇文章主要分享了制作卡片翻转动效的方法,以及如何提高层次感的一些建议。

最近遇到了一个问题,就是需要用 Principle 做一个卡片翻转的动效,想破头也没想出来怎么实现,卡了我很长时间。后来在 B站上看到一个视频,我才恍然大悟,这么简单地道理我怎么没想到呢...

 

由于这个动效真的很简单,我相信没用过 Principle 的同学看完也能立即上手,话不多说,接下来进入正题。



一、原理


首先讲一下这个动效的原理,简单来说就是:面变成线,线再变成面。

先是正面,由面收缩成竖着的一条线,然后是背面,由竖着的一条线舒展成面。

如下图:

Image title


连起来做成效给人的感觉就是翻转了一下,如下图:

Image title



二、步骤


好了,讲完原理进入步骤环节,艾瑞巴蒂来斯够~


1)第一步


Principle 可以直接导入 sketch 画板,所以第一步在 sketch 里把素材准备好,需要准备的东西:2个正面卡片、2个反面卡片,分别装在4个画板中。如下图所示:

Image title


然后打开 Principle -点击左上角的导入按钮-导入页面,如下图:

Image title


导入进来后是这样子的,如下图:

Image title



2)第二步


找到页面左下角的图层区域,把名字全部改成一样的。不同画板中的元素,只有名字相同,才能形成补间动画。如下图:

Image title


我们前文说过原理,所以它的变化顺序应该是:面-线-线-面。所以要把画板2、3 中的扑克牌,变成一条线,具体操作就是把他们的宽度变成1。

别忘了居中对齐一下,由于宽度变成1,所以画板2和3在图层区域已经看不到东西了。如下图:

Image title



3)第三步


点击第一个画板中的扑克牌,会出来一个“小闪电”按钮,点击它,在弹出的弹窗中选第一个“点击”,长按拖到第二个画板上。


Image title

Image title


然后点击第二个画板的黑色区域,整个画板右边,会出现一个“小闪电”标志,这次在弹窗中选最后一个“自动”,也是长按它拖拽到第三个画板上。

Image title


重复上一步操作,在第三个画板处选择“自动”-拖到第四个画板上,大功告成。

Image title



4)总结


画板1 到画板2 选择“点击”,画板2 到画板3 再到画板4,都选择“自动”。然后页面的右上角有预览窗口,可以在里面通过点击预览做好的动效。如下图:

Image title



5)导出

点击预览窗口的“摄像头”图标,可以录制视频,然后可以导出视频格式,也可以导出 GIF 格式。

Image title



三、细节


敲黑板,有没有觉得这个动效看起来比较单调?其实我们可以给它增加一些变化,让它看起来更有层次感。比如加上缩放和阴影的变化。具体操作如下:

 

1)阴影


为了让动效有个阴影过渡的变化,每个画板里的扑克牌都加上黑色遮罩,要和它们的尺寸相对应,该面的面,该线的线。然后它们的透明度依次是:画板一0%、画板二90%、画板三90%、画板四0%。别忘了名字要改成一模一样,弄完以后是这样的(添加矩形的方法和 sketch 一样,如果是不规则图形,也可以直接把做好的阴影图片拖进 Principle),如下图:

Image title



2)缩放

加完阴影,再加缩放变化,具体操作是:选中画板一、画板二里的全部元素,把比例都改为0.8倍大小,如下图:

Image title


然后去预览里点击看一下效果:

Image title



四、缺点


我们都知道,眼睛看到的事物都遵循着透视原理,即近处的事物看起来大,远处的事物会看起来小,这种方法的缺点就是没有透视效果,失去了一些空间上的立体感。



五、划重点


今天主要讲的一件事是用 Principle 做卡片翻转动效,我总结了3点:


1.名字一定要保持一致,才能形成补间动画;


2.添加阴影和缩放变化,能让动效更有层次感;


3.这个动效做起来比较简单,但缺乏透视效果。



参考引文:

《【Xd教程】如何实现卡片翻转效果》http://1t.click/NXp



更新:2019-08-23

收藏

9人已收藏

青山_

士为知己者死,女为悦己者容

  • 3

    作品

  • 13

    粉丝

  • 32

    关注

  • 关于滑块,不可忽视的三个知识点
  • APP 设计中的小红点

    猜你喜欢

      2019-08-23 原创文章 教程 举报 1614 9 7 1

      教你用 Principle 做卡片翻转动效

      0.0°

      你确定要举报教你用 Principle 做卡片翻转动效

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年08月23日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      7
      9
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录