首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

做不好阴影和模糊?UI设计师看这一篇就够了

在上图的示例中,阴影在Y轴上向下移动了20个点,然后进行了Blur(模糊)操作。 ?...后者必须是大于0的数字,而X和Y也可以是负数,从而几乎在每个方向上都可以移动阴影。 ? 我们还可以通过向同一对象添加多个阴影,从而来堆叠阴影,以获得非常有趣的结果。...在某些情况下,它们可用于使对象看起来更逼真,但应适度使用。 ?...我们可以将其应用到屏幕之间的过渡中,也可以通过选择性地模糊背景来显示一些真实的景深。 ? 使用高斯模糊作为阴影 ? 这种类型的模糊,可以帮助我们在对象下方生成非标准的点阴影。...如您所见,当将三个白点放置在“投射”背景模糊的对象下时,它们会发生不一样的变化。 运动模糊(Motion Blur) 这种模糊效果,模拟对象在由角度值定义的方向上的运动。

3.2K21

这11个新的Figma隐藏技巧,大幅提升你的设计效率

这可以节省您的时间并使裁剪过程更快更容易。 这使您可以快速专注于需要处理的图像部分,而无需花费大量时间摆弄遮罩工具。 2.无限制调整大小 在无法自由调整大小的Frame‍上工作非常令人沮丧。...例如,您的食指可以触及“Y”、“H”和“N”等键,而您的无名指可以向下移动至“Option”键。您的小指可以向下移动到“Shift”或“Tab”键,具体取决于您需要使用什么。...首先,它使您的画布保持整洁有序,这使得四处移动、调整元素大小和导出屏幕变得更加容易。其次,它允许您快速检查设计的响应能力,因为您可以看到框架内的元素如何适应不同的屏幕尺寸。...您的死frame现在将重新附加到所选组件,以便根据需要轻松编辑和更新它们。 9.选择嵌套对象 这使您可以快速轻松地选择画布上的对象,而不管它们在层次结构中的位置如何。...要使用此功能,请将光标悬停在要选择的对象上。如果对象是框架或组,您可以通过单击对象名称周围的空白区域来选择它。如果对象在框架或组内,您可以通过将光标悬停在它上面并单击它来选择它。

