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

658806c272c0300dfd27b2ed3c54fdfd.png

本期的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文件,创建一个如下图这样的图案。这里直接创建一个圆形,然后将它的描边设置为角度渐变就可以了!

2f588275873f0550c40da03aa0f9df51.png


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

c560c997d70d98f01908b2ba5f641b88.png


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

6793f4dfe5035826e1adc3fb5659930f.png

关键帧


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

808c07f651de0cfd9a5c466984a746dd.png


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

e68655bd35829cc33c6b0feceffa2f96.png

过渡和时间表


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

cdab7e1bc63d72149d84b5a4937bbfdd.png


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

713de478c25fd23a29c5caabcfd082b5.gif

工具栏


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

c5a9bcb8b3c2ecb2e3f7d9648a3bb26e.png


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

9badbe17ec6fc243c793a2bb663b47e1.gif

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


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


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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/306541.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法设计与分析——动态规划——最大字段和问题

动态规划解决问题是自底向上。原问题的规模是n个元 素。这n个元素不好考虑,我们先考虑n-1个元素,这样还不好考 虑,我们考虑n-2个元素,这样依次递减,最后问题规模变成一个 元素。但是我们发现,在递减的过程中…

如何在 Asp.Net Core 中 管理敏感数据

译文链接:https://www.infoworld.com/article/3576292/how-to-work-with-user-secrets-in-asp-net-core.html在应用程序开发时,你肯定会有一些特别需要保护的数据,这些数据通常是非常机密的,敏感的,禁止和别人共享&…

C#开源项目:SiMay远程控制管理系统

C#开源项目:SiMay远程控制管理系统Gitee仓库截图下方基于原项目仓库readme系统介绍SiMay远程控制管理系统是一个Windows远程控制系统,底层基于IOCP的异步通信模型,能对海量客户端实时监控,目前功能已实现:逐行扫描远程…

算法设计与分析——回溯法——01背包问题

//0-1背包问题 回溯法求解 #include<bits/stdc.h> #include <iostream>using namespace std; template<class Typew,class Typep> class Knap {public:Typep Bound(int i);void Backtrack(int i);Typew c; //背包容量int n; //物品数Typew *w; //物品重量数…

排列组合思维导图_排列组合——排列数专题

在上篇关于排列组合主要考点的介绍中&#xff0c;正男老师提到&#xff1a;排列组合考点通常可以拆分为排列数考点和组合数考点。排列数考点相关试题可以细分为2类&#xff0c;分别为&#xff1a;穷举问题和限制条件问题。本期正男老师就从近六年内的5道涉及排列数考点的真题入…

高级的说服,从不讲道理

大家好&#xff0c;我是Z哥。你会发现有一些人&#xff0c;他们好像说话从来都没有说服过别人&#xff0c;天天被别人牵着鼻子走。但有些人一说的话你就觉得特别对&#xff0c;就应该按照他说的办。很明显&#xff0c;我们都希望自己是后者。能不能说服人&#xff0c;不管在生活…

算法设计与分析——分支限界法——n皇后问题

一、问题描述 问题描述&#xff1a;在nn格的棋盘上放置彼此不受攻击的n个皇后。按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。n皇后问题等价于在n*n的棋盘上放置n个皇后&#xff0c;任何2个皇后不放在同一行或同一列或同一斜线上。 …

IdentityServer4系列 | 授权码模式

一、前言在上一篇关于简化模式中&#xff0c;通过客户端以浏览器的形式请求「IdentityServer」服务获取访问令牌&#xff0c;从而请求获取受保护的资源&#xff0c;但由于token携带在url中&#xff0c;安全性方面不能保证。因此&#xff0c;我们可以考虑通过其他方式来解决这个…

算法设计与分析——算法思想总结

算法设计与分析 1、分治法 分治法的基本思想是将一个规模为n的问题分解为k个规模较小的子问题&#xff0c;这些子问题相互独立且与原问题相同。递归的解这些子问题&#xff0c;然后将各子问题的解合并得到原问题的解。 分治法所能解决的问题一般具有以下几个特征&#xff1a…

pearson相关系数_Pearson(皮尔逊)相关系数

