1、手势向下移动； 2、内容随手势移动； 3、文字顶端出现时，按钮出现； 4、手势继续下移； 5、内容随手势继续下移； 6、按钮跟内容一起下移； 7、图片随着内容的下移，由模糊转清晰； 8、手势消失。

01b2a1568a2ccc32f8759f0400558a.png

Keynote交互动画2加强版&附教程

1、手势下移； 2、内容和按钮随手势下移； 3、图片同时放大； 4、手势消失，内容回到原点、图片缩小回去--这里用的是神奇移动。

014ade568a2cce32f8759f04fa7cd8.png

1、手势上滑-移动动作； 2、文字内容随手势向上-也是移动动作（注意这里要将按钮和文字内容分开）； 3、按钮和文字一起随手势移动-移动动作； 4、此时内容和图标接近屏幕顶部，按钮消失-弹入弹出动作； 5、手势继续向上滑动-移动动作； 6、内容随手势移动，按钮已消失-移动动作； 7、手势消失-模糊动作。

0161b8568a2ccb6ac7251bb603539a.png

1、手势圆点移动上滑； 2、文字和按钮一起跟着手势移动上滑； 3、图片随着内容的上滑，逐渐模糊（这边用的渐隐渐现）； 4、最后手势圆点消失。

0176bd568a2cce6ac7251bb62a923c.png

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

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

01f1c7584d8173a801219c770b5280.gif

选中文字组，选用检查器里的Scroll(滚动)功能，然后对Clip Sublayers打钩，再进行编辑。

01f09f584d7d84a801219c77f05bde.gif

01170858c9055ea801219c771978eb.png

练习

选中3个色块编组后（编组快捷键和sketch里一样），选用检查器里的Page(翻页)功能进行编辑。

0110c0584d7d2fa801219c77d95ae6.gif

写给新手设计师看的设计经验（陆续更新）

0144105d802c79a8012060beedb7ad.png

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

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

01844258568a05a8012060c8125a33.gif

从业五六年的经验直说，这些软件好用到爆

017eff620905c311013e8cd0cae867.png

用事件触发器里的Tap来进行转场效果。

01bc04584d81d3a8012060c8a77427.gif

017fdb554379ff0000019ae90c2367.jpg

MAC界面

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

01e72258568ae3a8012060c86cc7bf.gif

0142fa55fb862432f875a13298ff7f.png

 Sketch 基础中文教程

01f1ba5ef6f45ba801215aa07d2299.jpg

平面印刷

继续完善每个页面之间的转场效果。在GIF最后的预览效果里，当标签TWO页面进标签ONE页面时，会发现文字是从上到下显示，这个问题是因为两个Artboards里的btn组命名相同，接下来改一改。

01216a584d81d7a801219c772e568c.gif

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

01fab758568acca8012060c868f959.gif

01e50f5c8679dba80120af9af1a77a.png

知识付费产品V1.0PRD

波浪字体怎么设计-看这里！！！

01nsphnwyps0b4rigwwxyv3236.png

01c9fa5f171d32a801215aa093d563.jpg

VFX Graph

自主研发自动生成各种图表设计神器免费分享大家

013b175d50d66ba8012187f42d1915.gif

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