vue+canvas如何实现b站萌系登录界面

当初在掘金看到那个小熊的登录页面,很多人都很喜欢,于是恬不知耻的说了一句要用canvas来实现一遍,真的是给自己立了个flag,还好结果很糟糕。

各位观众大老爷,这可能是你见过最惨淡的demo了,希望不要嫌弃

首先看看别人的效果图

进行思考

为什么小熊会跟着输入框的输入而移动。

为什么小熊的耳朵会移动到前面

小熊的移动规律是什么

做出一些逻辑上的思索与排除

2d

3d

判断文本框的焦点坐标,从而给小熊旋转等动作的数据支持

实现3d的向量类

对物体进行空间的旋转

通过输入向量与角度值,来进行计算,生成坐标在空间旋转后的坐标,此处使用的计算公式为旋转矩阵,矩阵并未单独抽离为单独类。

形状类

看过上一篇2d向量讲解的会知道,我们在使用向量来处理时,是要对每一个向量点进行处理,所以我们没法直接使用如fillRect等的方法,这里我使用了贝兹曲线来绘制图形。

我们通过捕获paths中的向量,生成一个面,然后由面去构成物体,并且在同一形状中进行面重排,是为了使面在绘制的时候依据z(深度)来进行渲染,产生遮挡的效果。

这样我们将可以通过如下方式来创建形状

对于这种绘制的最快方法,就是先在纸面上进行坐标绘制,再用代码实现。

实现了绘制与变换之后,下一步就是进行交互,这里我使用vue来写的页面,通过监听输入框的文本长度来计算,(文本的长度*字体的大小)+左边距=焦点坐标。

然后我们就可以把所有的东西交给浏览器了

不足

画的有点丑,不太可以很清晰的有那种感觉

只对单个物体进行了深度渲染,未实现空间深度的渲染

向量与形状的功能不完善,使得效果局限性很大

这是未输入时的样子,为了对比明显,我讲旋转的角度调大了

源码链接:https://github.com/dxiaoqi/canvas-svg-/tree/master/canvas/vue%2B3d%E4%BA%A4%E4%BA%92

总结

其实这东西挺不好做的,以前用PS或者AE做动效的时候,只想着如何来美化效果,动手实现之后才感觉图形引擎那群人真的牛逼,从开始打算做到简单实现,花了接近半天,中间推倒了很多想法,然后再去整理,虽然最后的效果不怎么样,但是吧,我还是恬不知耻希望可以诱惑到一些大佬们加入canvas的队伍中,一起来写有趣的东西。

素材来源于网络,版权属于原作者

原链接地址:https://juejin.im/post/5ae802a46fb9a07ac55fec04

点击这里,

申请免费前端课程

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180509A1GDMB00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券