经验分享 未读
Sketch教程:如何改变路径方向我们经常会用到一些箭头进行指示说明,但是有的时候我们绘制曲线并不是按照我们想要的顺序进行绘制的,所以我们可以更改路径的方向。
可以使用下拉菜单为路径的起点和终点选择箭头。要切换它们出现在哪一端,请选择“ 图层”>“路径”>“倒序”。
这样就可以随心所欲的设置起点、终点的锚点样式了!
经验分享 未读
Sketch教程:如何使用文本样式选择一个图层,然后在“检查器” 的“ 外观”面板下选择显示为“ 无文本样式”的弹出菜单,然后在“组件弹出窗口”中,选择要应用的文本样式。你可以使用弹出式窗口顶部的搜索栏来帮助你找到所需的样式。
选择一个图层,并确保已应用要编辑的文本样式,然后对其样式进行更改。完成此操作后,你会看到“文本样式”名称旁边显示一个星号(*)。在这里,你可以单击“外观”面板中的以下按钮之一:
创建将创建一个新的文本样式,并在其中应用你的更改。
更新会将你所做的更改应用于此图层以及使用相同样式的任何其他图层。
分离将保留你对该层所做的更改,但删除文本样式。
使用更多(…),你可以选择重置样式(如果进行了更改)或重命名样式。
提示:你可以将“文本样式”包含在“库”中作为与他人共享的一部分。
经验分享 未读
Sketch教程:如何为样式编组在Sketch60版本中对于样式和组件有了进一步的改变。让我们来看看。
如何创建样式组#要使样式在零部件面板和插入菜单,使用格式为它们命名:Group-name/Style-name。例如,两个符号命名Background/Light和Background/Dark将一组名为Background的地方。
注意:对于Sketch 60及更早版本,你需要在一个组中具有两个或多个样式,然后它们才能出现在自己的子菜单中。
在零部件面板组织样式#你可以在“组件面板”中组织文本和图层样式。双击样式或组以将其重命名。你还可以将样式拖放到现有组中,或通过简单地将一种样式拖到另一种样式上来创建新组。
样式在“组件面板”中按字母顺序排列。
经验分享 未读
Sketch教程:如何管理图形的样式属性单击样式属性控件之间的空格上的拖动,以将其移动到其他属性上方和下方。
选中或取消选中每个样式属性旁边的复选框以启用或禁用它。如果对禁用的样式属性进行调整,则将启用它。
要完全删除样式属性,请单击它并将其拖出左侧的属性窗口,或者按住Control键单击并选择Remove,或单击面板顶部的垃圾箱图标(如果已禁用)。
经验分享 未读
SwiftUI 学习笔记 35:项目 4-6 总结“你不应该双手抓住捕手的手套度过一生-你必须能够向后扔东西。”
ForEach和List使用数字范围正如我已经说过几次,当我们在一个循环中创建视图时,SwiftUI需要了解如何唯一地标识每个项目,以便它可以对来回的数据进行动画处理。这本身并不复杂,但是有一种特殊的用法会把人们拒之门外,这就是range。
首先,让我们看一些代码:
123ForEach(0..<5) { Text("Row \($0)")}
从0到5循环播放,每次打印出一些文本。SwiftUI可以确保每个项目都是唯一的,因为它在一个范围内计数,并且范围没有重复的值。
实际上,如果你查看我们背后的SwiftUI代码,ForEach你会发现它实际上是这样的:
1public init(_ data: Range<Int>, @ViewBuilder content: @escaping (Int) -> Content)
视图生成器(实际上是构成视图的东西)将从范围中获得一个整数,并有望发送回一些可以呈现的视图内容。
现在尝试编写以下代码:
123Fo ...
经验分享 未读
SwiftUI 中 Button 两种常见书写方式:放置在内部和外部区别这里介绍以下 SwiftUI 中 Button 两种常见书写方式:放置在内部和外部区别
Button常见两种写法:
123Button("hello"){ // do nothing }
和
12345Button(action: { }) { Text("hello") }
第一种适合纯文本按钮,文字就是按钮。
第二种适合按钮有外轮廓,是一个图形按钮。可以通过调整Text的.frame来调整尺寸。
第一种直接放大在点击文字外面图形内部时无法触发点击按钮事件。
转载内容 未读
什么是图层的混合模式?它们的原理是怎样的?很多人会讲解设计师如何使用它们,很多深度文章会介绍公式,但是却没有将他们连起来的介绍,导致人们用起来总是云里雾里的。可能这个视频会给你答案。
P1
P2
经验分享 未读
SwiftUI 学习笔记 34:项目 6-3 动画 挑战这个技术项目起步比较容易,经过几番曲折,然后发展为更高级的动画,但是我希望它给你一个强大而灵活的想法!– SwiftUI的动画系统。
正如我之前所说,动画既要使你的应用看起来很棒,又要增加额外的含义。因此,除了让视图突然消失之外,你还可以添加一个过渡来帮助用户了解正在发生的变化吗?
另外,不要忘记在用户界面中看起来很有趣。我一直以来排名第一的最喜欢的iOS动画是Apple移至iOS 7时抛弃的动画,它是用于在电子钱包应用中删除通行证的动画–出现了金属粉碎机,将通行证切成十几条,然后掉了下来。它仅比当前动画花费了几分之一秒的时间,但它也很有趣。
挑战返回到Guess the Flag项目并添加一些动画:
当你点击正确的标志时,使其在Y轴上旋转360度。
使其他两个按钮淡出至25%的不透明度。
如果你点击了错误的标志?好吧,这取决于你–发挥创意!
代码点击错误的标志后,正确的标志会有一个无限循环的缩放动画
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 ...
经验分享 未读
SwiftUI 学习笔记 33:项目 6-2 动画有一位来自德国的著名工业设计师Dieter Rams。你可能没有听说过他,但你肯定已经看过他的作品- 从iPod到iMac和Mac Pro,多年来他的设计极大地启发了Apple自己的设计。他曾经说过:“好的设计使事物变得可理解和令人难忘;出色的设计可以使人留下深刻的印象。”
修饰符顺序在Swift中的修饰符根据顺序有关。例如
123456Button("Tap Me") { // do nothing}.background(Color.blue).frame(width: 200, height: 200).foregroundColor(.white)
和
123456Button("Tap Me") { // do nothing}.frame(width: 200, height: 200) .background(Color.blue).foregroundColor(.white)
所代表的含义有所不同。可以理解为代码由上往下运行。
多个动画修饰符控制动画当同时出现多个动画 ...
经验分享 未读
Sketch教程:更换 Data 数据快捷键我们使用Data功能插入数据之后快速更换可以用快捷键。
如何刷新和清除数据按⌘+ ⇧+ D或从“ 数据”菜单中选择“ 刷新数据 ” 以用来自数据源的不同图像或文本填充图层。
要删除数据源和图层之间的连接,请在“ 数据”菜单中单击“ 与数据源断开连接”。
注意:与数据源断开连接不会恢复图层的原始内容。
经验分享 未读
SwiftUI 学习笔记 32:项目 6-1 动画自从2001年Mac OS X推出以来,史蒂夫·乔布斯(Steve Jobs)推出了Aqua这个视觉主题,而该主题一直为macOS提供动力,他说:“我们使屏幕上的按钮看起来好得让人想要舔它们。”我不知道是否你在那时使用Macs,但是多年来,Aqua一直给我们提供类似玻璃的按钮,大头针条纹,拉丝金属等等,甚至到今天,“精灵”窗口也将外观最小化。
当我们制作具有出色视觉吸引力的应用程序时,用户会注意到。当然,它不会影响应用程序的核心功能,很容易过分设计,导致该核心有点丢失,但是当你正确操作时,漂亮的用户界面会带来一点额外的乐趣,并且可以帮助你将你的应用与众不同。
关于 CGFloat由于历史原因,主要是与Apple的旧API交互的原因,我们需要使用一种称为的特定数据类型CGFloat。
CGFloat出于各种意图和目的,它是Double一个不同的名称,但在较旧的硬件上,它使用的数字存储类型较小,称为Float。当这个选择很重要时,CGFloatApple不必在乎我们要为哪种类型的硬件建造,但如今几乎所有东西都在使用,Double因此,厌恶地盯着我们只是一小块遗产。
无论如何,所有这些都很重 ...
佳作推荐 未读
Behance 佳作推荐 - GUTA 咖啡 视觉设计在我看来,一个优秀的设计会激励设计师。这个作品一定会做到。
本文为转载文章,以下内容来源于
Guta Cafe Rebranding
M — N Associates
—Deriving unique Vietnamese street culture, Guta Cafe grows to be a familiar coffee brand for urban people could connect and enjoy the outdoor environment. Focusing on responsive and affordable store setup, they have grown fast, dominated Saigon and become one of the most popular convenient coffee chain for everyone in the city.gut ...
经验分享 未读
SwiftUI 学习笔记 31:项目 5-3 挑战巨石强森(Dwayne“ The Rock” Johnson)曾经说过:“成功并不总是与伟大有关,而是与一致性有关。一贯的努力导致成功;伟大将会来临。”
挑战
不允许答案少于三个字母或与我们的起始单词相同。对于三字母检查,最简单的操作是将一个检查放入isReal(),如果单词长度在三个字母以下,则返回false。对于第二部分,只需将起始词与输入词进行比较,如果相同则返回false。
添加一个称为的左键按钮项startGame(),以便用户可以在需要时以一个新单词重新启动。
在下方放置一个文本视图,List以便你可以跟踪并显示给定根词的玩家得分。如何计算分数取决于你,但是涉及单词数量及其字母数的内容是合理的。
自定的得分规则
拼写的单词所含字母数量
3
4
5
6
7
8
超过8
得分
1
2
4
8
12
20
40
并且在拼写第4个单词开始,每拼写成功一次额外加5分
代码1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545 ...
经验分享 未读
SwiftUI 学习笔记 30:项目 5-2 单词游戏尽量记住美国作家和讲师Dale Carnegie的一些著名话:
“不要害怕尽力去做看似小的工作。每次征服一个职位,都会使自己变得强大—如果你的小工作做得好,那么大的工作往往会照顾自己。”
在函数中使用guard来检查是否满足一定条件否则退出在函数中可以使用guard来检查,例如:
123guard answer.count > 0 else { return }
将单词全部小写并删除空格和换行符1let answer = newWord.lowercased().trimmingCharacters(in: .whitespacesAndNewlines)
输入框按下return执行函数1TextField("Enter your word", text: $newWord, onCommit: addNewWord)
在数组头部插入内容我们有的时候需要将内容插入到数组的第一个元素中:
1usedWords.insert(answer, at: 0)
禁用输入框第一个字母大写1.autocapit ...
经验分享 未读
SwiftUI 学习笔记 29:项目 5-1 单词游戏这个项目将是另一个游戏,尽管实际上这只是我介绍更多Swift和SwiftUI知识的一种偷偷摸摸的方式!游戏将向玩家显示一个随机的八个字母的单词,并要求他们用单词来制作单词。例如,如果入门单词为“ alarming”,则它们可能拼写为“ alarm”,“ ring”,“ main”等。
沿途你会见到的方式List,onAppear(),Bundle,fatalError(),等等-所有有用的技能,你会使用几年来。你还可以得到一些练习用@State,Alert,NavigationView,多,你应该一边可以欣赏-这是我们最后一次容易的项目!
List 的使用我们有的时候使用List作为列表时,列表的内容会分为静态数据和动态数据。
静态12345List { Text("Hello World") Text("Hello World") Text("Hello World")}
动态12345List { ForEach(0..<5) { Tex ...
经验分享 未读
Sketch教程:缩小被插入的图片所占用的空间在文档中添加大量图像会增加其文件大小,并减慢Sketch的速度。为了解决这个问题,你可以通过选择图层>图像>最小化文件大小来减小图像的大小。
提高了Sketch速度!
经验分享 未读
Sketch教程:编辑被插入的图片Sketch具有少量的位图图像编辑工具选择。要使用它们,请在“画布”上选择一个图像,然后双击它以进入编辑模式。从那里,你可以从Inspector中的两个工具中进行选择:
选择:让你选择图像上的矩形区域。
魔术棒:可让你单击并拖动图像上的任意位置以选择特定区域。阻力越大,选择公差越大。
做出选择后,按住⇧可以添加其他选择,或者按住⌥可以从选择中减去。你还可以使用以下工具:
反转:翻转你的选择,因此现在选择了未选择的区域。
裁剪:裁剪图层,使其仅包含所选内容。
填充:使用颜色弹出框中的颜色填充选择。
Sketch编辑位图对性能影响较大,推荐编辑位图使用位图编辑工具(例如:Photoshop)
转载内容 未读
用 AE + bodymovin 制作动画这篇文章简单总结了一下网页和移动App中动画的实现方法,bodymovin无疑是一个很好的解决方案,也可以说是最好的解决方案。
关于关于网页端动画实现web端做动画有多种形式,可以用CSS的animation,也可以用Canvas,或者是用JS控制CSS的属性形成动画。我们经常使用CSS做一些比较简单的动画,像过度、加载的动画,对于一些比较复杂的,可能会做成gif,或者是用Canvas,使用Canvas的控制粒度可以很细,同时工作量相对也比较大。做动画还有其它的方式,那就是使用After Effect(AE)/Flash/Premiere(Pr)/会声会影等视频软件,这种可视化的制作方式相对于直接写代码来说,会更容易简单自然。做动画本身应该使用工具进行制作,但是这种视频软件做出来的动画最后都是生成视频文件,并且通常体积还很大,没有办法直接移植到网页上去。然而好消息是,现在我们可以使用AE做动画,然后使用bodymovin插件导出成html文件进行播放。
关于移动应用动画实现使用 Gif,这种方式当然可行,但是使用 Gif 占用空间较大,而且需要为各种屏幕尺 ...
软件推荐 未读
软件推荐:ZXP Installer | 支持最新版 Adobe 软件的 ZXP 安装器之前使用的ZXPInstaller不支持我的最新版AfterEffect,所以当时苦苦寻觅,终于找到了可以使用的安装器。
下载地址蓝奏云分流(mac):
引用站外地址,不保证站点的可用性和安全性
aescripts + aeplugins zxp installer (setup).dmg
蓝奏云
官方下载地址(windows+mac):
引用站外地址,不保证站点的可用性和安全性
ZXP Installer
aescripts