qt制作一个画板_如何直接用Sketch制作动画|Sketch插件|

本期的sketch插件来为大家讲解如何制作动画，看来看看马克笔设计留学的MUzi老师的教程吧！

安装

1.下载并解压 Anima Tookit.ziphttps://timeline.animaapp.com/
2.双击 Anima Tookit.sketchplugin 完成安装

使用

1.执行 Plugins > Anima Tookit > Show/Hide Panel 或使用快捷键 command + control + A 开启面板（Anima Tookit 安装后重启 Sketch 默认自动开启面板）。
2.选择面板最右侧 Timeline 模块。
3.选择一个画板或组，点击 Animate Selection 创建关键帧动画，新用户提供 14 天试用。

马克笔设计留学的MUzi老师就以一个加载动画为例来详细讲一下Timeline该如何使用：
首先新建一个Sketch文件，创建一个如下图这样的图案。这里直接创建一个圆形，然后将它的描边设置为角度渐变就可以了！

选择第一个画板，然后单击动画选择。

使用TimeLine面板为组或画板设置动画。

关键帧

进入Timeline后，你可以看到软件已经自动创建了第二个关键帧（是复制原始画板），并添加了动画流。用Timeline制作动画的方式和很多其他制作动效的软件一样，就是简单的补间动画，通过改变关键帧的大小，位置，颜色，透明度等，随后插件自动为关键帧生成补间动画，只需拖放或播放图层属性即可为其设置动画。
所有图层都显示在所有关键帧上，您可以使用不透明度显示或隐藏它们以使其淡入或淡出。您可以根据需要添加任意数量的关键帧。
在Timeline中，关键帧是一个包含所有涂层的画板，可以从sketch的画板或组中创建，存在于其中的所有图层初始关键帧将存在于其它图层关键帧中
不能在两者之间添加或删除图层关键帧，但可以显示和隐藏图层
可以有任意数量的关键帧，但是要创建一个动画至少需要一个初始关键帧

接下来我们尝试让这个圆环旋转360度，做出一个加载中的动画效果，

过渡和时间表

每两个关键帧上方的箭头定义它们之间的过渡。选择箭头将在底部显示其对应的“时间轴”面板。

使用“时间轴”面板，将动画持续时间设置为1秒，并将曲线设置为“线性”以允许其以恒定速度旋转。

工具栏

进入时间轴模式后，您将在顶部工具栏中看到一组时间轴操作。

以下是两种播放方法
Play One – 在2个关键帧之间播放单个过渡。
Play All – 在循环中播放所有关键帧过渡。

做好了！接下来我们来导出吧！
完成制作后，单击“Export GIF”导出Gif图或 “Export Video”导出视频，以保存设计。

文章作者：MUzi
南安普敦大学交互设计硕士
擅长交互设计与用户体验相关专业辅导和课程知识体系建立

任何关于院校和作品集的问题
欢迎随时和马克君沟通
知无不言，言无不尽

原文链接：http://www.makebi.net/32628.html

qt制作一个画板_如何直接用Sketch制作动画|Sketch插件|相关推荐

qt制作一个画板_基于Qt的画图板的设计与实现(含录像)
基于Qt的画图板的设计与实现(含录像)(任务书,开题报告,外文翻译,毕业论文20000字,程序代码,答辩PPT,答辩视频录像) 摘要本文的主要内容是记述画图板的设计与实现课程设计中的一些关键技术和辅 ...
直接用IDEA刷leetcode的插件--Leetcode editor （保姆级安装示例教程）
直接用IDEA刷leetcode的插件–Leetcode editor (保姆级安装示例教程) 你是否还在发愁刷 leetcode 不好debug? 你是否还在往IDEA里粘代码调试好再"C ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTY ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCT ...
qt制作一个画板_Qt 一个简易画板实现(Graphics View).pdf
Qt ⼀个简易画板的实现(Graphics View) Qt 学习之路(32): ⼀个简易画板的实现(Graphics View) 这⼀次将介绍如何使⽤ Graphics View 来实现前⾯所说的画 ...
nlp自己制作一个语料库_第119天的nlp论文总结了一个论点注释的科学出版物的语料库...
nlp自己制作一个语料库内置AI NLP365(INSIDE AI NLP365) Project #NLP365 (+1) is where I document my NLP learning ...
python可以制作网站吗_小白如何入门Python? 制作一个网站为例
首先最重要的问题是为什么要学习python?这个问题这个将指导你如何学习Python和学习的方式. 以你最终想制作一个网站为例.从一个通用的学习资源列表开始不仅会消磨你的激情,而且你获得的知识很难应用 ...
dw网页制作入学教程_简单的手机网页制作教程
很多小白会以为建站只能通过电脑,但实际上,用手机也能顺利建站,而且操作非常简单,不需要你懂技术知识哦!下面就跟大家说说手机网页制作教程: 首先,你需要选择一个比较好用的手机网页制作app.尽量找知名度 ...
hbuilderx制作简单网页_简单的手机网页制作教程
很多小白会以为建站只能通过电脑,但实际上,用手机也能顺利建站,而且操作非常简单,不需要你懂技术知识哦!下面就跟大家说说手机网页制作教程: 首先,你需要选择一个比较好用的手机网页制作app.尽量找知名度 ...

qt制作一个画板_如何直接用Sketch制作动画|Sketch插件|

安装

使用

关键帧

过渡和时间表

工具栏

qt制作一个画板_如何直接用Sketch制作动画|Sketch插件|相关推荐

最新文章

热门文章