前言

代码运行环境：全部基于HarmonyOs NEXT

DevEco Studio：Build Version: 5.0.3.900

API：12

modelVersion：5.0.0

什么是属性动画呢？字面之义就是让属性产生动画，产生某些可执行的动作，使其和原有的UI形态发生了根本的变化，当然了，其本身也类似这层意思；属性动画中，我们需要知道，并不是所有的属性都可以执行动画操作，比如一个组件，设置焦点控制，禁用控制，改变的只是动作状态，而本身的UI形态并没有发生变化，所以并不能执行动画，也就不属于动画属性。

是否定义为一个可执行动画属性，有两个标准，第一个是改变它能够使其UI发生变化，比如宽高，内边距，外边距属性，第二就是，改变它，可以添加动画作为过渡，不做动画，又何谈属性动画呢，是吧。

常见的可执行动画属性，如下：

分类	说明
布局属性	位置、大小、内边距、外边距、对齐方式、权重等。
仿射变换	平移、旋转、缩放、锚点等。
背景	背景颜色、背景模糊等。
内容	文字大小、文字颜色，图片对齐方式、模糊等。
前景	前景颜色等。
Overlay	Overlay属性等。
外观	透明度、圆角、边框、阴影等。

实现属性动画

属性动画最注重的就是两点，一是必须使其UI发生改变，二是能够有动画产生连续效果，目前在鸿蒙开发中，系统提供了两个可以实现属性动画的方式，使用animateTo和animation来实现。

简单举例：

使用animateTo让组件平移100，动画持续时间为1秒。

@Entry
@Component
struct Index {
  @State translateX: number = 0

  build() {
    Column() {
      Text("1")
        .width(50)
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .translate({ x: this.translateX })

      Button("点击")
        .margin({ top: 10 })
        .onClick(() => {
          this.getUIContext()?.animateTo({ duration: 1000 }, () => {
            this.translateX = 100 //x轴移动100
          })
        })
    }
    .height('100%')
    .width('100%')
  }
}

使用animation让组件平移100，动画持续时间为1秒。

@Entry
@Component
struct Index {
  @State translateX: number = 0

  build() {
    Column() {
      Text("1")
        .width(50)
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .translate({ x: this.translateX })
        .animation({duration:1000})

      Button("点击")
        .margin({ top: 10 })
        .onClick(() => {
          this.translateX = 100 //x轴移动100
        })
    }
    .height('100%')
    .width('100%')
  }
}

可以看到实际效果是一样的。

当然了，除了平移属性能够实现这种效果，其实你使用margin也能实现平移的效果。

 .margin({ left: this.translateX })
.animation({ duration: 1000 })

说明

需要说明的是，实现一个动画，无论是使用animation还是animateTo都是触发的动作，真正展示视觉效果，还得是可执行的属性，无论平移，缩放还是旋转。

平移动画

让一个组件产生一个平移动画，设置translate属性即可，当然，你设置offset或者margin也是可以实现的，只不过 ， 一个是组件偏移，一个是位置的坐标偏移，我理解是大差不差的，但是还是建议使用官方的translate。

---

其类型参数是TranslateOptions，接收三个参数，x，y，z，分别表示在对应轴移动的距离，值为正时表示向对应轴的正向移动，值为负时表示向对应轴的反向移动。

如果你仅仅是平移，只需要XY两个值即可，因为Z值有接近观察点放大和远离观察点缩小效果，一般未有缩放效果，Z值我们可以不传递。

例如，向X轴方向平移100，向Y轴方向平移100。

@Entry
@Component
struct Index {
  @State translateX: number = 0
  @State translateY: number = 0

