今天来告诉大家如何禁用Azure云上的虚拟机的自动更新。

Azure云中的自动更新，是不能在虚拟机里面设置的，需要在云端进行配置。

简单来说就是, 在”虚拟机 | 你的其中一个虚拟机 | 更新 | 更新设置”中选择禁用。详细情况如下所示

1. 首先，先到虚拟机中
   

2. 接着选择其中一个虚拟机, 并且选择”更新”
   

3. 在更新中选择”更新设置”
   

4. 将设置由启用改为禁用即可
   

还原观看

最近某个项目的OSS流量很大，经过调查发现，在打开网站之后，其中的视频请求了3次。

经过调查，发现一个MP4的数据全部存在box的结构中，其中moov box是一个容器box，他不包含具体的媒体数据，但是包含了所有媒体数据的宏观信息，其下有多个其他box，包含mvhd，trak等。

造成多次请求的原因就是moov的box被放在了最后面，这对于本地播放没有影响，播放软件可以先寻找到moov，但是对于在线播放则非常的不友好。

因此我们需要将MP4的moov box移动到最前方，让http先请求到moov。

我们可以使用HandBrake来快速的处理这个问题，HandBrake - https://github.com/HandBrake/HandBrake

使用方式就非常简单了

1. 安装软件

2. 打开软件，选择你的适配

3. 勾选”网页优化”, 接着点击开始编码
   
   Figure: 勾选网页优化

在经过以上步骤之后，你的视频就成功的被优化了，快去试试吧

今天简单告诉大家，如何快速生成一个视频的字幕。

1. 首先我们需要注册一个网易见外平台 - https://jianwai.youdao.com/

2. 接着创建一个新项目, 断则视频翻译
   

3. 上传视频, 等待结果
   

4. 相应的翻译会在右侧
   

PS: 我们可以点击导出, 可以得到srt文件, 接着使用其他软件可以把字幕和视频导入进去

感谢观看

本期给大家简单介绍一下Flip, 这个插件非常适合让你的dom在2个状态之间切换（位置信息，大小，旋转角度等）
比如你原先删除一个dom，现在想要让这个dom体面的被删除，那么就可以使用这个Flip组件

使用他非常简单, 首先你需要引入Flip plugin,

1
2
3
4

import { gsap } from 'gsap';
import Flip from 'gsap/Flip';

gsap.registerPlugin(Flip);

1. 拿到当前dom的状态

1

const state = Flip.getState("#YourDom");

2. 修改当前的组件状态
   比如把这个dom挪到另外一个容器下面

3. 接着配置动画效果

   1 2 3

   Flip.from(state, { duration: 1 });

搞定

本期给大家简单介绍一下ScrollTrigger

要使用ScrollTrigger, 首先你需要引入ScrollTrigger plugin, 使用他非常简单

1
2
3
4

import { gsap } from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

紧接着就是如何使用了，也非常简单，直接上代码

1
2
3
4
5
6

gasp.to('你的dom元素',{
    ...gsap的to的属性,
    scrollTrigger:{
        ...scrollTriggerPlugin的属性
    }
})

来一个示例，比如说

1
2
3
4
5
6
7
8
9

gasp.to('#target',{
    x:400,
    rotation:360,
    duration:3,
    scrollTrigger:{
        trigger:'#targetWrapper',
        markers:true
    }
})

通过markers，我们可以显示出target的start和end标志线，以及容器的scroll的start和end标志线，
我们可以通过start和end参数，来调整这几个标志，以达到我们需要的开始和结束效果

同时在scrollTriggerPlugin的属性中，还有更多的，比如scrub, ping, snap等，当然他也有一些callback方法

详情可以看 https://greensock.com/docs/v3/Plugins/ScrollTrigger

随着时间的发展, gsap迎来了新的版本。
新版本使用起来比之前更加方便。

3句话教大家如何开发基础动画

1. 安装包

   1	npm i gsap -S

2. 使用

   1 2 3

   import { gsap } from 'gsap'; gsap.to('#xx', { x: 400, duration: 2 });

3. 使用插件

   1 2 3 4

   import { gsap } from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger);

简洁而且优雅。

下期预告 - ScrollTrigger

umi最近发布了4.x, 又将原先的更多东西进行了整合, 包也进行了优化。

现在umi可以管理大量的依赖，减少用户的手动安装。

作为编译时框架，umi有非常多的好处

1. 很多配置作为约定存在，可以少些很多代码，例如数据量，i18，路由等
2. 导入变小，按需打包
3. 功能可配置化，在config中，可以加载各个plugin，以及配置，比如说ie的兼容性等

快速上手

1. 在windows上我们可以通过 npx create-umi@latest 来安装最新版 - 详见 https://umijs.org/docs/tutorials/getting-started

PS: 注意, 如何想要在里面使用dva的话, 建议使用umi max.

在以前，Greensock旗下有多个products, 其中一个是tweenmax
今天简单的给大家介绍一下如何使用tweenmax来开发动画

1. 首先我们需要导入tweenmax的js文件
2. 使用

1
2
3
4
5
6
7
8
9
10

<div class="box">
test
</div>

<script>
TweenMax.to('.box', 3, {
	right: 100,
});
</script>

3. 比如运行了以上的代码之后, 就可以让此元素向右移动100px

提示: 也可以使用里面的delay，repeat等
提示: 配合CSS也可以做出其他的一些动作，比如放大缩小，边角变化
提示: 配合Easing可以做出其他的一些缓动效果

下一期给大家做一下gsap的简单用法

今天简单的给大家介绍一下Gatsby - https://www.gatsbyjs.cn/

Gatsby是一个基于React的免费、开源框架，用于帮助开发者构建运行速度极快的网站和应用程序。

他的数据来源可以是好几个地方，例如

1. cms系统
2. markdown文件
3. Json，接口等

我们可以通过gatsby-cli来快速创建一个新项目

1. 安装gatsby-cli

   1	npm install -g gatsby-cli

2. 创建站点

   1	gatsby new gatsby-site

3. 开发

   1	gatsby develop

下一期简单告诉大家如何使用GraphQL来当做gatsby的数据源

今天告诉大家如何将一个圆形，转换成多边形，然后再将这个多边形画图

1. 首先我们将某个点的坐标轴作为圆形，某个单位作为其半径

2. 我们可以通过将其360度等分的方式，来将圆形分割成360个点

3. 中心点和其在Y轴最大的差值(或者中心点-Y轴最小的差值)*sin角度，就可以得到每个点位X轴位置

4. 同理，中心点在其X轴的最大差值(或者中心点-X轴的最小差值)*con角度, 就可以得到每个点位的Y轴位置

5. 最后在将这360个点组成的图形，连接起来，就可以得到一个圆形

Tip: 在JS中, Math.cos(Math.PI / 180)或者Math.sin(Math.PI / 180), 才是你想要的，而不是直接的Math.cos(1);

我们来简单看一下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/// <summary>
/// 切分成360
/// </summary>
/// <param name="lng">中心点经度</param>
/// <param name="lat">中心点纬度</param>
/// <param name="longitude">经度半径</param>
/// <param name="latitude">纬度半径</param>
/// <returns>点位集合</returns>
function getEllipsePoints(lng, lat, longitude, latitude) {
  let list = [];
  for (let i = 0; i < 360; i += 1) {
    list = [...list, [lng + longitude * Math.cos((Math.PI * i) / 180), lat + latitude * Math.sin((Math.PI * i) / 180)]];
  }
  return list;
}