4.8K51
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    React.js的生命周期

    在本节中,将学习如何使Clock组件真正 可重用和封装 它将设置自己的计时器,并每秒更新一次. 从封装时钟开始 ?...接下来,我们将使Clock设置自己的计时器并每秒更新一次 4 将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要 每当Clock组件第一次加载到DOM时,我们都想...[生成定时器],这在React中被称为挂载 同样,每当Clock生成的这个DOM被移除时,我们也会想要[清除定时器],这在React中被称为卸载 我们可以在组件类上声明特殊的方法,当组件挂载或卸载时,来运行一些代码...7 数据自顶向下流动 父组件或子组件都不能知道某个组件是有状态还是无状态,并且它们不应该关心某组件是被定义为一个函数还是一个类。 这就是为什么状态通常被称为局部或封装。...除了拥有并设置它的组件外,其它组件不可访问。 组件可以选择将其状态作为属性传递给其子组件: It is {this.state.date.toLocaleTimeString()}.

    2.2K20

    ReactJS实战之生命周期

    更新UI可直接调用 ReactDOM.render() 改变输出 那么如何使Clock组件真正 可重用和封装?它将设置自己的计时器,并每秒更新一次。...结果如下 接下来,我们将使Clock设置自己的计时器并每秒更新一次 4 将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要 每当Clock组件第一次加载到DOM...时,我们都想[生成定时器],这在React中被称为挂载 同样,每当Clock生成的这个DOM被移除时,我们也会想要[清除定时器],这在React中被称为卸载 我们可以在组件类上声明特殊的方法,当组件挂载或卸载时...因为 7 数据自顶向下流动 父组件或子组件都不能知道某个组件是有状态还是无状态,并且它们不应该关心某组件是被定义为一个函数还是一个类。 这就是为什么状态通常被称为局部或封装。...除了拥有并设置它的组件外,其它组件不可访问。 组件可以选择将其状态作为属性传递给其子组件: It is {this.state.date.toLocaleTimeString()}.

    1.3K20

    SceneKit 场景编辑器-为您的AR体验构建3D舞台

    移动它们以直观地重新定位模型。它们之间的弧度是一次用一个轴旋转对象。 视口控件 视口下方是视口控件。在这个栏上,我们可以改变到不同的视角。我经常将它设置为前面,因为这是在屏幕上添加模型时的起始角度。...您可以通过拖动操纵器或直接在位置框中随意移动这些灯光。将“ 镜面反射”设置为白色。现在你看到灯光反射到表壳上了。 屏幕 让我们添加手表的屏幕,好吗?...因此,请从对象库中添加它。 管子尺寸 管子有2个半径,一个内部和一个外部。在“ 属性”检查器中,将“ 内半径”更改为2.3,将“ 外半径”更改为2.5。该高度也将是2.5。...然后移动蓝色箭头,使z位置等于约-1.95。 父节点 表壳是表的主要部分。添加的其他部件相对于壳体定位。因此,我们将框设为[parent]节点。...这样做的好处是,如果我缩放,旋转或移动盒子,所有其他几何形状都会跟随,就像儿童拴在父母身上一样。你会看到一点点。因此,在“ 场景”图中,选择所有其他形状,将它们拖到框顶部。

    5.6K20

    如何用python制作3d游戏_【教程】12个步骤让你快速学会制作3D游戏

    为了使目标动起来,我们使用到一个名为“速度”的变量,它可以帮我们确定我们的目标物体在舞台上移动的速度。...接下来给 “speed”赋一个介于100-1000之间的值,并点击在屏幕顶部中间的 。通过使用Unity默认的移动键“ASWD”或箭头键,你就可以使这个球到处移动了。 再次出测试模式。...通过把它从Hierarchy(层次结构)面板中拖动到Lights的game object(游戏对象)中,使它成为Lights一个子对象。这跟把一个文件移动到一个文件夹的概念是相似的。...右键单击Hierarchy(层次结构)面板中的“Main Light”并复制它。将这个复制的对象命名为 “Fill Light”(填充灯),也使它成为Lights一个子对象。...步骤9:让相机跟随玩家移动 我们希望在屏幕上,相机能够随着玩家的移动而移动,为此我们要在Inspector(检查面板)的Main Camera(主摄像头)添加新的脚本组件并命名为“cameraMovement

    3.6K10

    【Python贪吃蛇】:编码技巧与游戏设计的完美结合

    子图和窗口:可以在一个窗口中创建多个乌龟对象,或者在多个窗口中绘图。 更新和动画:通过update()方法可以刷新画布显示,实现动画效果。...copy:用于复制蛇的头部坐标,避免在移动蛇时直接修改原始列表。 randrange:从random模块中导入,用于生成随机数,这里用来随机放置食物。 ❤️2....此时,生成新的食物位置,并让蛇增长(不移除蛇身的最前部分)。 蛇身更新:如果蛇没有吃到食物,移除蛇身的最前部分,模拟蛇的移动效果。然后将新计算的蛇头位置添加到蛇身列表的末尾。...动画效果:使用turtle.update()刷新屏幕显示,使上述绘制更新生效。...将其设置为False可以关闭绘制方块时的动画效果,使方块几乎是立即出现的,这对于需要快速更新屏幕的游戏来说是必要的。

    26010

    30分钟了解所有引擎组件,132个Unity 游戏引擎组件速通!【收藏 == 学会】

    ---- 前言 众所周知,在一个游戏引擎中,组件(Component) 即是游戏的灵魂。 多个组件构成一个游戏对象,多个游戏对象构成一个场景,多个场景则构成了一整个项目。...使用此关节可按照您所决定的位置和角度保持两个对象之间的相互偏移。 用于将两个物体连接在一起,使它们相对运动。...对象可以沿着线自由移动以响应碰撞或作用力,或者对象也可以通过电动力移动,并施加限制以使其位置保持在线的某个部分之内。 用于将两个物体连接在一起,并允许它们在特定方向上相对移动。...用于在3D场景或2D场景中进行物理射线检测。它可以用于检测鼠标点击、触摸屏幕等事件,并获取被点击的物体或碰撞点等信息。...Animator可以设置游戏对象的动画状态机,并通过状态机控制游戏对象的动画行为。它可以将多个动画片段组合成动画状态,并设置动画状态之间的转换条件和权重。

    2.9K35

    用python写一个简单的贪吃蛇游戏

    需要的同学可自行下载练习,可尝试更改蛇的速度、颜色,添加多个食物等。...除了最终的代码外,我们还特意分解了几个过程中的 py 文件,供想要自己开发的同学参考。 开发思路 游戏开发通常都会采用面向对象的设计。这里我们有三个类:蛇、食物,另外还有背景(用来绘制格子)。...游戏的主循环里主要依次做这么几件事: 获取键盘事件 绘制背景 更新蛇的位置 画蛇、食物 碰撞检测 屏幕刷新 蛇和食物的绘制都是通过 pygame 里的 Surface 对象实现,绘制不同颜色的格子。...蛇的身体使用 Rect 对象,通过 list 保存。 蛇的移动是这个游戏的核心操作。...我们没有选择修改蛇的位置,而是每次移动时,根据蛇的前进方向增加一个头部节点,其余位置都向前移动一个节点,并删除尾端节点,这样就等于实现了蛇的移动。如果是吃到了食物,就在尾部再加上节点,就实现了增长。

    2.3K10

    Python 自动化指南(繁琐工作自动化)第二版:二十、使用 GUI 自动化控制键盘和鼠标

    控制鼠标移动 在本节中,您将学习如何使用 PyAutoGUI 移动鼠标并跟踪其在屏幕上的位置,但首先您需要理解 PyAutoGUI 如何处理坐标。...您应该看到鼠标指针移动到屏幕左上角附近,并单击一次。完整的“点击”定义为按下鼠标按钮,然后在不移动光标的情况下释放鼠标按钮。...生成器超出了本书的范围,但是你可以把它们传递给list()来返回一个四整数元组的列表。对于在屏幕上找到图像的每个位置,将有一个四整数元组。...相反,使用pyautogui.hotkey()函数,该函数接受多个键盘按键字符串参数,按顺序按下它们,然后按相反的顺序释放它们。...您可以在屏幕上移动鼠标光标,并使用 PyAutoGUI 模拟鼠标点击、击键和键盘快捷键。

    8.7K51

    iOS14开发-触摸与手势识别

    一个手指触摸屏幕,就会生成一个 UITouch 对象,如果多个手指同时触摸,就会生成多个 UITouch 对象。 属性 (1)window:触摸时所处的 UIWindow。...(5)phase:触摸事件的周期,即触摸开始、触摸点移动、触摸结束和中途取消。 方法 // 返回一个CGPoint类型的值,表示触摸在view上的位置。 // 返回的位置是针对view的坐标系。...// 手指在屏幕上移动 open func touchesMoved(_ touches: Set, with event: UIEvent?)...在响应之前,必须要找到那个最合适的对象(最佳响应者),这个过程称之为事件传递或寻找最佳响应者(Hit-Testing)。...此时需要重写 UITabBar 的point方法,判断当前触摸位置是否在中间凸起按钮的坐标范围内,如果在返回 true。这样可以让触摸事件传递到凸起按钮,并让其成为最佳响应者。

    2.3K20

    Beginner Tutorial 1: SceneNode, Entity,和SceneManager 结构

    只有你创建 了一个SceneNode并且在上面 绑定 一个Entity (或其他对象),它才能真正地在屏幕上显示出来. SceneNode 可以 绑定 很多个对象....要做的第一件事就是为场景设置环境光源使我们能看到我们在做的事情. 我们可以调用setAmbientLight 函数并指定颜色来完成这件事..../media/models 坐标系和向量 在我们深入之前, 我们需要说一下屏幕坐标系和Ogre向量对象....当你看向屏幕的时候, x轴应该是从左到右的, 并且右侧是x轴的正方向. Y轴在屏幕是从下到上的,上面那一端是正方向. Z轴是从里到外的,屏幕外的这一端是正方向....确认你在继续下一部分之前你可以编译并运行这些代码,虽然除了一个有帧速度的框的空白屏幕外没有任何东西.我们会在这个教程后面加入一些能够显示的对象.

    45710

    关于“Python”的核心知识点整理大全35

    在 create_fleet() 的定义中,还新增了一个用于存储 ship 对象的形参,因此在 alien_invasion.py中调用create_fleet()时,需要传递实参ship: alien_invasion.py...下面来让外星人群在屏幕上向右移动,撞到屏幕边缘后下移一定的距离,再沿相反的方向移 动。...如果你现 在运行这个游戏,会看到外星人群向右移,并逐渐在屏幕右边缘消失。 13.4.2 创建表示外星人移动方向的设置 下面来创建让外星人撞到屏幕右边缘后向下移动、再向左移动的设置。...,外星人群向下移动的速度。...另外,鉴于向右移动时需要增大每个外 星人的x坐标,而向左移动时需要减小每个外星人的x坐标,使用数字来表示方向更合理。

    11110

    童年游戏大回顾:飞机大战

    设计思路: 游戏元素: 玩家飞机: 玩家控制的飞机,可以是简单的飞机形象,可以在屏幕上上下左右移动,也能够发射子弹。 敌机: 敌机会不断从屏幕上方出现,向下飞行,玩家需要躲避敌机的攻击。...敌机生成: 敌机会不断地从屏幕上方生成,并向下飞行,玩家需要及时躲避或击落敌机。 碰撞检测: 游戏需要实现碰撞检测机制,当玩家飞机与敌机或敌机的子弹发生碰撞时,游戏结束。...设置玩家飞机的移动速度。 定义敌机类: 创建了一个名为Enemy的类来表示敌机。 每个敌机对象具有随机的初始位置和速度。 move()方法用于移动敌机,draw()方法用于在屏幕上绘制敌机。...每个子弹对象具有初始位置和固定速度。 move()方法用于移动子弹,draw()方法用于在屏幕上绘制子弹。...事件处理部分检测玩家的键盘输入,并根据按键移动玩家飞机或发射子弹。 敌机和子弹的移动和绘制是在游戏循环中进行的。 在循环中检查子弹是否击中敌机,如果击中,则销毁敌机和子弹,并生成新的敌机。

    47742

    Cocos2d-x初学者教程

    您将其从屏幕的左边缘垂直居中放置10%,并将其添加到场景中。 生成并运行您的应用; 瞧,女士们,先生们,忍者进入了大楼! :] ?...您将在屏幕右侧的右边创建怪物,并为它们设置一个动作,告诉它们向左移动。...3.最后,该方法创建一个动作,该动作使怪物(monster)从右到左在屏幕上移动,并指示怪物(monster)运行它。 下面将对此进行详细说明。...您想让子弹一直移动到该点,直到子弹到达屏幕外的最终目的地。 这是说明问题的图片: ?...生成并运行您的应用;触摸屏幕,使您的忍者向即将来临的部落射击! ? 碰撞检测与物理 现在您已经拥有飞镖飞来飞去的地方-但您的忍者真正想要做的就是放下一些零头。

    6.6K21

    【 iOS 应用开发 】 UIKit 控件 ( UIView 属性 | storyboard 设置 | 模拟器 | 拖线关联 | tag | 软键盘操作 | 颜色值 | 代码生成控件 | 动画设置 )

    UIView 属性 示例 ( 1 ) 创建应用并设置 ( 2 ) 需求 ( 3 ) 拖线生成传入 Sender 的方法 ( 4 ) 设置颜色 及 随机颜色值 ( 5 ) 使用代码生成 UIView 对象...; //3.将结构体设置回 UIButton 对象 self.mainButton.frame = frame; } //向下移动的方法 -(IBAction) left{...frame.origin.x -= 10; //3.将结构体设置回 UIButton 对象 self.mainButton.frame = frame; } //向下移动的方法...Normal 和 Highlighted 状态的背景, 拖线关联 按钮与方法; //向下移动的方法 -(IBAction) big{ //注意点 : OC 中不能直接 修改 对象的结构体成员...= frame; }]; } //向下移动的方法 -(IBAction) left{ //注意点 : OC 中不能直接 修改 对象的结构体成员, // 如果有此类需求

    5K30

    自己动手写游戏:Flappy Bird

    2.2 总结设计思路 (1)万物皆对象   在整个游戏中,我们看到的所有内容,我们都可以理解为游戏对象;(在Unity中,GameObject即游戏对象)每一个游戏对象,都由一个单独的类来创建;在游戏中...(3)对象的运动   在整个游戏中,小鸟会受重力默认向下坠落,而用户可以根据点击或按键盘Space键使小鸟向上飞,从图像呈现上其本质就是更改游戏对象在Y轴的位置,使其从下往上移动;而管道则会从屏幕右侧出现...可以看到,从图像呈现上期本质就是更改管道对象在X轴的位置,使其从右往左移动。 ? (4)设计流程图   在整个开发设计过程中,我们可以根据优先级设计开发流程,根据流程一步一步地实现整个游戏。 ?...游戏引擎中给游戏对象增加一个刚体组件就可以使游戏对象受重力影响,但是在普通的程序中需要自己设计重力类使游戏对象受重力影响下落。...那么,在FlappyBird中主要是判断两种情况:一是小鸟是否飞到边界(屏幕的上方和下方),二是小鸟是否碰到了管道(向上的管道和向下的管道)。

    98320
    领券