如何禁用Azure虚拟机的自动更新

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

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

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

  1. 首先,先到虚拟机中

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

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

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

还原观看

使用Handbrake优化视频请求次数

最近某个项目的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文件, 接着使用其他软件可以把字幕和视频导入进去

感谢观看

gsap-flip

本期给大家简单介绍一下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");
  1. 修改当前的组件状态
    比如把这个dom挪到另外一个容器下面

  2. 接着配置动画效果

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

搞定

gsap-scrollTrigger

本期给大家简单介绍一下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开发动画

随着时间的发展, 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

umi4

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.

使用tweenmax开发动画

在以前,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>
  1. 比如运行了以上的代码之后, 就可以让此元素向右移动100px

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

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

使用gatsby搭建网站

今天简单的给大家介绍一下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;
}