班会第 56 期

[ufologist]

• 技术

  • css3 星球椭圆运动轨迹

    用css3如何实现椭圆运动, CSS3 曲线动画

    把星球同时做X轴和Y轴的位移运动。根据抛物线的原理，这个方案貌似可行。最后实践证明原理是这样，但有些地方 需要留意下，否则会变成菱形运动了

    

    • 一开始的想法就是，从原点o出发（分别给x、y轴方向一个位移），然后分别在a、b、c点设置动画帧，改变他们 的translate。但最终的实践证明，如果一开始同时改变x、y方向的位移，实际出来的轨迹是他们的对角线，而并非抛 物线
    • 做椭圆运动的球体还是在原点o位置，但一开始做y轴方向的位移，到达d坐标时，再加上x轴方向的位移。怎么做 到这点呢，只需要把x轴的方向的运动延迟四分之一的时间
    • 一个方向先运动起来，有了加速度，到四分之一时，另一个方向再从0加速，从而产生抛物轨迹

    <style>
        .outer {
            position: absolute;
            top: 40%;
            animation: moveX 2s ease-in-out infinite;
            /* 通过 delay 来让两个不同方向的动画形成曲线 */
            /* 相当于物理中在水平和垂直方向施加不同的作用力 */
            /* 如果不 delay 我们只会得到斜线运动 */
            animation-delay: 0.5s;
        }
        .inner {
            width: 20px;
            height: 20px;
            background-color: #47a;
            animation: moveY 2s 0s ease-in-out infinite;
        }
    
        @keyframes moveY {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-200px);
            }
        }
        @keyframes moveX {
            0%, 100% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(300px);
            }
        }
    </style>
    <div class="outer">
        <div class="inner"></div>
    </div>

    • CSS 3D Solar System
    • CSS3 animation模拟太阳系行星公转

  • 波浪动画

    wave-animation.html

  • 搭建本地HTTPS测试环境

    • 生成证书
      • openssl 工具在 git 的安装目录中有
      • 生成密钥(key) ssl_certificate_key: openssl genrsa -out ssl.key 1024/2038
      • 使用密钥生成证书(pem) ssl_certificate: openssl req -new -x509 -key ssl.key -out ssl.pem -days 365
    • 配置nginx
    • 信任证书

  • Android APP架构心得

    架构是为了方便软件维护、扩展、安全性、切入性（指一个以前没有接触过这个项目的人，能快速加入到这个项目中，对项目进行维护、修改和扩展）

    • 维护性
      • 出了问题能快速定位，需要修改时能快速修改
      • 代码规范
      • 框架稳定性
      • 封装
      • 耦合
    • 扩展性
      • 当程序需要新的功能时，能否对其进行扩展以及扩展的难度
      • 抽象接口
      • 元素重用
      • 单一职责
      • 替换性
    • 安全性
      • 数据安全性
      • 操作安全性
    • 切入性
      • 文档(代码规范文档/接口文档)
      • 注释
      • 包名
    • 框架选择及使用
      • 稳定性
      • 扩展性
      • 封装性

  • awesome-typescript-projects

    awesome typescript open source projects, includes IDE, Framework, Library, Tool

• 产品

  • 期权是什么?

    Option：期权，指的是在满足一些条件下，以某种价格购买公司股票的权利。请注意关键词：“权利”，“某种价格”，“一些条件”

    • 在创业公司工作，期权怎么发放？
    • 程序员为了期权加入创业公司，值得吗？