016aff5719dfde6ac725381201ffee.gif

动效神器升级！origami studio！

0151c55719dfb132f875a399847598.gif

Principle教程（四）：动效视图的运用（附源文件）

在动效视图里调整icon组内元素的过渡时间曲线和曲线模式，让icon组的形状在两个画板之间过渡快一些。

01fc4c585fe56da801219c77533e29.gif

调整Artboard 2里命名为icon的图标组，调整为想要的最后样子。在Artboard 2里，首先选择icon组里的Layer 2,把透明度调整为0，然后选择Layer 1，把角度调整为45度，再选择Layer 3，角度调整为135度。最后调整下Layer 1和Layer 3的位置。

019fd7585fe4d2a8012060c888983d.png

站酷推荐设计师

高高手老师

01d26c5a011591a801216a4b7386e2.gif

动效设计中的品质和体验

016adb5542f88f0000019ae9278d6a.jpg

sketch软件练习一款订餐app

做UI设计工作，除了好好学习并实践，这些软件也不能少

01eac76226c0b511013e8cd038d9ac.png

激活动效视图。打开工具栏的Animate,下方出现动效视图窗口，此时的窗口是空的，这时点击两个画板上方的箭头图标，激活视图。

011708585fe4afa801219c772395aa.png

制作文字的依次出现效果。依次选择和调整动效视图里的Text4、3、2、Text,把整个蓝色条拖动到上图中对应的时间点上。这个时候已经完成整个效果的制作，可以通过游览窗口查看整个动画。

010f41585fe5aea801219c77e6deb8.png

Principle教程（三）：联动视图的运用

时间节点在-340的位置时，选择蓝色形状图层，然后在联动视图里点击X轴栏下的“+”号图标，选择“Opacity”（透明度），把检查器里的透明度改为“0”，然后拖动时间线到节点“0”的位置时，检查器里的透明度改为“100”，最终的预览效果是，当青色卡片在中间时，右边的蓝色卡片消失，向左边移动时，蓝色卡片会渐变出现。

01fab758568acca8012060c868f959.gif

「右边是根据左边做的」 展示下分类hhh还有一些图标

011e1e592453a2b5b3086ed466315f.png

第二天@交互40天#设置

时间节点在“0”的位置时，选择绿色形状图层，然后在联动视图里点击X轴栏下的“+”号图标，选择“Opacity”（透明度），把检查器里的透明度改为“0”，然后拖动时间线到节点“340”的位置时，检查器里的透明度改为“100”，最终的预览效果是，当蓝色卡片在中间时，右边的绿色卡片消失，向左边移动时，绿色卡片会渐变出现。

01e72258568ae3a8012060c86cc7bf.gif

01e90c59dc8cf7a80121ae0cf4c7f0.png

模仿iOS11通知栏下拉效果

01219b59df41d7a801204463298cca.jpg

8只小猪分享式旅游 / Travel App

大厂设计师们都在使用的设计工具，早下班美美哒

Sketch Sketch是一款UI设计软件，他的软件界面主打清爽大方简洁的风格，在国内拥有一定数量的粉丝，在国外更是拥有大量的粉丝，尤其是像FACEBOOK这样大型公司也深深信赖这Sketch。Sketch也提供实时协作功能，你可以随时随地和你的团队同事一起工作。他还支持700多种扩展插件，让你随心所欲定制你的工作流程，完成做动画交互效果。

01fd4262218bdf11013e8cd0b170ea.jpg

没有分组的概念 真是一点都不乱呢

0147275922ee1ca801216a3e304f07.png

四十天交互训练

0150805dde9b4fa8012159724a51da.png

心晴app-心理

时间节点在“340”的位置时，选择蓝色形状图层，然后在联动视图里选择先前蓝色图层的“Opacity”（透明度）时间线，把检查器里的透明度改为“0”，最终的预览效果是，当绿色卡片在中间时，左边的蓝色卡片消失，向右边移动时，蓝色卡片会渐变出现。 到这里就结束了，通过预览窗口可以查看实现效果是否正确。有不对的位置可以细心查看反复琢磨其中的原理。

0182de58568be6a801219c77e78712.gif

0100a15987d05aa8012156033ff844.gif

2017年上半年总结

制作动画的转场效果。选择Artboard 1,点击事件触发器（闪电图标）选择Auto，拖到Artboard 2上。

0157d0585fe469a801219c77f15d89.png

018e7f581c65a3a84a0e282b3e2929.png

100个app

01e60f5cc2cbdda8012141686b99d3.png

Annotation

sketch绘制3枚锤子图标 | 附sketch源文件

0139fb58a15273a801219c7770c91a.jpg

01e49e58dc7b6da801219c776d0472.jpg

护慧云课堂原型图

01229c6179027311013f22cf922cd7.png

会议APP

01iwtxddkcxknhbdjmxdyw3535.jpg

政府网站

0199815a07f571a80121985c0bb59c.gif

app页面滑动动效

01d84f5925865ea801216a3ee7e3b4.png

第三天@交互40天#设置2级

01217d5a4068daa801219741cd4364.jpg

作品集

准时下班？小白看了都会的figma高精尖教程！