Sketch怎么制作列表页酷炫闪动动效
作者:暂无发布时间:暂无

1、【打开】Sketch软件,【打开】Sketch素材。具体效果如图示。

150807769834.jpg


2、【打开】Principle软件,【新建】任意大小的画布,单击【文件】-【从Sketch导入】。具体效果如图示。

15080777035491.jpg


3、【删除】画面多余的素材,【切换】Sketch软件,【选择】图片素材,按【Ctrl+C】复制,【返回】Principle软件,按【Ctrl+V】粘贴,移动至

合适的位置。具体效果如图示。

15080777083205.jpg


4、【切换】Sketch软件,【选择】图片素材,按【Ctrl+C】复制,【返回】Principle软件,按【Ctrl+V】粘贴,移动至合适的位置。【删除】底层关联素材,【选择】点击图层,单击图像选择【按下】拖动箭头至合适的位置。具体显示如图示。

15080777132423.jpg


5、【切换】Sketch软件,【选择】毛玻璃素材,按【Ctrl+C】复制,【返回】Principle软件,按【Ctrl+V】粘贴,移动至合适的位置。【复制】点击图层,移动至合适的位置,调整图层顺序单击图像【选择】释放,拖动箭头至合适的方向。具体显示如图示。

15080777181533.jpg


6、【重命名】图层,【复制】模糊图层,调整图层顺序,移动至合适的位置。【透明度】0,【选择】其他图层,【缩放】0。具体显示如图示。

15080777243808.jpg


7、【右击】动效时间轴,【选择】缓入缓出。具体显示如图示。

15080777287870.jpg


8、【选择】模糊面板上的点击图像,【选择】长按,拖动箭头至合适的方向。具体显示如图示。

15080777337258.jpg


9、【选择】最右侧点击图像,【缩放】0,【不透明度】0。具体显示如图示。

15080777398920.jpg


10、【新建】图组,【切换】Sketch软件,依次选择剩余的图片关联素材,按【Ctrl+C】复制,【返回】Principle软件,按【Ctrl+V】粘贴,排列至合适的位置,【重命名】图层。具体显示如图示。

15080777446436.jpg


11、【选择】中间画面的点击图层,选择【长按】,拖动箭头至合适的方向。具体显示如图示。

15080777485144.jpg


12、【复制】3图层,移动至中间画面上方合适的位置,【不透明度】0,【缩放】0。具体显示如图示。

15080777537320.jpg


13、【复制】12图层,移动至中间画面合适的位置。具体显示如图示。

15080777582114.jpg


14、【选择】所有的关联动效时间轴,拖动至合适的时间格,添加【缓入缓出动效】。具体显示如图示。

15080777642383.jpg


15、【选择】3图层动效时间轴,拖动至合适的时间格。具体显示如图示。

15080777698914.jpg


16、【切换】Sketch软件,【选择】箭头素材,按【Ctrl+C】复制,【返回】Principle软件,按【Ctrl+V】粘贴,排列至合适的位置。具体显示如图示。

15080777766659.jpg


17、【复制】箭头图层,移动至合适的位置。【修改】动效时间轴,添加【缓入缓出动效】。具体显示如图示。

15080777803497.jpg


18、【选择】画板3上方的箭头,单击【按下】,拖动箭头指向左侧画板。具体效果如图示。

15080777859983.jpg


19、【选择】1图层,点击【自动】,拖动箭头返回所在页面。具体显示如图示。

15080777903334.jpg


20、【删除】页面上所有的元素,【切换】Sketch软件,【复制】关联图片素材,【粘贴】至Principle软件合适的位置。具体显示如图示。

15080777967460.jpg


21、【选择】右侧的返回按钮箭头,单击选择【按下】,拖动箭头【返回】最左侧画板。具体显示如图示。

15080778019986.jpg


22、【复制】右侧所有的元素,移动至合适的位置。【选择】返回图层,【旋转】至合适的角度,【选择】返回动效图层,添加【缓入缓出动效】。

具体显示如图示。

15080778067302.jpg


23、【选择】返回下方的其他动效图层,移动时间轴至合适的位置。添加【缓入缓出动效】。具体显示如图示。

15080778122365.jpg


24、【复制】返回图层,调整返回图层的顺序和位置。【选择】最右侧返回图层,单击【按下】,拖动箭头至最左侧画面。具体显示如图示。

15080778163253.jpg


25、【移动】返回2动效时间轴至合适的位置,添加【缓入缓出动效】。具体显示如图示。

1508077822627.jpg


26、最终动态效果如图示。

15080778516793.gif



特别声明:以上文章内容仅代表作者本人观点,不代表虎课网观点或立场。如有关于作品内容、版权或其它问题请与虎课网联系。
500+精品图书
20G学习素材
10000+实用笔刷
持续更新设计模板
立即领取

下载虎课APP

随时随地学技能
APP更方便
每天免费学课程
下载虎课网APP
随时随地学海量会员教程
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证