重學前端學習筆記（三十九）--CSS的動畫和交互

時間 2019-11-24

標籤前端學習筆記三十九 css 動畫交互欄目 CSS 简体版

原文原文鏈接

筆記說明

重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，天天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的能夠加入winter的專欄學習【原文有winter的語音】，若有侵權請聯繫我，郵箱：kaimo313@foxmail.com。css

1、介紹

這一節學習一下 CSS的動畫和交互。html

2、animation 屬性

2.一、基本用法

@keyframes mykf
{
  from {background: red;}
  to {background: yellow;}
}

div
{
    animation: mykf 5s infinite;
}
複製代碼

2.二、六個部分

animation-name 動畫的名稱，是一個 keyframes 類型的值
animation-duration 動畫的時長
animation-timing-function 動畫的時間曲線
animation-delay 動畫開始前的延遲
animation-iteration-count 動畫的播放次數
animation-direction 動畫的方向

3、transition 屬性

3.一、四個部分

transition-property 要變換的屬性
transition-duration 變換的時長
transition-timing-function 時間曲線
transition-delay 延遲

3.二、組合

/* 定義transition達到各段曲線都不一樣的效果 */
@keyframes mykf {
  from { top: 0; transition:top ease}
  50% { top: 30px;transition:top ease-in }
  75% { top: 10px;transition:top ease-out }
  to { top: 0; transition:top linear}
}
複製代碼

4、三次貝塞爾曲線

貝塞爾曲線是一種插值曲線，它描述了兩個點之間差值來造成連續的曲線形狀的規則。前端

K 次貝塞爾插值算法須要 k+1 個控制點，最簡單的一次貝塞爾插值就是線性插值，將時間表示爲 0 到 1 的區間;web

4.一、一次貝塞爾插值公式

4.二、二次貝塞爾插值公式

4.三、三次貝塞爾插值公式

4.四、JavaScript版本的代碼

翻譯自webkit的C++代碼，這個JavaScript版本的三次貝塞爾曲線能夠用於實現跟CSS如出一轍的動畫算法

// 瀏覽器通常採用了數值算法
function generate(p1x, p1y, p2x, p2y) {
    const ZERO_LIMIT = 1e-6;
    // Calculate the polynomial coefficients,
    // implicit first and last control points are (0,0) and (1,1).
    const ax = 3 * p1x - 3 * p2x + 1;
    const bx = 3 * p2x - 6 * p1x;
    const cx = 3 * p1x;

    const ay = 3 * p1y - 3 * p2y + 1;
    const by = 3 * p2y - 6 * p1y;
    const cy = 3 * p1y;

    function sampleCurveDerivativeX(t) {
        // `ax t^3 + bx t^2 + cx t' expanded using Horner 's rule.
        return (3 * ax * t + 2 * bx) * t + cx;
    }

    function sampleCurveX(t) {
        return ((ax * t + bx) * t + cx ) * t;
    }

    function sampleCurveY(t) {
        return ((ay * t + by) * t + cy ) * t;
    }

    // Given an x value, find a parametric value it came from.
    function solveCurveX(x) {
        var t2 = x;
        var derivative;
        var x2;

        // https://trac.webkit.org/browser/trunk/Source/WebCore/platform/animation
        // First try a few iterations of Newton's method -- normally very fast.
        // http://en.wikipedia.org/wiki/Newton's_method
        for (let i = 0; i < 8; i++) {
            // f(t)-x=0
            x2 = sampleCurveX(t2) - x;
            if (Math.abs(x2) < ZERO_LIMIT) {
                return t2;
            }
            derivative = sampleCurveDerivativeX(t2);
            // == 0, failure
            /* istanbul ignore if */
            if (Math.abs(derivative) < ZERO_LIMIT) {
                break;
            }
            t2 -= x2 / derivative;
        }

        // Fall back to the bisection method for reliability.
        // bisection
        // http://en.wikipedia.org/wiki/Bisection_method
        var t1 = 1;
        /* istanbul ignore next */
        var t0 = 0;

        /* istanbul ignore next */
        t2 = x;
        /* istanbul ignore next */
        while (t1 > t0) {
            x2 = sampleCurveX(t2) - x;
            if (Math.abs(x2) < ZERO_LIMIT) {
                return t2;
            }
            if (x2 > 0) {
                t1 = t2;
            } else {
                t0 = t2;
            }
            t2 = (t1 + t0) / 2;
        }

        // Failure
        return t2;
    }

    function solve(x) {
        return sampleCurveY(solveCurveX(x));
    }

    return solve;
}
複製代碼

5、貝塞爾曲線擬合

5.一、用於模擬拋物線

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Simulation</title>
  <style> .ball { width:10px; height:10px; background-color:black; border-radius:5px; position:absolute; left:0; top:0; transform:translateY(180px); } </style>
</head>
<body>
  <label> 運動時間：<input value="3.6" type="number" id="t" />s</label><br/>
  <label> 初速度：<input value="-21" type="number" id="vy" /> px/s</label><br/>
  <label> 水平速度：<input value="21" type="number" id="vx" /> px/s</label><br/>
  <label> 重力：<input value="10" type="number" id="g" /> px/s²</label><br/>
  <button onclick="createBall()"> 來一個球 </button>
</body>
</html>
複製代碼

// 核心函數
function generateCubicBezier (v, g, t){
    var a = v / g;
    var b = t + v / g;

    return [[(a / 3 + (a + b) / 3 - a) / (b - a), (a * a / 3 + a * b * 2 / 3 - a * a) / (b * b - a * a)],
        [(b / 3 + (a + b) / 3 - a) / (b - a), (b * b / 3 + a * b * 2 / 3 - a * a) / (b * b - a * a)]];
}

function createBall() {
  var ball = document.createElement("div");
  var t = Number(document.getElementById("t").value);
  var vx = Number(document.getElementById("vx").value);
  var vy = Number(document.getElementById("vy").value);
  var g = Number(document.getElementById("g").value);
  ball.className = "ball";
  document.body.appendChild(ball)
  ball.style.transition = `left linear ${t}s, top cubic-bezier(${generateCubicBezier(vy, g, t)}) ${t}s`;
  setTimeout(function(){
    ball.style.left = `${vx * t}px`; 
    ball.style.top = `${vy * t + 0.5 * g * t * t}px`; 
  }, 100);
  setTimeout(function(){ document.body.removeChild(ball); }, t * 1000);
}
複製代碼