  build() {
    RelativeContainer() {

      Text("1")
        .width(50)
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .translate({ x: this.translateX, y: this.translateY })
        .animation({ duration: 1000 })

      Button("点击")
        .onClick(() => {
          this.translateX = 100
          this.translateY = 100
        })
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

效果：

如果你要加上Z值，比如也设置100，我们就会看到明显的缩放动画。

缩放动画

缩放动画，可以使用scale属性进行实现，类型参数为ScaleOptions，有五个参数，分别为X，Y，Z，centerX和centerY，X轴、Y轴、Z轴为缩放比例，默认值为1，centerX和centerY为设置缩放的中心点。

简单举例，原有基础之上放大2倍。

@Entry
@Component
struct Index {
  @State translateX: number = 1
  @State translateY: number = 1
  @State translateZ: number = 1

  build() {
    RelativeContainer() {

      Text("1")
        .width(50)
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .scale({ x: this.translateX, y: this.translateY, z: this.translateZ })
        .animation({ duration: 1000 })
        .margin({ top: 100 })
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })

      Button("点击")
        .margin({ top: 10 })
        .onClick(() => {
          this.translateX = 2
          this.translateY = 2
          this.translateZ = 2
        })
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

效果查看：

默认系数为1，放大就比1大，缩小就比1小，centerX和centerY就是中心点，默认是组件的中点，如下图，放大两倍后，也是以中点放大两倍。

如果你更改了centerX和centerY的值，再放大时就是以更改的值作为中心点进行放大，可以看到是有明显的区别的。

旋转动画

旋转动画，可以使用rotate属性进行实现，类型参数为RotateOptions，总共有8个参数，详细介绍如下：

名称	类型	必填	说明
x	number	否	旋转轴向量x坐标。
y	number	否	旋转轴向量y坐标。
z	number	否	旋转轴向量z坐标。
angle	number / string	是	旋转角度。取值为正时相对于旋转轴方向顺时针转动，取值为负时相对于旋转轴方向逆时针转动。取值可为string类型，如’90deg’。
centerX	number / string	否	变换中心点x轴坐标。表示组件变换中心点（即锚点）的x方向坐标。单位：vp
centerY	number / string	否	变换中心点y轴坐标。表示组件变换中心点（即锚点）的y方向坐标。单位：vp
centerZ10+	number	否	z轴锚点，即3D旋转中心点的z轴分量。
perspective10+	number	否	视距，即视点到z=0平面的距离。旋转轴和旋转中心点都基于坐标系设定，组件发生位移时，坐标系不会随之移动。

正常的旋转，我们只改变角度即可，也就是按照中心点旋转，比如旋转180度。

@Entry
@Component
struct Index {
  @State angle: number = 0

  build() {
    RelativeContainer() {

      Text("1")
        .width(50)
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .rotate({ angle: this.angle})
        .animation({ duration: 1000 })
        .margin({ top: 100 })
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })

      Button("点击")
        .margin({ top: 10 })
        .onClick(() => {
          this.angle = 180
        })
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

效果查看：

当然了，你也可以通过改变中心点，或者坐标点，实现想要的旋转效果。

组合动画

单一动画，我们设置单个可执行属性即可，如果是多个动画，显而易见，就是设置多个属性,比如实现一个，X轴移动100，并且旋转180度，放大1.5倍。

@Entry
@Component
struct Index {
  @State angle: number = 0
  @State translateX: number = 0
  @State scaleX: number = 1
  @State scaleY: number = 1
  @State scaleZ: number = 1

  build() {
    RelativeContainer() {

      Text("1")
        .width(50)
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .rotate({ angle: this.angle })
        .translate({ x: this.translateX })
        .scale({ x: this.scaleX, y: this.scaleY, z: this.scaleZ })
        .animation({ duration: 1000 })
        .margin({ top: 100 })
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })

      Button("点击")
        .margin({ top: 10 })
        .onClick(() => {
          this.translateX = 100
          this.angle = 180
          this.scaleX = 1.5
          this.scaleY = 1.5
          this.scaleY = 1.5
        })
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

效果查看

两种属性动画介绍

无论是是使用animateTo还是animation，其实最终要改变的都是组件的可执行属性，最终的效果是一致的，animateTo是闭包内改变属性引起的界面变化，一般作用于出现消失转场，而animation则是组件通过属性接口绑定的属性变化引起的界面变化，一般使用场景为，animateTo适用对多个可动画属性配置相同动画参数的动画，需要嵌套使用动画的场景；animation适用于对多个可动画属性配置不同参数动画的场景。

相关总结

如果你要执行动画的组件，是始终存在的，那么这种情况下，是推荐使用的，如果是那种将要出现或者将要消失的组件，这里是不推荐的。

还有就是，要合理的使用属性动画，避免一些轮询机制中使用，否则会影响其它页面的组件展示效果。

网络安全学习路线&学习资源

网络安全的知识多而杂，怎么科学合理安排？

下面给大家总结了一套适用于网安零基础的学习路线，应届生和转行人员都适用，学完保底6k！就算你底子差，如果能趁着网安良好的发展势头不断学习，日后跳槽大厂、拿到百万年薪也不是不可能！

初级网工

1、网络安全理论知识（2天）

①了解行业相关背景，前景，确定发展方向。
②学习网络安全相关法律法规。
③网络安全运营的概念。
④等保简介、等保规定、流程和规范。（非常重要）

2、渗透测试基础（一周）

①渗透测试的流程、分类、标准
②信息收集技术：主动/被动信息搜集、Nmap工具、Google Hacking
③漏洞扫描、漏洞利用、原理，利用方法、工具（MSF）、绕过IDS和反病毒侦察
④主机攻防演练：MS17-010、MS08-067、MS10-046、MS12-20等

3、操作系统基础（一周）

①Windows系统常见功能和命令
②Kali Linux系统常见功能和命令
③操作系统安全（系统入侵排查/系统加固基础）

4、计算机网络基础（一周）

①计算机网络基础、协议和架构
②网络通信原理、OSI模型、数据转发流程
③常见协议解析（HTTP、TCP/IP、ARP等）
④网络攻击技术与网络安全防御技术
⑤Web漏洞原理与防御：主动/被动攻击、DDOS攻击、CVE漏洞复现

5、数据库基础操作（2天）

①数据库基础
②SQL语言基础
③数据库安全加固

6、Web渗透（1周）

①HTML、CSS和JavaScript简介
②OWASP Top10
③Web漏洞扫描工具
④Web渗透工具：Nmap、BurpSuite、SQLMap、其他（菜刀、漏扫等）

恭喜你，如果学到这里，你基本可以从事一份网络安全相关的工作，比如渗透测试、Web 渗透、安全服务、安全分析等岗位；如果等保模块学的好，还可以从事等保工程师。薪资区间6k-15k

到此为止，大概1个月的时间。你已经成为了一名“脚本小子”。那么你还想往下探索吗？

【“脚本小子”成长进阶资源领取】

7、脚本编程（初级/中级/高级）

在网络安全领域。是否具备编程能力是“脚本小子”和真正黑客的本质区别。在实际的渗透测试过程中，面对复杂多变的网络环境，当常用工具不能满足实际需求的时候，往往需要对现有工具进行扩展，或者编写符合我们要求的工具、自动化脚本，这个时候就需要具备一定的编程能力。在分秒必争的CTF竞赛中，想要高效地使用自制的脚本工具来实现各种目的，更是需要拥有编程能力.

零基础入门，建议选择脚本语言Python/PHP/Go/Java中的一种，对常用库进行编程学习； 搭建开发环境和选择IDE,PHP环境推荐Wamp和XAMPP， IDE强烈推荐Sublime； ·Python编程学习，学习内容包含：语法、正则、文件、 网络、多线程等常用库，推荐《Python核心编程》，不要看完； ·用Python编写漏洞的exp,然后写一个简单的网络爬虫； ·PHP基本语法学习并书写一个简单的博客系统； 熟悉MVC架构，并试着学习一个PHP框架或者Python框架 (可选)； ·了解Bootstrap的布局或者CSS。

8、超级黑客

这部分内容对零基础的同学来说还比较遥远，就不展开细说了，贴一个大概的路线。感兴趣的童鞋可以研究一下，不懂得地方可以【点这里】加我耗油，跟我学习交流一下。

网络安全工程师企业级学习路线

如图片过大被平台压缩导致看不清的话，可以【点这里】加我耗油发给你，大家也可以一起学习交流一下。

一些我自己买的、其他平台白嫖不到的视频教程：

需要的话可以扫描下方卡片加我耗油发给你（都是无偿分享的），大家也可以一起学习交流一下。

结语

网络安全产业就像一个江湖，各色人等聚集。相对于欧美国家基础扎实（懂加密、会防护、能挖洞、擅工程）的众多名门正派，我国的人才更多的属于旁门左道（很多白帽子可能会不服气），因此在未来的人才培养和建设上，需要调整结构，鼓励更多的人去做“正向”的、结合“业务”与“数据”、“自动化”的“体系、建设”，才能解人才之渴，真正的为社会全面互联网化提供安全保障。

特别声明：

此教程为纯技术分享！本书的目的决不是为那些怀有不良动机的人提供及技术支持！也不承担因为技术被滥用所产生的连带责任！本书的目的在于最大限度地唤醒大家对网络安全的重视，并采取相应的安全措施，从而减少由网络安全而带来的经济损失！！！学习资料的推荐