三角形函数在前面一个动画中的应用,canvas星空和图表转换

作者: 计算机前端  发布:2019-10-27

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

2018/08/26 · JavaScript · 动画

原文出处: HelKyle   

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

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

图片 1

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

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

canvas星空和图形变换,canvas星空变换

图形变换。

三角函数

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

勾股定理

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

图片 2

常用三角函数

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

 

JavaScript

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

1
2
3
sinθ = a / h
cosθ = b / h
tanθ = a / b

极坐标系和单位圆

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

 

JavaScript

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

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

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

图片 3

简单的图像变换

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

图片 4

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

A 控制振幅,A 值越大,波峰和波谷越大,A 值越小,波峰和波谷越小;
B 值会影响周期,B 值越大,那么周期越短,B 值越小,周期越长。
C 值会影响图像左右移动,C 值为正数,图像右移,C 值为负数,图像左移。
D 值控制上下移动。

这个公式非常有用,如果下文的代码让你不解,记得回来查看注解。

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

一、画一片星空

先画一片canvas.width宽canvas.height高的黑色星空,再画200个随机位置,随机大小,随机旋转角度的星星。

图片 5window.onload=function(){ var canvas=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var context=canvas.getContext("2d"); context.fillStyle="black"; context.fillRect(0,0,canvas.width,canvas.height); for(var i=0;i<200;i++){ var r=Math.random()*10+10; var x=Math.random()*canvas.width; var y=Math.random()*canvas.height; var a=Math.random()*360; drawStar(context,x,y,r,r/2.0,a); } } //rot顺时针旋转的角度 function drawStar(ctx,x,y,r,R,rot){ ctx.beginPath(); //角度转弧度:除以180*PI for(var i=0;i<5;i++){ ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x, -Math.sin((18+i*72-rot)/180*Math.PI)*R+y); ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x, -Math.sin((54+i*72-rot)/180*Math.PI)*r+y); } ctx.closePath(); ctx.fillStyle="#fb3"; ctx.strokeStyle="#fd5"; ctx.lineWidth=3; ctx.lineJoin="round"; ctx.fill(); ctx.stroke(); } View Code

 产生一个扁平化设计中200个星星的效果。

图片 6

常见的应用场景

二、图像变换和状态保存

图像应用

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

 

JavaScript

for (let x = 0; x < width; x++) { const y = Math.sin(x * a) * amplitude }

1
2
3
for (let x = 0; x < width; x++) {
  const y = Math.sin(x * a) * amplitude
}

图片 7

再结合三角函数偏移让左右成为波谷,中间成为波峰,就能得到曼妙的波纹。

JavaScript

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 }

1
2
3
4
5
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
}

 

图片 8

之前掘金上很火的一篇文章,也是同样的道理,使用两层正弦函数绘制曲线,fill 之后加上 stagger 动画,就能得到非常酷炫的

本文由澳门新萄京app发布于计算机前端,转载请注明出处:三角形函数在前面一个动画中的应用,canvas星空和图表转换

关键词:

上一篇:小程序框架对比,小程序开发实践总结
下一篇:没有了