粉丝3681获赞9.3万
相关视频
01:42查看AI文稿AI文稿一分钟第一小技巧之 linear 表达式的详细讲解上期视频讲了一下 linear 表达式的一个案例，感兴趣的小伙伴可以看看上期内容，这次我们详细讲讲它的原理。首先 linear 表达式的原型是这个， 它的用法就是根据一个参照物的变化而本体发生变化。 d 一个 t 代表着参照物，可以是参照物旋转位置缩放的属性 t m， a 和 t max， 参照物属性的变化值从最小到最大的变化。 挖六一和二是本体在参照物变化的时候自己变化的数值。举个例子，我们首先给物体做 x 轴上的运动，这里提个醒，因为 liner 表达是只会输出单一的值，而位置属性有则外量 个值，所以我们得设置一下单独尺寸，将其分离开，给物体打上 x o 运动的关键针。可以看出我让他从三百移动到了八百。 我在新建一个空白文本层，原文本上给负上 ex 轴的值，这阳恩就代表了物体 ex 轴的运动了，也代表着参照物， 然后依次填他的变化，三百到八百，文本的变化我给的是零到一百，当然数值随你们喜欢，这样就完成了这个表达式的简单运用。不单单如此，我们可以用一个物体的运动去控制另一个物体的运动缩放，旋转，这就看各位看官的用法了。 好了，下课觉得有用的话，记得给小刘一个免费的赞，谢谢您嘞！
15学ae学到嘎
04:19查看AI文稿AI文稿国外爆火的 linear 风设计，指的是在大面积暗色背景下，使用渐变、模糊及细描边等元素修饰界面的网页设计风格。 今天我们以弊端产品的日历功能界面为案例，用 pixel 为大家拆解 linear 风格的设计思路。我们先来制作日历卡片背景，首先创建一个画板，宽度一千六百八十像素，高度不限，填充背景颜色黑色。 新建一个画板，设置尺寸为七百一十乘四百四十二像素，然后填充暗紫色线性渐变。 为了让整个背景的光线更发散，我们在画板填充层上再增加一个黑色的镜像渐变，然后给画板 添加白色描边，降低透明度，提升板块的质感，显得更立体。接下来我们使用 pixo 的图标插件，给设计模块添加代表日历的图标，缩放到二十四像素， 然后输入大标题，最后添加自动布局，再复制本文，添加异形小标题，降低透明度，让信息有主次之分。 接下来设计弊端日历界面，创建一个新的画板，尺寸一千零三十六乘四百五十八像素， 背景颜色白色，透明度百分之三。添加渐变描边，透明度百分之五十， 让界面更加有质感。找一个列表图标，放进五十六乘四十像素的画板中。接下来我们设计日期栏目新增一个尺寸为一百四十乘四十像素的画板，去掉填充，然后在画板上添加日期文字， 复制六个相同画板，然后选中所有首行画板，创建自动布局，并打开填充开关，设置百分之三的白色填充。最后给当前日期添加一个紫色的单侧描边。 接着我们设计日历的第二栏，复制一个上方图标，画板改成太阳图标。然后在设计任务组建创建一个二乘十五像素的矩形 圆角二像素，添加任务名，最后添加任务类型图标。我们先将标签与任务名添加自动布局，再将创建好的自动布局与图标再创建一个自动布局，给自动布局画板添加编剧和填充。将左边矩形的颜色和右边图标的颜色图。 我们使用直线功能绘制日历网格。第一条横线为通栏，宽度一千零三十六像素， 再向下复制七条线段，间隔四十八像素。 然后绘制七条竖线，高度三百七十八像素，间隔一百四十像素。 最后将线条全部选中边组整体透明度设置百分之七。 接下来我们添加时间文本，文字纵向排列，右对齐设置间距为二十八像素， 然后修改文本细节，附用任务组件修改图标样式和颜色。再一次将它们放在日历网格中。 linear 风格的弊端日历就完成了，将设计好的日历界面与卡片背景组合，让我们来看看最终效果。 pixo 资源社区有最新的 linear 风格设计资源，小伙伴们快去临摹吧！
226Pixso协同设计
02:57
05:30查看AI文稿AI文稿经过前面的学习，我相信小伙伴们已经把这个安卓 studio 的安装环境的搭建，这个模拟器的安装以及运行，我们的第一个项目 hollower 的如何去新建一个项目，这些问题同学们都已经搞定了， 那如果大家都搞定了，就在评论上告诉我，你是否都把这些解决了，这些都解决了，我们现在就开始正式的进入安卓的学习，那么接下来我们将学习什么呢？我们学习如何去设计一个界面，如何去进行布局。我们这里先打开安卓 s 六六，我们先看一下我们的布局，我们这个布局呢是在哪个位置呢？ 在我们的 r e s resource 资源的 layout 下面，这里有一个布局文件，这个布局里面我就放了一些东西，大家可以看一下，这里有一个文字，然后有个按钮，然后有三张图片，然后下面又有两个图片， 那么他们为什么会从上往下排列呢？那么这就是我们今天要学习的布局中的第一个线性布局，叫 linulet， 就是我们现在布局当中今天要学的 linulet 线性布局。 那么这个线性布局他可以从上往下排列，就是垂直方向排列，也可以水平方向排列。那么这个呢就是通过我们的 nearlat， 它有个属性 orientation， orientation 什么意思？就是它的一个方向，那么方向现在呢是 vertical， vertical 是垂直方向，那么就是从上往下排列，如果我们要水平方向呢？我们就给他一个 horizontal， horizontal 他就从水平方向去布局， horizontal 就是我们的一个水平的， 接下来我们重点要去学习一下这个 nearlat， 那么它到底是什么呢？刚才我们说了是线性布局，它是一个容器，这个容器里面我们 可以放很多的组件，那我们来看一下这张图，那么我们这个 nearlat， 它就相当是一个容器，容器里面可以放很多的纸容器，那么纸容器呢？它可以是 view group 或者是 view， 那么纸容器里面又可以放很多的空件。 那同学们要记住，在安卓当中就只有 view group 和 view 这两种组件，这种我们就称之为容器组件，这种就是单个的组件，那么对于这个 view group 来说，那么它就相当于是它的孩子，那我们就称之为 child， 那么对于这个 view 来说，它呢就相当于是它的父亲，我们称之为 parent。 那同学们一定要去理解这个 parent 和这个 child 这样一个概念，那么我们这里有三个 child， 三个 child 合起来我们称之，为什么？称之为 children， 对不对？那就是有多个孩子。那我们现在回到布局上面去看一下，我们这里还是把方向 先改成这个 vertical， 那么现在他就是一个 parent， 就是我们的父亲，那他下面有几个孩子，来我们来数一下，有一个、两个、三个、四个、五个、六个，一共有六个孩子，就这里一二三四五六有六个孩子。 the inner out 就是我们的 parent， 然后下面有六个 child， 那接下来我们讲一下这个 nearlat 的一些常用的一些布局的一些属性。那为了方便期间我们先把这个文本这个先去掉， 那这个按钮也去掉，然后这一个也去掉，现在我们就留下界面中这三张图片， 那我们如何通过 nearlat 来给这三张图片进行一个布局呢？然后同学们发现没有，现在这三张图片在我们手机屏幕的正中央，那么这是怎样实现的呢？就是通过我们这里的 gravity， gravity 什么意思？就是他的重力重心，那他的重心就是在 center， 就是居中， center， 就是居中的意思 center， 那么我如果要他在顶部应该怎样做呢？我们这里就给他一个 top， 他就变得顶部了。那如果我们要在顶部居中呢？这里已经代码已经提示了，他就变得居中了。如果我们是在右边呢，就是 right， 就变到右边了。那如果我们要在中间呢？就是 center center， 然后如果在左边呢？ center， 然后这是 left， 就变到左边，如果去掉呢，就变到中间。好，如果右边呢？就是给他一个 right， 就变到右边。然后如果我们现在要给他在底部呢，就是 button 变到底部了。如果底部的中间，那么就是给他一个 center orient 啊，如果在右边呢，就给一个 right， 好，我们现在先把它改回来，我们还是改为 center， 然后我们方向的话改一下，改成水平方向 for enter， 下面我们将演示一下另外一个属性，就是控制他的权重。我们现在的话，我们来看一下这三个，那么这三个图片我们都给给的一百 dp 啊，这个也是一百 dp， 这个也是一百 dp。 在我有一个需求，我需要让他们水平平均分布，应该怎样做呢？我们的宽度就不要给一百 d p 了，我们就给个零 d p， 然后 wait 给个一，然后发现他把剩下的全部占满了，就是这是一百 d p， 这是一百 d p， 然后他把剩下的全部占满了，我们再来改第二个零 d p， 然后权重 wait 给个一，然后这个是一百 d p， 他们两个平分剩下的，然后我们再来改造一个零 d p， wait 一，然后这样就实现了他们三个平分这个宽度，那么这就是这个 layout wait 的 wait 的这个属性，这个属 的含义权重现在是权重是一，权重是一，权重是一，他们三个都是一，他们就平分。那如果我中间这个，我要他的宽要大一点的，我们给他一二，可以看一下他就是两倍，然后这里是一，这是二，这是一，他们整体一共加起来是四，然后他占两份，那这占四分之一，他占四分之一。 今天我们就分享到这里，这个线性布局 near out， 你学会了吗？记得点赞关注哦！
114写BUG的非凡哥
05:06查看AI文稿AI文稿你看如果上镜往前推的话，是不是这光线效果是可以的，对不对？光线效果是可以的，但是呢，一般来说会有一个这样的效果。就是说我在做这个片子的时候，注意的一点，就是想让这个光线在前面的部分，就前面这个光线呀，他强一些，后边的弱一些，然后我们摄像机不是往前移动吗？就摄像机 呃往前移动过程当中，这些后面弱的这些光线呢，就会慢慢强起来。明白这意思吧，就是离着我们摄像就说白了，翻译过来就是离着我这光线离着我们摄像机越近，他呢就越亮， 离这越远的话，你还是非常非常远。你要远的时候呢，在后面有些光线就远景，有些光线就变得很很弱了。所以说我希望呢用一种方式来控制我们当前光线的一个透明度。现在你看我这样去把这个上镜的往前移动，往后拉，是没有任何变化是不是？但是光线还有点细啊，往后远景稍微再拉粗一点，就这样。 我是在改改他的演变啥的哈，都是可以的哈。那那我现在去调节摄像机往前推的时候呢，他是没有任何变化的。那我可以通过表达式呢，去控制一下呃他远近的一个变化。那这怎么操作呢？比较简单哈。呃，只要是我们呃能够呃想一个方法就可以了。那比如说在影视图当中呢，这是我们的上机是不是这我们上机啊，然后呢，我们的图层呢，比如说换一种颜色，比如说是在这的哈，有的在这，有的在这是吧？ 那他和上期的距离是不一样啊，是不是？那这个他和上期这个距离呢？这里呢我给他可以定一个数值啊，是比如说 a 吧，你可以任意数值啊， s 也行，叫 a。 你比如说在这个距离之内的时候呢，他的透明度呢，是一百，然后超过这个距离之后呢，比如说到了一个很远的距离，比如说到了 这的时候呢，他呢就不是一百了，他就是比如说百分之五十的一个透明度，明白吧，就离得越远啊，这里是一百，这里是一百。然后呢，这是五十啊，就这从这里到这里呢，都是一百啊，这里也是一百， 都是一百的这个透明度，所以说呢，它是它是最强的，最亮的。那么若是离得远了的话，那到后面的话，那边打个五十，或者到后边更弱啊，想要一个这样的一种结果。那么所以说呢，我们首先要做的就是要得到这 a 的数值对不对啊？得到这 a 的数值呢，就是我们当前图层它和我们摄像机的一个距离了。那这样呢，我们首先呢可以通过耶斯莱这呢去 啊得到是拉点 ctrl 啊，那这个是拉点 ctrl。 然后呢，我们去按照的键点击下，这个没什么用啊，这一丁点用都没有，只是得到一个数值的作用啊。那我可以呢去按照的键点击一下。好，这就可以呢，去创建我们的表达式了。那么这表达式是什么呢？是愣子哈啊愣子。然后呢括号，括号里面呢是两个十量，那这两这两个十量十量，大家都知道这三个数值了是吧？就这个样子， x， y， z 是吧？这就是这个三个数值就代表一个范围坐标嘛，这就叫做食量。那么呃 x 呢？是长度哈， l e n g t h 那么这个它的这个长度哈。然后呢，我们需要把这两个食量呢去找一下哈。嗯，那个食量是什么呢？是我们的摄像机啊，上面这三个相机只是我给大家去演示的哈，我需要把它删除掉或者把它关闭掉的哈。那么我们要的是这个摄像机哈。 那么我现在试用一下这个三个摄像机吧，后期再给他重新去链接一下哈。呃，因为我可以呢，去前后拉伸他，按下字母 p 键，这是他的位置啊。我们可以呢。在这里呢，先把这个光标放在括号里面，然后我们使用橡皮筋去连接一下他的这个位置，他在选他这样一个好处就是他会自动的帮我们去写这个表达式哈。逗号。那第二个时量呢，就是我们当前这个他图层的这个就数值，我们可以选择图层按，按下按字母，这时候可以按下 shift 加 p 键啊，这样会把这个位置加载进来。 好。然后呢，把光标放在逗号后面。这里再说一下，逗号和口号都是英文输入法的这个标点哈，大家记一下好，也就是嫩色。嫩色是长度。长度是呢是是什么长度呢？就是这两个适量的一个长度，也就说一个是我们摄像机的一个位置，一个是他的位置，这样的话就会得到这个长度。我们来看看这长度是多少，大概是嗯，两千多对不对啊？大概是两千多。那其他的这个可能就不太 一样啊。其他的那我可以把这个当前的这个 sladerctrl 按一下 ctrl c 键哈，我们选择到远景这个，然后我们 ctrl 加 v 键，我们去呃粘贴一下，然后单双击意见，我们来看看那他的数值是吧，这近景的这距离呢，是两千多，远景呢，就是七千多了 是吧，七千多，两千多。但是我们在这里呢，可以呢，通过他们来得到一个数值啊，就大约的一个范围啊，就是我们就现在来说的话呢，就是呃，近景呢，是两千多，然后呢，远景呢，是七千多。那我们可以设置一个范围哈，比如说三千哈， 三千的这个位置呢，就是这个距离呢，是三千的时候呢，他是开始进行衰减，然后呢，到了后边的时候，大约是比如说八千的时候呢，就衰减到零了啊，就这个透明度呢，不是五十了，就是零了，就没有这光线了啊。我们可以把这数值进行一定转换。那怎么转换呢？我们可以这样来操作哈，我们可以呢啊，那么我们最终做的这表达是不是给这图层来做表达？是啊，图层透明度，最终选择图层的，按下字母替件啊，特点 好。然后呢，我们按照的键点击这个表表，将会会出现表达式哈。然后呢，我们在双击意见，把之前的表达式呢，我们复制一下，就是他代表一种长度啊，代表一种呃，就是他他他这图层和上期之间一个距离，按他们的 c 键啊，复制一下。然后呢，我们输一个这样的效果， a 等于这个数值。嗯，那这 a 呢，就代表了他们之间的距离啊，后面加个分号啊，后面加个分号。好。然后呢，我现在想要的一个结果呢，是什么呢？是 这样，我先书写一下，是 line， 然后呢口号，然后后面是 a， 然后逗号，我们想让他从三千呃，三千到八千对吧？你说三千 逗号，八千逗号，然后一百逗号零啊，那就很会说话，什么意思啊？首先这个 a 是什么意思啊？ a 是变量是不是？ a 是图层与上机之间一个距离对不对？他是个变量，因为不同的图层，他的这个距离是不一样的。你看一下，就这个他是两千多，他是七千多，对不对？就是不一样的哈，他是个变量。那个这个立面呢，他是一个线性的一个变换，就是把一个区间变换成另另外一个区间 啊。就打比方，比如说我们在考试的时候啊，我们在上学那会考试时候，高考的时候就是我们有一种计算的方式是零到一百分，是不是啊？零到一百分是有有这百分之的。当然大家记得就高考的时候，咱们数学语文那些不是一百分，一百五十分是不是？ 所以说他的区间是不一样的。你比如说这个区间他的几个分分数，如果说是六十分的话，那对于他来说的话，那就是一六，得六五六三十，那就八十了。明白吧，就这个就把一个区间变换成另外一个区间，一个作用哈。所以说呢，这里呢，他的这个区间是什么呢？是三千到八千啊，也就是说刚才我画的那个近景的那个距离呢，是 是三千的这个位置呢，有三千以内，他的透明度呢，都是一百哈，那么三千以内哈，就是到零啊，他到零的数值他都是一百。然后呢，三千到八千呢，到八千的数值呢，到八千之后呢，他数值就零了。那从三千到八千呢，他会从一百呢，慢慢变到零，那比八千还往还大的话呢，就还是零，明白吧。啊，就是这样一种变化啊。所以说几个这样表达式好，那就说好。之后呢，那很简单啊，就是说我们之间呃，把这表达式呢，旁边先复制一下，然后其他的就粘贴一下就 ok 了。其他这些呢， 我们 iphone p 键哈，就是第二，比如中间我们 iphone p 键找到这个透明度，然后我们按照这个连接一下，然后再粘贴哈。那下面这也是一样的。嗯，表示了一个错误 啊，这 line 啊，我发现 line 后面多了一个 l 哈，刚才我好像是不好意思按错了哈，这个不要书写错误哈。那这个呢，我再看看。这个没问题啊。哎，这个没问题。哎，这也有问题啊，多写一个 l 哈。 可以看到吗？他你看我们第一层他的这个返回的，按字母体检，他返回的结果是一百，然后第二层就百分之六十五了是不是？然后呢，我们再把这个数值来复制一下，然后呢，再把他呢粘贴到这个远景上面哈，他可能会更小哈，应该是百分之十二，是不是就更小了哈。好，那这时候呢，我们去把上镜，你看我拉远之后，你看说你看我拉到最远之后呢，连前景都看不见了是不是你很远吗？然后呢，我往前推的话，你看后面的这些光线，是不是就会慢慢出现，是不是就有这样一个结果。
3刘不住
![[别小看SVG 21] 线性渐变的代码设置逻辑 [别小看SVG 21] 线性渐变的代码设置逻辑 linearGradient｜ HTML CSS SVG 入门教程 HTML5 CSS3 SVG零基础
#html #javascript #svg #css #网站](https://p3-pc-sign.douyinpic.com/image-cut-tos-priv/4249b03d4dabe8839f84a953a088963e~tplv-dy-resize-origshort-autoq-75:330.jpeg?lk3s=138a59ce&x-expires=2098843200&x-signature=9bXPhwUarpZdZZCFSjyHls84j2s%3D&from=327834062&s=PackSourceEnum_AWEME_DETAIL&se=false&sc=cover&biz_tag=pcweb_cover&l=2026070812121195121119F0F91F228DC0)
