Zong
新动力

讲实话,最近有些焦虑……一直在思考人为什么活着,为 什么活着?
这里就不深入了,看看春节月我都做了些什么吧~

任务进度

  • 「日本語学習計画」:语法及词汇 仅学了 1
  • 「计算机图形学」:材质与外观 停滞
  • 「锻炼身体」:简单运动,爬公司楼梯、散步

自己好懒惰啊,动漫疯狂看,游戏疯狂玩。就是没办法坚持上面的事情。愤怒!
始终相信万事都不难,贵在坚持,只是我没坚持住……

ECMA-262 进度

阅读版本:ECMAScript® 2020 language specification, 11th edition (June 2020)

讲实话,看英文文章大多借助翻译工具加自己的理解,虽然不能很完整的还原细节(大概率会漏)。不过没关系,至少对大致有了认识。

目前进度:4.4 Organization of This Specification

摘抄内容:

The remainder of this specification is organized as follows:
Clause 5 defines the notational conventions used throughout the specification.
Clauses 6-9 define the execution environment within which ECMAScript programs operate.
Clauses 10-16 define the actual ECMAScript programming language including its syntactic encoding and the execution semantics of all language features.
Clauses 17-26 define the ECMAScript standard library. They include the definitions of all of the standard objects that are available for use by ECMAScript programs as they execute.
Clause 27 describes the memory consistency model of accesses on SharedArrayBuffer-backed memory and methods of the Atomics object.

到目前为止,规范的内容已进行了介绍,后续将是对规范中的细节进行讲解,我们敬请期待吧。

CSS3 + 三角函数实现 2.5D 动效实践

需求:轮播组件

需求来的很突然(因为 CSS 这块的薄弱,所以称之为突然),不过我一向不怕这些,我喜欢迎难而上。

说是一个轮播组件的确没错,但是这个组件是倾斜的(设计图我就不放了,我怕挨打)。

我尽可能的用文字描述一下,类似Element Carousel 走马灯组件使用卡片化的效果,可透视至后方,椭圆的视觉效果,并且从上 45 度角向下看的视觉效果。

我还是画个草图吧……

轮播组件

起初我打算使用 transform 的旋转和变换实现透视圆形轮播,在外层使用 perspective 实现视角下沉,但是经过实践我发现这并不可行(或许是我的姿势有问题)。但是就算这个方式实现了,卡片的视角会有问题,因为使用了旋转,所以会有变短的效果。

后来我发现其实可以只用 transform 来实现,卡片位置使用相对定位控制,那么如何让卡片位置形成这样的椭圆形呢,那就是使用三角函数[维基]

三角函数

利用公式,计算卡片坐标位置。以及使用一些简单的算法来计算出当前卡片位置的权重,设置 z-index 来实现层次感。

最后加入动画效果及自动播放旋转功能即大功告成!(其他细节部分我这里就不谈了)

记录一个坑:在使用类似 Math.sin 时,入参千万记得把角度转成弧度。比如 90 * Math.PI / 180