01abb15bdc0537a80121ab5d227e8f.png

APP动效展示

Adobe XD 最新中文包及首页汉化文件 

01caca59a18ff4a801211d25ad3d24.png

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

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

0182de58568be6a801219c77e78712.gif

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

01e72258568ae3a8012060c86cc7bf.gif

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

01fab758568acca8012060c868f959.gif

01d8265a155082a801205187fc1362.png

Driving recorders

Principle教程（二）：静态、拖拽、滚动、翻页（附源文件）

导入成功后有个细节可以注意一下，就是sketch里3个Artboards命名都是iPhone 6，到了Principle里命名按照顺序自动变为了iPhone 6、7、8。

01dafc584d7c38a801219c7789d7b9.png

012f0757b3c7c80000018c1b193a6f.png

Sketch 汉化插件

01hpmvaphhtxv7qefxjoji3339.gif

写给前端同学的Figma使用指南

01b5fb5dde9cafa80120686b728549.png

低保真练习

选择青色形状图层，打开联动视图，点击X轴栏下的“+”号图标，选择“Opacity”（透明度），在时间节点“0”的时候，检查器里的透明度改为“0”，鼠标拖动时间节点到-340的位置将检查器里的透明度改为“100”，最终的预览效果是，当蓝色卡片在中间时，左边的青色卡片消失，向右边移动时，青色卡片会渐变出现。备注：鼠标移到时间节点区域上，按住键盘空格键+鼠标点击可以左右拖动时间线区域。

01844258568a05a8012060c8125a33.gif

016ea855a206656ac725bff7739f0f.png

一周年－临摹

677ff4db1d2f2o0o6pxazd5943.png

酒店行业小程序

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

011e1e592453a2b5b3086ed466315f.png

第二天@交互40天#设置

01b4a15cdaa0b5a8012141686b2203.png

UI交互

012fc760f78eef11013f47204462be.png

Design specification

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

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

010f41585fe5aea801219c77e6deb8.png

手机界面的音乐转盘播放器ui设计

01squ3kjna9lhgmkya1eie3439.png

012f2b5c617df4a801203d226963b1.png

vlog App原创概念设计

0161af569ba12332f87574bee8752c.png

My home page

01iwtxddkcxknhbdjmxdyw3535.jpg

政府网站

010733589dbdbfa801219c77b2405f.png

智能系统-iwatch应用-练习TEST1

01ba2c5d50dcdba80120695cc11396.png

Google Maps拖动操作模拟

01911b5a3a71f1a801201a1f662808.png

闲暇作品

动效可交互小作品－二十四季app

0118ac58944870a8012060c86e7fb6.png

01d84f5925865ea801216a3ee7e3b4.png

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

Bitbill H5高级滑动视觉差（附Principle设计源文件）

01c6735a24ae3fa80120ba38e73256.png

对相同命名的组，重新命名。最后在预览里进行交互，发现显示正常了。