cubic-bezier 是通过贝赛尔曲线来计算“转换”过程中的属性值。不过这个过程人肉处理也是非常麻烦的事情，在实际生产是可以使用在线工具( cubic-bezier )来帮你处理：
steps() 函数指定了一个阶跃函数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end 。
假设有一个 3s * 2 ( animation-iteration-count: 2;animation-duration: 3s; )的动画，我们分别对它应用 steps(3, start) 和 steps(3, end) ，做出阶跃函数曲线如下：
steps(3,start):
steps() 第一个参数将动画分割成三段。当指定跃点为 start 时，动画在每个计时周期的起点发生阶跃（即图中空心圆 → 实心圆）。由于第一次阶跃发生在第一个计时周期的起点处（ 0s ），所以我们看到的第一步动画（初态）就为 1/3 的状态，因此在视觉上动画的过程为 1/3 → 2/3 → 1 。
在JavaScript中就类似于下面这样：
var animateAtStart = function (steps, duration) { var current = 0; var interval = duration / steps; var timer = function () { current++; applyStylesAtStep(current); if (current < steps) { setTimeout(timer, interval); } }; timer();}; ログイン後にコピー
steps(3, end):
当指定跃点为 end ，动画则在每个计时周期的终点发生阶跃（即图中空心圆 → 实心圆）。由于第一次阶跃发生在第一个计时周期结束时（ 1s ），所以我们看到的初态为 0% 的状态；而在整个动画周期完成处（ 3s ），虽然发生阶跃跳到了 100% 的状态，但同时动画结束，所以 100% 的状态不可视。因此在视觉上动画的过程为 0 → 1/3 → 2/3 （回忆一下数电里的异步清零，当所有输出端都为高电平的时候触发清零，所以全为高电平是暂态）。
在JavaScript中就类似于下面这样：
var animateAtEnd = function (steps, duration) { var current = 0; var interval = duration / steps; var timer = function () { applyStylesAtStep(current); current++; if (current < steps) { setTimeout(timer, interval); } }; timer();}; ログイン後にコピー
有了 steps() 也就有了Sprites动画。比如2015年年货节揭幕动画。
Web Animation API Web Animation API 称之为Web动画API，是一个新的JavaScript API。它致力于集合CSS3动画的性能、JavaScript的灵活、动画库的丰富等各家所长，将尽可能多的动画控制由原生浏览器实现，并添加许多CSS不具备的变量、控制以及或调的选项。
这里提供两个有关于Web Animation API的视频：
Alex Danilo在Google开发者大会介绍了Web动画API（WAAPI）。这是一个高水平的关于API的概述，关于它如何工作以及可以用于何处
Rachel Nabors 2015年在SFHTML5的演讲。除了对Web animation非常多的激情，还给非技术观众做了相当好的讲解。
.animation() 方法 WAAPI核心在于提供了 Element.animate() 方法，它会返回一个 AnimationPlayer ,其可以帮助我们做一些有趣的动画。 animation() 接受两个参数，一个是 KeyframeEffects 数组，一个是 AnimationEffectTimingProperties 选项。基本上第一个参数会映射到你放到CSS @keyframes 中的内容，第二个参数是你将在你的CSS规则中使用 animation-* 属性（或 animation 简写，像我前面用的那样）指定的内容。这里有个关键的好处是我们可以使用变量或重用先前定义的 KeyframeEffects ，而用CSS的话我们就会被限制只能使用我们先前定义的值。
对于每一个 KeyframeEffect ，我们把CSS中的百分比偏移量 offset 变成值为 0 到 1 的小数。它是 可选 的，如果你没有指定任何值，它们就会平均分布（所以如果你有三个，第一个的偏移量为 0 ，第二个的偏移量为 .5 ，第三个则为 1 ）。你还可以指定一个 easing 属性，这和CSS中的 animation-timing-function 一样。 KeyframeEffect 中的其它属性也都是可以添加动画的属性。每个属性的值都应该和你在JavaScript中使用 element.style 指定的相匹配，即 opacity 的值应该是一个数字，而 transform 应该是字符串。
例如：
var player = document.getElementById('toAnimate').animate([], { duration: 700, //动画持续时长,毫秒(ms)，相当于animation-duration easing: 'ease-in-out', //动画播放函数方式,相当于animation-timing-function delay: 10, //动画延迟播放时间,毫秒(ms)，相当于animation-delay iterations: Infinity, //动画播放次数,相当于animation-iteration-count direction: 'alternate', //播放元素的方向，相当于animation-direction fill: 'forwards' //动画播放完之后，关键帧是否保留在结束状态，相当于animation-fill-mode}); ログイン後にコピー
AnimationPlayer的播放状态及其控制 调用 element.animate() ，会返回一个 AnimationPlayer 对象，然后动画开始播放。可以通过检查只读属性 playState 来查看当前动画的状态，它会返回如下五个字符串之一。通过调用下面的四种方法之一，还可以修改动画的当前状态：
var player = element.animate(/* ... */);console.log(player.playState); //"running"player.pause(); //"paused"player.play(); //"running"player.cancel(); //"idle"... 跳到初始状态player.finish(); //"finished"...跳到结束状态 ログイン後にコピー
除了 running 、 paused 、 idle 和 finished 这些状态，还有一个 pending 状态，定义了当一个播放或暂停任务被挂起时的状态。
播放速度 通过读/写 playbackRate 属性来改变动画播放速度：
var player = element.animate(/* ... */);console.log(player.playbackRate); //1player.playbackRate = 2; // 两倍速度，可以加速也可以减速 ログイン後にコピー
结束回调 使用CSS过渡，在过渡结束时，通常会触发一个事件。同样， AnimationPlayer 可以让你在动画完成，或者调用前面讨论的 finish() 方法时，指定一个 onfinish 函数。
注意: 根据规范的内容，设置了无限迭代次数的动画是没有结束的， playbackRate 的值也不可能为 0 。规范还要求调用一个已经存在的 oncancel 回调，以及使用除了这些回调之外的 Promise ，这应该会比较受欢迎（虽然目前还没有实现）。
时间轴 每个 AnimationPlayer 都提供了两个读/写的时间相关的属性—— currentTime 和 startTime 。我们现在侧重讲解前者。
currentTime 返回当前动画的所在的毫秒数。最大值为 delay + (duration * iterations) ，当然，无限迭代的情况则没有最大值。
var player = element.animate([ {opacity: 1}, {opacity: 0}], { duration: 1000, delay: 500, iterations: 3});player.onfinish = function() { console.log(player.currentTime); // 3500}; ログイン後にコピー
动画的播放速率会影响时间轴进行的速度。如果你设置的播放率为 10 ，你的最大的 currentTime 保持不变，但是你会比时间轴快 10 倍。
因为 currentTime 是读/写属性，可以使用它来跳转到时间轴上的某个点。它还可以让我们同步两个动画。
多个动画 可以给一个元素多次调用 animate() ，类似CSS中的多动画。例如，
使用的CSS：
#toAnimate { animation: pulse 1s, activate 3000ms, have-fun-with-it 2.5s;}@keyframes pulse { /* ... */}@keyframes activate { /* ... */}@keyframes have-fun-with-it { /* ... */} ログイン後にコピー
使用WAAPI：
var animated = document.getElementById('toAnimate');var pulseKeyframes, //定义关键帧变量 activateKeyframes, haveFunKeyframes;var pulse = animated.animate(pulseKeyframes, 1000); //第二个参数是持续时间的有效简写var activate = animated.animate(activateKeyframes, 3000);var haveFunWithIt = animated.animate(haveFunKeyframes, 2500); ログイン後にコピー
使用WAAPI，它可以创建三个 AnimationPlayer ，每个都可以暂停、播放、结束、取消，也可以通过时间轴或播放速率来进行控制。
KeyframeEffects KeyframeEffect 传入三个参数：要添加动画的元素、关键帧数组、时间函数 timing 选项。这个新对象基本上还是为单独动画绘制的蓝图。 它不用于启动动画，只能定义动画 。
var elem = document.getElementById('toAnimate');var timings = { duration: 1000, fill: 'both'}var keyframes = [ { opacity: 1 }, { opacity: 0 }];var effect = new KeyframeEffect(elem, keyframes, timings); ログイン後にコピー
Web动画方式的优劣对比 动画在过去的五年里发展得很好，因为强大的CSS支持以及JavaScript新增内容的提升。但是每一种实现动画的方法，都有其缺点和优点。
CSS动画因为有硬件加速，所以过渡平滑，而且CSS动画的支持内置在浏览器中，但是规则是在CSS中声明的，需要通过JavaScript来实现值的动态变化。 requestAnimationFrame 有良好的支持，并在动画中允许浏览器优化，但是它会被中断——如果有很多其它的JavaScript在跑的时候。而且，它往往还需要数学计算来获取倒计时。 setInterval 是很多开发人员进入动画世界的大门，但是它并不精确，而且可能导致结结巴巴的动画效果。 jQuery.animate() 也让一些其它的开发者进入了动画大世界，但是经常会有性能问题。 库的话如 Velocity 和 GreenSock (GSAP) 完善了JavaScript性能，而且经过测试，在很多情况下是最好的选择。但是，它们还是需要维护和加载外部库。 理想情况下，我们可以在浏览器级别打包尽可能多的动画控件放进去。这些库可以专注于提供新特性，还会自动更新。而 WAAPI 就是在试图做到这一点。它的目标是既有CSS的性能优势，又有JavaScript的优点和灵活性（还有SVG动画），然后把它赋给浏览器，使其工作得更好。
Web动画的原则 迪士尼经过基础工作练习的长时间累积，在 1981 年出版的 The Illusion of Life: Disney Animation 一书中发表了动画的十二个原则 ( 12 Principles of Animation ) 。这些原则描述了动画能怎样用于让观众相信自己沉浸在现实世界中。
了解这些原则，有助于你更好的完成Web动画效果。
挤压和拉伸 (Squash and stretch)
这是物体存在质量且运动时质量保持不变的概念。当一个球在弹跳时，碰击到地面会变扁，恢复的时间会越来越短。创建对象的时候最有用的方法是参照实物，比如人、时钟和弹性球。
当它和网页元件一起工作时可能会忽略这个原则。DOM 对象不一定和实物相关，它会按需要在屏幕上缩放。例如，一个按钮会变大并变成一个信息框，或者错误信息会出现和消失。
预备动作 (Anticipation)
运动不倾向于突然发生。在现实生活中，无论是一个球在掉到桌子前就开始滚动，或是一个人屈膝准备起跳，运动通常有着某种事先的累积。
我们能用它去让我们的过渡动画显得更逼真。预备动作可以是一个细微的反弹，帮人们理解什么对象将在屏幕中发生变化并留下痕迹。
たとえば、コンポーネントの上にマウスを移動すると、コンポーネントが大きくなる前に少し縮小したり、初期リストに追加のエントリを追加して、他のエントリを削除する方法を紹介したりできます。
ステージング
ステージングにより、シーン内のオブジェクトが確実にフォーカスされ、メイン アニメーションが発生する場所にシーン内の他のオブジェクトやビジュアルが優先されるようになります。これは、メインのアニメーションを目立つ位置に配置するか、他の要素をぼかしてユーザーが見るべきものに集中できるようにすることを意味します。
Web ページに関して言えば、1 つの方法はモデルを使用して特定のコンテンツをカバーすることです。既存のページにマスクを追加し、主に関心のあるコンテンツを前面に表示します。
もう 1 つの方法は、アクションを使用することです。多くのオブジェクトが動いている場合、どのオブジェクトが注目に値するのかを知るのは困難です。これにより、他のすべての動きが停止し、1 つだけが残っている場合、たとえそれが非常に弱い場合でも、オブジェクトを検出しやすくなります。
もう 1 つのアプローチは、震えたり点滅したりするボタンを作成して、文書を保存する必要があることをユーザーに通知することです。画面は静止しているため、小さな動きも目立ちます。
連続モーションとポーズツーポーズ (直進アクションとポーズツーポーズ)
連続モーションはアニメーションのフレームごとに描画され、ポーズの対応関係は通常、ポーズを定義した後にアシスタントによって埋められます。キーフレームのシリーズ。
ほとんどの Web アニメーションはジェスチャ対応を使用します。ブラウザが各キー フレーム間にできるだけ多くのフレームを挿入することで、キー フレーム間の移行をスムーズに行うことができます。
1 つの例外は、時間関数ステップです。この機能を使用すると、ブラウザは可能な限り多くの順序が狂ったフレームを「ステップ実行」します。この方法では、一連の画像を描画し、ブラウザーにそれらを順番に表示させることができ、フレーム単位のアニメーション スタイルの先駆けとなりました。
フォロースルーと重複アクション
物事は常に同時に起こるわけではありません。車が急停止して停止するとき、車は前傾し、タイヤから煙が出ますが、ドライバーは前進を続けます。
これらの詳細は、アクションのフォローおよび重複の例です。これらは Web ページで使用され、何かが廃止され、忘れ去られることはないことを強調するのに役立ちます。たとえば、アイテムが少しスライドしすぎた場合でも、正しい位置に自動的に修正されます。
動きの重なりの感覚を作り出すために、要素をどこでもわずかに異なる速度で動かすことができます。 iOSのビュー遷移でよく使われる方法です。一部のボタンやコンポーネントが異なる速度で移動すると、すべてが同じ速度で移動する場合よりも全体的な効果がより現実的になり、訪問者が変化を適切に理解する時間が確保されます。
ウェブでは、これはトランジションやアニメーションを異なる速度で実行することを意味する場合があります。
スローインとスローアウト (スローインとスローアウト)
物体は静止状態から最高速度まで一気に加速することは少なく、徐々に加速し、停止する前に減速する傾向があります。加速と減速がなく、アニメーションはロボットのように感じられます。
CSS の観点では、イーズインとイーズアウトは理解しやすく、タイミング関数はアニメーション中の変化の速度を記述する方法です。
タイミング関数を使用すると、アニメーションを低速 (イーズイン) から高速減速 (イーズアウト) まで加速したり、ベジェ曲線を使用してより複雑な効果を作成したりできます。
円弧
オブジェクトはより現実的ですが、追従するときに直線的に動くことはほとんどありません 簡単に出入りできます - 円弧を描いて動く傾向があります。
円弧の動きを実現する CSS の方法がいくつかあります。 1 つは、複数のアニメーションを組み合わせる方法です。たとえば、弾むボールのアニメーションでは、ボールを上下に動かし、同時にボールを右に動かすことができます。弧。
もう 1 つは回転コンポーネントで、オブジェクトの外側に原点を回転中心として設定できます。オブジェクトを回転すると、円弧に沿って動いているように見えます。
二次アクション
メインアニメーションの実行中に、二次アクションによりその効果を高めることができます。それは、人が腕を振って首をかしげて歩いたり、弾むボールが弾むときに粉を蹴ったりするのと同じです。
Web ページでは、メイン フォーカスが表示されたら、項目をリストの中央にドラッグするなどの二次アクションの実行を開始できます。
タイミング (タイミング)
アニメーションのタイミングは、重そうなオブジェクトをアニメーション化する場合や、キャラクターのアニメーションを追加する場合に使用します。
これは、Web ページ上のアニメーション期間またはトランジション期間の値を調整するのと同じくらい簡単かもしれません。
アニメーションの時間を長くするのは簡単ですが、時間のリズムを調整することで、アニメーションの内容やインタラクションをより際立たせることができます。
誇張
誇張は、魅力を表現し、何かを噛むために喉を大きく開けようとするオオカミなど、特定の動作にドラマを加えるために漫画で最も一般的に使用されます。
Web ページでは、オブジェクトを上下にスライドさせることで、たとえばフォームに記入するときに、縮小したり色褪せたりする部分よりも鮮やかな部分をより目立たせることができます。
立体描画
オブジェクトを 3 次元でアニメーション化する場合は、遠近法の原則に従っていることを確認するために特別な注意を払う必要があります。人間は 3 次元の世界に慣れているため、物体が実際の動作と異なる動作をすると、見た目が悪くなります。
ブラウザは 3D 変換を適切にサポートするようになりました。つまり、シーン内で 3D オブジェクトを回転して配置することができ、ブラウザはその変換を自動的に制御できます。
魅力
魅力とは、アーティストのアイデアとつながることを可能にする芸術作品の品質です。俳優の魅力と同じように、細部へのこだわりとアクションが組み合わさって魅力が生まれます。
Web ページ上で注意深く作成されたアニメーションは魅力を生み出すことができ、Stripe のような企業はチェックアウト プロセスの信頼性を高めるためにアニメーションを多用しています。
多読 Webアニメーション12原則 アニメーション12基本ルール アニメーション12基本ルール（動画） アニメーションでデザインする Webアニメーションのパフォーマンス Webページの機能が変化するにつれて、H5になるにつれて携帯電話での H5 の開発ではハードウェア パフォーマンスのボトルネックが発生するだけでなく、Web ページの実行時パフォーマンスの問題もますます顕著になってきています。 Web ページの実行時にユーザーが最も直感的に感じるのは、UI 操作のスムーズさです。スムーズか引っかかりか、気持ちいいか不快かは、すべて UI アニメーションの細部にあります。
フレーム レートはアニメーションの滑らかさを反映できます:
Web ページでは、フレーム レート 50 ～ 60 fps のアニメーションは非常に滑らかで、人々がより快適に感じられます フレーム レート 30 ～ 50 fps のアニメーション、人それぞれの感性の違いにより、快適さのレベルは人によって異なります フレームレートが 30fps 未満のアニメーションは、明らかな遅延や不快感を感じさせます フレームレートの変動が大きいアニメーションも、人によって感じられます。 .. フリーズするには フレーム レートはアニメーションの滑らかさを数値化できます。 滑らかなアニメーションには一般に次の 2 つの特徴があります:
高いフレーム レート (60fps に近いことが最高) 変動が少なく安定したフレーム レート (フレーム スキップはほとんどありません) ) 現象) アニメーション チューニングの戦略とテクニック アニメーション チューニングにはいくつかの参考提案があります:
各フレームのパフォーマンスを改善します (フレーム期間を短縮し、フレーム レートを増加します) 。 頻繁なスケジュール変更は避けてください。 広い領域の再描画は避けてください。 JS の実行パフォーマンスを最適化します。 安定したフレーム レートを確保します (フレーム スキップを回避します) フレーム スキップを回避するために、連続アニメーション プロセス中に時間のかかる操作 (大面積の再描画、再配置、複雑な JS の実行など) を実行しないでください。 時間のかかる操作を回避できない場合は、たとえば、時間のかかる操作をアニメーションの最初または最後に配置するなど、問題を解決してください。時間のかかる操作をアニメーションの各フレームにオフロードします。 ハードウェア アクセラレーション レンダリング パスの最適化 再描画を避けるために、レイヤー変更効果 (変換など) を通じてディスプレイスメント、スケーリング、その他のアニメーションを実現します。 レイヤーを合理的に分割し、動的と静的を分離することで、大規模な領域の再描画を回避できます。 階層化された最適化アニメーションを使用する場合は、(Safari デバッグ ツールを使用した) メモリ消費に注意する必要があります。 低パフォーマンスのデバイスのデバッグを優先する Android デバイスのデバッグを優先する: モバイル デバイスのハードウェア構成は一般にデスクトップ デバイスよりも低く、モバイル デバイスの中でも Android デバイスのパフォーマンスは一般に iOS よりも劣ります。幸いなことに、Android は Chrome 独自のリモート デバッグ ツールを使用してアニメーションのパフォーマンスを簡単にデバッグできるため (Android 4.0 以降)、最初に Android デバイスをデバッグすると問題を早期に検出し、より簡単に解決できます。 。
フレームレートテスト Chromeの組み込みフレームレート監視ツールは、グローバルフレームレートとページ再描画時間を監視するために使用されます
Chrome Timeline、キラー監視およびデバッグツール
上記は監視とデバッグですChrome ブラウザを使用したくない場合は、グローバルまたは指定された場所のフレーム レートをリッスンする Stats.js などの JavaScript を使用してこのテストを実行できます。
Web アニメーション リソース @awwwards-team が Web アニメーション インフォグラフィックスをコンパイルしました。この図では、Web アニメーションに関するさまざまなリソースを提供しています:
Web アニメーションを作成する場合、参照または使用できる既製のリソースが多数あります。いくつかのリンクをお勧めします:
Animate.CSS、CSS アニメーション効果ライブラリ。 Velocity.js、JavaScript アニメーション GSAP、主に SVG アニメーションと組み合わせて使用されます その他のリソース セットについては、ここをクリックして表示できます。
Da Mo 通称「Da Mo」、W3CPlus の創設者、現在は淘宝網で働いています。中国の Drupal コミュニティの中心メンバーの 1 人。彼は HTML5、CSS3、Sass などのフロントエンド スクリプト言語について非常に深い理解と豊富な実践経験を持っており、特に CSS3 の研究に注力しており、中国で最初に研究と使用を行った人物の 1 人です。 CSS3テクノロジー。 CSS3、Sass、Drupalの中国人エバンジェリスト。 2014 年に『図解 CSS3: コア技術と事例実践』を出版しました。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
2024-10-22 09:46:29
2024-10-13 13:53:41
2024-10-12 12:15:51
2024-10-11 22:47:31
2024-10-11 19:36:51
2024-10-11 15:50:41
2024-10-11 15:07:41
2024-10-11 14:21:21
2024-10-11 12:59:11
2024-10-11 12:17:31
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
