「ReactJS」読書メモ Fourteen_html/css_WEB-ITnose

グラデーション グループ使用の隠れた危険性

グラデーション グループを使用するときに注意する必要がある隠れた危険性も 2 つあります。

まず、グラデーション グループは、アニメーションが完了するまで子コンポーネントの削除を遅らせます。これは、transitionName 属性で指定されたクラスに CSS を指定せずに ReactCSSTransitionGroup でコンポーネントのリストをラップした場合、コンポーネントは、レンダリングをやめようとしても削除されないことを意味します。

次に、グラデーション グループの各サブコンポーネントは一意のキー属性を設定する必要があります。グラデーション グループは、このプロパティを使用してコンポーネントが開始するか終了するかを決定します。そのため、key プロパティが設定されていない場合、アニメーションは実行されず、コンポーネントは削除できなくなります。

グラデーション グループに子要素が 1 つしかない場合でも、キー属性を設定する必要があることに注意してください。

インターバル レンダリング

CSS3 アニメーションを使用すると、パフォーマンスが大幅に向上し、コードがきれいになりますが、問題に対して常に適切なツールであるとは限りません。 CSS3 をサポートしていない古いブラウザとの互換性を提供する必要がある場合もあれば、スクロールバーの位置やキャンバスのペイントなど、CSS プロパティ以外のものをアニメーション化したい場合もあります。このような場合、インターバル レンダリングは要件を満たすことができますが、CSS3 アニメーションと比較してパフォーマンスがある程度低下します。

インターバル レンダリングの最も基本的なアイデアは、コンポーネントのステータス更新を定期的にトリガーして、アニメーション時間全体でコンポーネントが現在どの段階にあるかを明確にすることです。この状態値をコンポーネントの render() メソッドに追加すると、コンポーネントは各状態の更新によってトリガーされる再レンダリングで現在のアニメーション フェーズを正しく表すことができます。

このメソッドには複数の再レンダリングが含まれるため、通常は、不要なレンダリングを避けるために requestAnimationFrame と一緒に使用するのが最善です。ただし、requestAnimationFrame がサポートされていない、または利用できない場合は、よりインテリジェントではない setTimeout() にダウングレードすることが唯一の選択肢です。

requestAnimationFrame を使用してインターバル レンダリングを実装します

インターバル レンダリングを使用して div を画面の一方の側からもう一方の側に移動したいとします。これは、それにposition: ABS を追加し、左側または上部のプロパティを更新することで実現できます。時間が変わります。消費時間内の変更の合計量に基づいて、requestAnimationFrame を使用してこのアニメーションを実装すると、スムーズなアニメーションが得られるはずです。

以下は具体的な実装例です。

すごいです

この例では、animationCompleteTimestamp という値がコンポーネントの props に設定されており、この値は requestAnimationFrame() のコールバックで返されたタイムスタンプとともに使用され、どれだけのディスプレイスメントが残っているかを計算します。計算結果は this.state.position に保存され、render() メソッドはそれを使用して div の位置を決定します。

requestAnimationFrame は、componentWillUpdate() メソッドによって呼び出されるため、コンポーネントの props に変更がある (animationCompleteTimestamp が変更されるなど) たびにトリガーされます。これには、resolveAnimationFrame の this.setState() 呼び出しが含まれます。これは、animationCompleteTime-stamp が設定されると、現在時間がanimationCompleteTimestampを超えるまで、コンポーネントは後続の requestAnimationFrame メソッドを自動的に呼び出します。

この一連のロジックは、タイムスタンプに基づいてクリアする場合にのみ当てはまります。 animeCompleteTimestamp トリガー ロジックが変更され、this.state.position の値は現在の時刻とanimationCompleteTime-stamp の差に完全に依存します。このため、 render() メソッドは、スクロール バーの位置の設定を含む、さまざまなアニメーションで this.state.position を自由に使用できます。キャンバス上での描画とその中間状態。

インターバルレンダリングには setTimeout を使用してください

requestAnimationFrame は通常、最小限のパフォーマンスペナルティで最もスムーズなアニメーションを実現しますが、古いブラウザでは利用できず、思ったよりも頻繁に呼び出される可能性があります (そして予測可能性が低くなります)。このような場合には、setTimeout() を使用できます。

var Positioner = React.createClass({	getInitialState: function(){		return {			position: 0		};	},	resolveAnimationFrame: function(){		var timestamp = new Date();		var timeRemaining = Math.max(0, this.props.animationCompleteTimestamp - timestamp);		if (timeRemaining > 0){			this.setState({				position: timeRemaining			});		}	},	componentWillUpdate: function(){		if(this.props.animationCompleteTimestamp){			requestAnimationFrame(this.resolveAnimationFrame);		}	},	render: function(){		var divStyle = {			left: this.state.position		};		return <div style={divStyle}>This will animate!</div>	}});

setTimeout() は明示的な時間間隔を受け入れ、requestAnimationFrame がこの時間間隔を独自に決定するため、このコンポーネントは使用する間隔を明確にするために追加の変数 this.props.timeoutMs に依存する必要があります。

概要

これらのアニメーション技術を使用すると、次のことが可能になります:

1. CSS3 とグラデーション グループを使用して、状態変化中にグラデーション アニメーションを効率的に適用します。
2. requestAnimationFrame を使用して、スクロールバーの位置やキャンバスの描画など、CSS の外側のものをアニメーション化します。
3. requestAnimationFrame がサポートされていない場合は、setTimeout() メソッドにダウングレードします。