前端动画中三角函数的应用

最新推荐文章于 2022-04-20 17:48:41 发布

weixin_33738555

最新推荐文章于 2022-04-20 17:48:41 发布

阅读量219

点赞数

文章标签：前端 javascript ViewUI

原文链接：https://segmentfault.com/a/1190000017183007

版权

平时写动画也尽量使用 CSS3 来实现，timing-function 随意选用，最多也就调一下 cubic-bezier，找到看着舒服的就行。但是怎样让动画更顺滑，写出更贴近自然的动画，说实话以前我没怎么考虑过。

今天来分享一下三角函数相关的内容，如果刚学前端的时候有人教我这些，我会很开心。

三角函数已经是老生常谈了（街舞圈称之为 Old School），它伴随我们从初中到大学，太多的公式定理，光是应付考试就花了不少时间。先简单回顾一下，确保你还记得基础知识。

勾股定理

最开始学三角函数的时候就是从背勾三股四弦五开始，勾股定理描述的是对于直角三角形，直角两条边的平方和等于斜边的平方:

常用三角函数

印象中教科书里面只保留了 sin, cos, tan，其他可以通过变换得到。

sinθ = a / h
cosθ = b / h
tanθ = a / b

极坐标系和单位圆

在笛卡尔直角坐标系中，任一点 (x, y) 都可以转化成极坐标表示 (r, θ)，其中：

r = Math.sqrt(x^2 + y^2)
θ = Math.atan2(y, x)

单位圆的定义是半径为单位长度的圆，圆上任意一点的横坐标就是对应角度的余弦值，任意点的纵坐标就是对应角度的正弦值。

图片描述

简单的图像变换

以正弦曲线为例，对函数进行简单的变换，得到不一样的结果。

正弦曲线公式：y = A sin(Bx + C) + D

A 控制振幅，A 值越大，波峰和波谷越大，A 值越小，波峰和波谷越小；
B 值会影响周期，B 值越大，那么周期越短，B 值越小，周期越长。
C 值会影响图像左右移动，C 值为正数，图像右移，C 值为负数，图像左移。
D 值控制上下移动。
这个公式非常有用，如果下文的代码让你不解，记得回来查看注解。

简单得回顾一下之后，确保你还记得这些基础知识，那么这些曾经被得滚瓜烂熟的内容，和前端代码结合会变成什么样？

常见的应用场景

图像应用

最直观的应用是使用三角函数来绘制 Wave 曲线

for (let x = 0; x < width; x++) {

 const y = Math.sin(x * a) * amplitude 
}

for (let x = 0; x < width; x++) {
    const radians = x / width * Math.PI * 2
    const scale = (Math.sin(radians - Math.PI * 0.5) + 1) * 0.5
    const y = Math.sin(x * 0.02 + xSpeed) * amplitude * scale
}

图片描述

使用两层正弦函数绘制曲线，fill 之后加上 stagger 动画，就能得到非常酷炫的水波效果。
图片描述

SlowInSlowOut

正余弦曲线有很自然地缓入缓出的特性，并且在一个周期里面从 -1 到 1 再回到 -1，非常适合用来模拟一些物理效果。因为真实世界里面，汽车都是缓慢启动，加速，减速，再缓慢减速直到速度变为 0 的，突变会让人很难受。左边的摆球是线性匀速摆动，右边是用了三角函数优化的结果。显然左边的效果设计师会打人。

图片描述

只需使用 sin 或 cos 乘以最大角度，就可以得到在摆动最大角度之间的 SlowInSlowOut。

ctx.rotate(Math.cos(t / 180 Math.PI) Math.PI * 0.25)

角度控制

在开发过程中，我们常常需要跟角度打交道，比如在头像左上角（45deg）显示 Notification 红点，用鼠标控制 rotation 等等。

前端 JS 里面 Math.atan2(y, x) 可以用来计算 (x, y) 和 x 轴正方向的夹角弧度值。

function getCurrentDegree () {
 const deltaX = mouse.x - window.innerWidth * 0.5
 const deltaY = mouse.y - window.innerHeight * 0.5
 return Math.atan2(deltaY, deltaX) * 180 / Math.PI 
}

图片描述

插一句，三角函数相关的动画并不一定需要用 JS 来写，比如下面的 DEMO，使用 compass 依赖，同样可以做到灵活控制在特定角度的动画（千万不要手写各个点的坐标！！！后期没办法维护）

@import "compass";

.checkbox:checked {
    ~ button {
        $per: 180 / 4;
        @for $i from 1 through 6 {
            &:nth-of-type(#{$i}) {
                $angle: $per * ($i - 1) * 1deg + 180deg;
                $x: cos($angle) * $d;
                $y: sin($angle) * $d;

                transform: translate($x, $y) rotate(0deg) ;
            }
        }
    }
}

现如今前端发展速度非常迅速，刚入门的同学刚学完 jQuery 就被告知，You Dont Need jQuery。追新的脚本根本停不下来，在学习新框架新技能的同时，也别忘了基础知识的重要性。

今天就分享到这里，希望本文能让你下次使用三角函数更得心应手。

前端学习q.u.n【 784783012 】，快速学习点击：加入