由于使用的统计相关系数比较频繁&#xff0c;所以这里就利用几篇文章简单介绍一下这些系数。相关系数&#xff1a;考察两个事物(在数据里我们称之为变量)之间的相关程度。如果有两个变量&#xff1a;X、Y&#xff0c;最终计算出的相关系数的含义可以有如下理解&#xff1a;(1)、…

聊一聊ABP vNext的模块化系统

官网&#xff1a;https://abp.io/开源&#xff1a;https://github.com/abpframework/abp EasyAbp&#xff1a;https://easyabp.io/Abp 模块&#xff1a;https://abp.io/packages模块化系统ABP vNext 的世界观在 Abp vNext 框架里面&#xff0c;模块系统是整个框架的基石&#x…

双离合档把上按钮作用_英特尔展示双屏幕概念笔记本:带有双铰链

本文转自&#xff1a;IT之家作者&#xff1a;嗜橙近日&#xff0c;英特尔在位于圣克拉拉总部深处的一个半秘密实验室里&#xff0c;公布了配备两个屏幕的概念笔记本电脑。在近日的台北电脑展上&#xff0c;华硕发布了双屏笔记本&#xff1b;不久之后&#xff0c;英特尔也公布了…

浏览器眼中的0

0作为一个特殊的符号&#xff0c;经常会跟浏览器打交道&#xff0c;在不同的场景下&#xff0c;0代表的意思不尽相同&#xff0c;因此浏览器眼中的0不一定就是符合人们感官上的认识&#xff0c;那究竟浏览器会怎么对待它呢&#xff0c;今天我们就来探究一下各种场景中0的含义及…

剑指offer——01二维数组中的查找.

class Solution { public:bool Find(int target, vector<vector<int> > array) {int m array.size();//得到该二维数组的行数if(m0) return false;//如果行数为0则直接退出int n array[0].size();//得到该二维数组的列数if(n0) return false;//如果列数为0则直接退…

GraphQL:验证与授权

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述&#xff0c;使得客户端能够准确地获得它需要的数据&#xff0c;而且没有任何冗余&#xff0c;也让 API 更容易地随着时间推移而演进&#xff0c…

python 创建目录_第二天:Python中目录及文件操作

Python创建目录使用os模块mkdir创建一级目录&#xff0c;但不会创建父级目录#创建test目录&#xff0c;成功 import os os.mkdir(E:test)##若无父级目录python,则创建test目录失败 import os os.mkdir(E:pythontest)makedirs可创建父级目录import os os.makedirs(E:pythontest)…

计算机科普小知识——U盘格式化

在格式化U盘的时候我们需要选择文件系统类型&#xff0c;分别有FAT32&#xff08;默认&#xff09;&#xff0c;NTFS和exFAT这三种格式 常见格式一&#xff1a;FAT32 FAT32是windows传统的文件格式&#xff0c;对每个分区只有4GB的容量&#xff0c;是任何一种usb存储设备都会预…

.NET 5干货来袭 嘉宾李杨桂素伟

Azure Show大家好&#xff0c;欢迎来到Azure Show第八期&#xff0c;好久不见&#xff01;因为工作的原因有两个月没和大家见面&#xff0c;但12月Azure Show回归&#xff0c;会有更多大家感兴趣的话题&#xff0c;也有更多嘉宾与大家见面。除了这一期&#xff0c;在12月我们还…

setnx和expire合成一条指令_Python 为什么只需一条语句“a,b=b,a”,就能直接交换两个变量?...

从接触 Python 时起&#xff0c;我就觉得 Python 的元组解包&#xff08;unpacking&#xff09;挺有意思&#xff0c;非常简洁好用。最显而易见的例子就是多重赋值&#xff0c;即在一条语句中同时给多个变量赋值&#xff1a;>>> x, y 1, 2 >>> print(x, y) …

计算机科普小知识——Win7系统32位与64位的区别,该如何选择?

Win7系统32位与64位的区别 首先我们要知道32位和64位指的是什么。其实这是根据CPU内的寄存器字长来确定的&#xff0c;计算机内部数据都是二进制来呈现的&#xff0c;32位的计算机CPU一次最多能处理32位的二进制数据&#xff0c;而64位的计算机CPU一次最多能处理64位的二进制数…