我想学前端动画
最近想学习前端动画, 准备先从 CSS3 的动画开始.
css3 的动画主要是
- transition
- animation
transition 有 animation-timing-function
animation 有 animation-timing-function
均内置 ease,linear,ease-in,ease-out,ease-in-out.
还可以自定义 cubic-bizier(n,n,n,n), 这个嘛玩意呢, 三阶贝塞尔曲线.
说道这里, 回想一下我们前端在哪些地方还会贝塞尔呢.
svg
canvas/webgl
css3 动画
说过了, 本人想学前端动画, 于是这个坎过不去.
什么是贝尔赛曲线.
贝塞尔曲线 (Bézier curve), 又称贝兹曲线或贝济埃曲线, 是应用于二维图形应用程序的数学曲线.
再多的就自己查 google, 什么 google 用不了? 程序员不会 FQ? oh, no!
通用公式
线性公式
二次方公式
三次方公式
再多的, 额, 暂时学不动了.
一阶二阶三阶封装
接下来我们, 我们如果要取点怎么办呢? 不要着急.
代码不多, 这就是基于上面公式的简单封装,
你传入需要的点数量和相应的控制点就能获得相应一组点的信息.
- class Bezier {
- getPoints(count = 100, ...points) {
- const len = points.length;
- if (len <2 || len> 4) {
- throw new Error("参数 points 的长度应该大于等于 2 小于 5");
- }
- const fn =
- len === 2
- ? this.firstOrder
- : len === 3
- ? this.secondOrder
- : this.thirdOrder;
- const retPoints = [];
- for (let i = 0; i < count; i++) {
- retPoints.push(fn.call(null, i / count, ...points));
- }
- return retPoints;
- }
- firstOrder(t, p0, p1) {
- const { x: x0, y: y0 } = p0;
- const { x: x1, y: y1 } = p1;
- const x = (x1 - x0) * t;
- const y = (y1 - y0) * t;
- return { x, y };
- }
- secondOrder(t, p0, p1, p2) {
- const { x: x0, y: y0 } = p0;
- const { x: x1, y: y1 } = p1;
- const { x: x2, x: y2 } = p2;
- const x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2;
- const y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2;
- return { x, y };
- }
- thirdOrder(t, p0, p1, p2, p3) {
- const { x: x0, y: y0 } = p0;
- const { x: x1, y: y1 } = p1;
- const { x: x2, y: y2 } = p2;
- const { x: x3, y: y3 } = p3;
- let x =
- x0 * Math.pow(1 - t, 3) +
- 3 * x1 * t * (1 - t) * (1 - t) +
- 3 * x2 * t * t * (1 - t) +
- x3 * t * t * t;
- let y =
- y0 * (1 - t) * (1 - t) * (1 - t) +
- 3 * y1 * t * (1 - t) * (1 - t) +
- 3 * y2 * t * t * (1 - t) +
- y3 * t * t * t;
- return { x, y };
- }
- }
- export default new Bezier();
可能, 你觉得太空洞, 那么我们看一下 demo 和截图.
演示地址 https://xiangwenhu.github.io/Bezier/
到此完了么? 没有!
定义三阶贝塞尔关键点
回到最开始, animation 和 transition 都可以自定义三阶贝塞尔函数, 而需要的就是两个控制点的信息.
在线取三阶贝塞尔关键的方案早就有了.
在线贝塞尔 http://cubic-bezier.com/#.3,.43,.48,.65
在线贝塞尔 2 http://yisibl.github.io/cubic-bezier
但是不妨碍我自己去实现一个简单, 方便我加强理解.
大致的实现思路
canvas 绘制效果
两个控制点用 dom 元素来显示
逻辑
点击时计算最近的点, 同时修改最近点的坐标
重绘
当然这只是一个简单的版本.
演示地址: https://xiangwenhu.github.io/Bezier/d.html
截图:
参考:
贝塞尔曲线扫盲
在线贝塞尔 http://cubic-bezier.com/#.3,.43,.48,.65
在线贝塞尔 2 http://yisibl.github.io/cubic-bezier
可视化 n 次贝塞尔曲线及过程动画演示 -- 大宝剑
贝塞尔曲线算法, JS 贝塞尔曲线路径点
贝塞尔曲线算法之 JS 获取点 https://segmentfault.com/a/1190000018597975
n 阶贝塞尔曲线计算公式实现 https://www.jianshu.com/p/7c56103dcf63
前端贝塞尔曲线效果汇总
来源: https://www.cnblogs.com/cloud-/p/10794205.html