5.1 贝塞尔曲线

贝塞尔曲线的特点:

  1. 控制点不总是在曲线上。
  2. 曲线的阶次等于控制点的数量减一。 对于两个点我们能得到一条线性曲线（直线），三个点 — 一条二阶曲线，四个点 — 一条三阶曲线。
  3. 曲线总是在控制点的凸包内部

贝塞尔曲线沿控制点的顺序延伸

贝塞尔曲线的两种定义方法：

  • 使用数学方程式。
  • 使用绘图过程：德卡斯特里奥算法

贝塞尔曲线的优点：

  • 我们可以通过控制点移动来用鼠标绘制平滑线条。
  • 复杂的形状可以由多条贝塞尔曲线组成。

工具：https://cubic-bezier.com/

5.2 CSS 动画

transition

css 动画结束之后，会触发 transitionend 事件
有多少个 transition-property,就会触发多少次 transitionend 事件

  1. boat.onclick = function () {
  2.   //...
  3.   let times = 1;
  5.   function go() {
  6.     if (times % 2) {
  7.       // 向右移动
  8.       boat.classList.remove("back");
  9.       boat.style.marginLeft = 100 * times + 200 + "px";
  10.     } else {
  11.       // 向左移动
  12.       boat.classList.add("back");
  13.       boat.style.marginLeft = 100 * times - 200 + "px";
  14.     }
  15.   }
  17.   go();
  19.   boat.addEventListener("transitionend", function () {
  20.     times++;
  21.     go();
  22.   });
  23. };

练习题 1: 放大图片动画

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <style>
  6.       img {
  7.         cursor: pointer;
  8.       }
  9.     </style>
  10.     <style>
  11.       #flyjet {
  12.         width: 40px;
  13.         /* -> 400px */
  15.         height: 24px;
  16.         /* -> 240px */
  17.       }
  18.       /* ID选择器优先级大于类选择器 */
  19.       #flyjet.enlarge {
  20.         width: 400px;
  21.         height: 240px;
  22.         transition: all 3s cubic-bezier(0.1, 0.65, 0.72, 1.49);
  23.       }
  24.     </style>
  25.   </head>
  27.   <body>
  28.     <img id="flyjet" src="https://en.js.cx/clipart/flyjet.jpg" />
  29.     <script>
  30.       flyjet.onclick = function () {
  31.         this.classList.add("enlarge");
  33.         // 有多少个transition-property就触发多少次
  34.         let transFlag = false;
  35.         flyjet.addEventListener("transitionend", function () {
  36.           if (!transFlag) {
  37.             alert("done!");
  38.           }
  39.           transFlag = true;
  40.         });
  41.       };
  42.     </script>
  43.   </body>
  44. </html>

练习题 2: 画一个圆圈动画

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <style>
  6.       .circle {
  7.         transition-property: width, height, margin-left, margin-top;
  8.         transition-duration: 2s;
  9.         position: fixed;
  10.         transform: translateX(-50%) translateY(-50%);
  11.         background-color: red;
  12.         border-radius: 50%;
  14.         /* transition必须有初始值，否则看不到变化 */
  15.         width: 0;
  16.         height: 0;
  17.       }
  18.     </style>
  19.   </head>
  21.   <body>
  22.     <div class="circle"></div>
  23.     <script>
  24.       function showCircle(cx, cy, radius) {
  25.         let circle = document.getElementsByClassName("circle")[0];
  26.         circle.style.width = 2 * radius + "px";
  27.         circle.style.height = 2 * radius + "px";
  28.         circle.style.top = cy + "px";
  29.         circle.style.left = cx + "px";
  30.       }
  32.       let button = document.createElement("button");
  33.       button.innerText = "showCircle(150,150,100)";
  34.       button.onclick = function () {
  35.         showCircle(150, 150, 100);
  36.       };
  38.       document.body.append(button);
  39.     </script>
  40.   </body>
  41. </html>