java 中半圆的函数,前端程序员必须掌握之三角函数在前端动画中的应用

开发过程中经常有意无意地刻意避开数学相关的知识，你也知道解数学题非常枯燥无趣。平时写动画也尽量使用 css3 来实现，timer-function 随意选用，最多也就调一下 cubic-bezier，找到看着舒服的就行。但是怎样让动画更顺滑，写出更贴近自然的动画，说实话以前我没怎么考虑过。

每次当动效设计师提出，能不能这样那样的时候，我会理所当然地予以否决。所以有很长一段时间，我非常羡慕那些能用 canvas 绘制很酷炫的动画的程序员。

先这样吧，又不是不会动。

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

三角函数

三角函数已经是老生常谈了(街舞圈称之为 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 动画，就能得到非常酷炫的

java 中半圆的函数,前端程序员必须掌握之三角函数在前端动画中的应用相关推荐

前端程序员怎么面试找工作？前端面试技巧分享
我面试过很多前端程序员,非常了解面试者和面试官的心理,我可以很负责的告诉你: 就算面试你的人说你只能拿8K,但是你完全可以通过各种方法去拿到10K以上的薪资! 面试的时候面试官都是什么样的心理? 大多 ...
前端程序员必看的网站专属前端程序员的“hao123“
*推荐的网址: 1.W3C : http://www.w3school.com.cn/ H5/C3最常用的网站之一,很多ES6新增的方法 2.微软的必应:https://www.bing.com ...
Java程序员情人节_盘点程序员情人节的表白，前端程序员最浪漫，后端不服来战...
今天是 2 月 14 日情人节,我看公众号后台有好多人在回复关键字:情人节表白代码.我想,我作为大家的校长,必须给大家送一波福利代码啊!我是真没想到,竟然很多程序员都想用代码表白,还整的挺浪漫的,看来 ...
前端程序员需要了解的Vue知识
前言:这一篇旨在教大家快速入门Vue2,每个知识点用案例解释不过学习vue2之前,建议学好JavaScript的基础知识: 前端程序员需要了解的JavaScript_成为前端大牛的博客-CSDN博客 ...
java代码情人节_编程语言盘点程序员情人节的表白
今天是 2 月 14 日情人节,我看公众号后台有好多人在回复关键字:情人节表白代码.我想,我作为大家的校长,必须给大家送一波福利代码啊!我是真没想到,竟然很多程序员都想用代码表白,还整的挺浪漫的,看来 ...
前端程序员总结的工作中常用的十大浏览器兼容性问题，初学者瑰宝！
兼容性一直都是前端工程师最头疼的一个问题,也是前端面试最常考的一个方面,今天看到一位前端程序员总结的一份很好的关于浏览器兼容性问题的文章,正好最近群里有许多的需要面试伙伴,所以稍微挑了十个常用的浏览器 ...
java前台界面设计_前端程序员要懂的 UI 设计知识
前端程序员要懂的 UI 设计知识疯狂的技术宅前端先锋翻译:疯狂的技术宅作者:Per Harald Borgen 来源:freecodecamp 正文共:1401 字预计阅读时间:5分钟作为 ...
java中forward和redirect_好程序员Java教程分享：Forward和Redirect的区别
Java教程分享:Forward和Redirect的区别,用户向服务器发送了一次HTTP请求,该请求可能会经过多个信息资源处理以后才返回给用户,各个信息资源使用请求转发机制相互转发请求,但是用户是感觉 ...
Web前端程序员该如何准备面试？这些面试知识应该掌握
面试其实是实力和运气并存的事情,所以一方面我们要做好知识的准备,另一方面也要抓住时机,该出手就出手,那么Web前端程序员该如何准备面试呢?下面和一起来看看吧! 一:Web前端面试什么? 针对Web前端 ...
初中级前端程序员面试中小型公司会问哪些问题?
初中级前端程序员面试中小型公司会问哪些问题?不同的公司面试内容也不尽相同,有的面试过程很轻松,有的面试官是个架构师level 挺高不会问八股文,给出了几个现实中的场景,然后转换成代码的逻辑去让实现. ...

java 中半圆的函数,前端程序员必须掌握之三角函数在前端动画中的应用

java 中半圆的函数,前端程序员必须掌握之三角函数在前端动画中的应用相关推荐

最新文章

热门文章