使用tweenmax开发动画

在以前,Greensock旗下有多个products, 其中一个是tweenmax - 随着时间的发展, 现在最新的是gsap - https://github.com/greensock/GSAP
今天简单的给大家介绍一下如何使用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;
}

阿里云域名迁移

今天简单的告诉大家域名如何快速转入阿里云。

  1. 向原注册商索取转移密码
    不同的供应商索取的方式不同,请联系各自的供应商解决。


Figure: 以上为联网科技的方式

  1. 打开阿里云的转入地址 - https://wanwang.aliyun.com/domain/transfers
    在输入框中输入 [你的域名][空格][转移密码], 然后点击”立即转入” - 多个域名可以以逗号隔开

注意: 现在转入的时候会出产生域名转入费用,费用为1年的域名续费费用 (不过有效时间会给你增加1年,相当于又续费了1年)

  1. 接着在阿里云的域名转入列表中查看转入情况 - https://dc.console.aliyun.com/next/index#/transfer-in/list
    通常需要5-7个日

注意: 在转入之前,需要完成”信息模板实名认证” - 更多信息可以在此查看 - https://help.aliyun.com/document_detail/101438.html

感谢阅读

阿里云并发优化

不知道大家在业务上有没有遇到过某一段时间访问量激增的情况, 然后服务器扛不住压力.


Figure: 你可以在 “云服务器ECS | 实例 | 监控” 中找打它

如果你确认是你的公网带宽不足的时候, 你可以考虑几个点来进行优化

  1. 将你的一些资源迁移到OSS - OSS中的优化我们下期再讲

  2. 变更你的带宽, 提升你的带宽总量
    a. 直接生你的配置 - (较贵)
    b. 带宽临时升级 - 比如你人为的知道今天下午4点 - 9点会有很多人访问 (便宜)
    c. 使用自动化运维OOS实现周期性的带宽临时升级 - 比如你知道你每周的周一和周二下午3点-6点会有很多用户访问 - (便宜)
    d. 修改你的带宽为使用按量支付的方式 - 注意这个选项在 “降低配置”中 - 你完全不知道你的用户会在什么时候访问 - 这个配置目前最多允许100Mbps的爆发流量, 如果需要更多, 可以联系阿里云的业务经理

  3. 使用阿里云的负载均衡服务, 并且自己购买ECS服务器, 并且配置

  4. 使用阿里云的弹性伸缩服务, 配置规则, 来自动增加或者减少ECS实例

最后如果大家想要购买阿里云服务的话,可以看下云大使链接, 看看有没有可以用得到的优惠 - 点我

感谢阅读

Azure Mysql 的 full group by 问题

在初次使用Azure的mysql数据库的时候, 大家会发现使用group by会报错
这是因为sql_mode=only_full_group_by的原因

我们需要在Azure的数据库门户中关闭这一设定。

  1. 进入你的”Azure Database for MySQL 灵活服务器”门户

  2. 点击服务器参数导航栏

  3. 在文本框中搜索”sql_mode”

  4. 在sql_mode中去掉only_full_group_by的勾选

  5. 不要忘了点击左上角的保存

至此问题修复

感谢你的阅读

几步创建Azure的负载均衡服务

今天教大家以最快的方式处理数据库自动同步

  1. 首先进入Azure, 搜索负载均衡, 然后创建负载均衡器
  2. 选择资源组, 填写名称和区域, 其中SKU中,基本是免费的, 标准是收费的 - 差异性见此文档 - https://docs.microsoft.com/zh-cn/azure/load-balancer/load-balancer-overview#pricing-and-sla

    Figure: 根据自己的需求选择SKU
  3. 添加前端IP

    Figure: 如果没有空闲的IP,可以选择生成
  4. 接着点击”查看+创建”, 来创建一个负载均衡器

    Figure: 创建负载均衡
  5. 后续再添加相关的后端池即可, 后端池可以是自己的虚拟机, 也可以是ip地址

感谢阅读

数据库自动同步

今天教大家以最快的方式处理数据库自动同步

  1. 首先请自行安装Navicat
  2. 在工具中根据需要, 选择”数据传输”,”数据同步”,”结构同步”
    2.1 数据传输 - 结构和数据
    2.2 数据同步和结构同步如字面意思

    Figure: 根据自己的需求选择任务
  3. 选择好源数据库和目标数据库之后, 选择保存配置文件

    Figure: 保存配置
  4. 接着选择”自动运行”, 在其中选择你之前保存的配置

    Figure: 新建批处理作业
  5. 接着设置触发器就好

    Figure: 根据自己的需要,设置任务触发情况

感谢阅读

3 Steps To Create a middleware Service

今天教大家以最快的方式搭建一个代理转发服务

我们使用express和http-proxy-middleware来完成此项操作

  1. 安装express - 关于express的框架问题,我就不多赘述了

  2. 安装http-proxy-middleware - npm i http-proxy-middleware -S

  3. 使用如下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    const express = require('express');
    const cors = require('cors');
    const { createProxyMiddleware } = require('http-proxy-middleware');


    const app = express();
    app.use(cors());


    app.use('/proxy', createProxyMiddleware({ target: '目标站点', changeOrigin: true,pathRewrite:{'^/proxy':'/'} }));
    app.listen(3001, function () {
    console.log('开始代理')
    });

搞定

3步对接来运的短信服务

  1. 在阿里云的控制台上找到短信服务,点击立即开通


    Figure: 免费开通,按量服务

  2. 在服务创建完毕之后, 我们需要添加一个签名, 签名通常会在48小时内审核通过


    Figure: 大家可以根据实际情况,选择不同的签名来源

  3. 在签名完毕之后,就可以使用SDK来进行发送短信以及批量发送短信了, SDK以及体验地址 - https://next.api.aliyun.com/api/Dysmsapi/2017-05-25/SendSms?spm=api-workbench.SDK%20Document.0.0.60871e0fRHQqlN&params={}


    Figure: 在这里可以直接下载完整的功能和运行实例,注意在这之前获取AK来进行授权,也要注意你的发送地址,不同的区域地址是不同的

到此为止,对接短信就成功了,感谢阅读