vue实现的高阶贝塞尔曲线编辑器代码

来源:https://www.sucaihuo.com/js/5459.html 2021-11-19 10:08浏览(19) 收藏

vue实现的高阶贝塞尔曲线编辑器代码,以及用BezierCurve模拟复杂动画效果。
vue实现的高阶贝塞尔曲线编辑器代码
分类:其它特效 难易:高级
查看演示 下载资源: 0 下载资源 下载积分: 20 积分

使用说明

1.主要实现的是BezierCurve类;实例化方法:
var bezier = new BezierCurve(dots);   // dots : [ {x,y},{x,y}...  ] 第一个和最后一个元素代表开始和结束的点;

假设 index为开始和结束点的横坐标之间的一个值,则:
bezier.getDot(index);

可获取贝塞尔曲线上对应的一个点的坐标({x,y});

2.动画绘制用的是 js逐帧绘制, transform 属性通过计算transform矩阵得到(Matrix类在common.js中);

3.动画计算时,并没有精确的获取曲线在x坐标对应的y值,而是获取根据比例计算得到的一个曲线上的点{x,y},要严格获取x对应的y值需要用二分法求解,我觉得会影响动画的流畅程度,这里只要趋势和贝塞尔曲线符合就满足需求了;
标签: vue贝塞尔曲线
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2