SVGアニメーション – Web Animations API を使う – Element.animate()メソッドの options – easing の ease について
前回の投稿に続き、Element.animate()メソッド の options の easing について試してみます。
easingプロパティ – ease について
ease は「急速に加速してゆっくり終わる」変化をします。
前回の投稿と同様に、keyframesにeasingプロパティを記載する形で試してみます。
以下、サンプル全体です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html><html><head><meta charset="UTF-8"><title>テストHTML</title></head><body><svg xmlns="http://www.w3.org/2000/svg" width = "500" height = "100" viewBox = "0 0 500 100"> <rect id = "recttest" x = "0" y = "0" width = "100" height = "70" fill = "#999" /></svg><script>// アニメーション対象のDOM要素を取得let dom_recttest = document.querySelector("#recttest");// keyframesの定義const keyframes = [ {x:'0px' , fill:'#999999', easing: 'ease'}, // グレー {x:'100px', fill:'#3399FF', easing: 'ease'}, // ブルー {x:'400px', fill:'#FF9900', easing: 'ease'}, // オレンジ];// アニメーション処理のタイミングプロパティを定義const options = { duration: 5000, direction: 'alternate', iterations: Infinity};dom_recttest.animate(keyframes, options);</script></body></html> |
画面にアクセスすると「急速に加速してゆっくり終わる」という動きが確認できます。