多くの人が電子ブックにおけるリッチメディアの関連性について議論するかもしれませんが、どんな種類のアニメーションも静的な画像よりも読者に魅力的であることは間違いありません。 アニメーションを作成するというアイデアは、作成者にとって威圧的なものになる可能性があります。 それは結果に関するものではなく、それを実現するために必要なものです。 それは醜い得ることができます。 または悪い：高価。
他の人のためのインタラクティブな電子ブックを開発する私たちの旅では、我々はアニメーションの力を実現し、複数の電子ブックでそれを活用して イメージへの非常にマイナーな付加は実際にあなたのebookに巨大な影響を与え、それを疑いなく残りから際立たせることができる。
本当の課題は、アニメーションを生成するための効率的かつ簡単な方法を見つけることです。 この記事では、電子ブックでアニメーション技術のいくつかの背景を持っているし、明確な例でアニメーション技術を生成するために比較的簡単な数
アニメーションの種類
簡単なイントロを与えるために、アニメーションをさまざまな方法で作成することができます。 これらは、フレームバイフレームアニメーションと同じくらい複雑（そして時間がかかる）で つまり、秒の分数ごとに別々の画像を描画します。 私たちはトゥイーン（in-betweeningの略）にもっと興味があります。 トゥイーンすることで、アニメーションの開始状態と終了状態を指定し、残りの状態はコンピュータによって自動的に生成されます。 また、加速度、弾力性、バウンスなどのいくつかの速度効果を適用するために、使用するイージング関数を指定することもできます。 イージング関数の完全なリストは次のとおりです。
では、アニメーションはどのように電子ブックの中に埋め込まれていますか？ EPUBの基礎となる技術はHTMLなので、ここにあなたのオプションがあります:
- アニメーションGIF画像
- SVGアニメーション
- Flashムービー
- CSSアニメーション
- ページウィジェット
このリストは、あなたを怖がらせるためではなく、あなたのた しかし、このリストを単純化しましょう。 アニメーションGIF画像には特別なソフトウェア（Photoshopなど）が必要で、アニメーションファイルのサイズは通常非常に大きいです。 SVGアニメーションはベクターグラフィックスのみをサポートし、作成するには開発の背景が必要です。 Flashは古くなっており、apple iBooksのような読者ではサポートされません。 これは、CSSアニメーションやページウィジェットに私たちを残します。 彼らは基本的に兄弟と姉妹の両方です。 ページウィジェットは、ページ内で直接CSSアニメーションを適用する代わりに、iframe(ウィンドウ)を介してCSSを適用します。 アニメーション全体を単一のファイルにまとめる方が良いので、ページウィジェットを使用することをお勧めします。
アニメーションソフトウェア
ソフトウェアが関与している限り、Google Web Designerはあなたのアニメーションを作成するためのシンプルでフリーソフトです。 Google Web Designerは、webおよびモバイル用のアニメーションHTML5バナーや広告の作成に焦点を当てています。 私たちは、あなたが迅速なアニメーションを作成するために、より高度なものを必要としないこ
Google Web Designerの基本的なワークフローは次のとおりです:
- それぞれの画像を別々のレイヤーにインポートします
- 各レイヤーについて、キーフレームを指定し、イージング機能を選択します
- zipパッケージとしてエクスポート
エクスポートされたファイルは、ページに追加する準備ができているページウィジェットですページウィジェットを電子ブックに追加する方法の詳細については、ブックウィジェットに関する記事を参照してください。
アニメーション技術
ノウハウは、効果的なアニメーションを作成するのに十分ではありません。 あなたがそれをどのように使用するかは重要です。 ちょうどストーブを使用する方法を学ぶことのように必ずしもBlanquette de Veauをすぐに調理することを意味しない。 あなたは最初にいくつかのレシピを学ぶ必要があります。 それでは、アニメーションを適用するために別の（そして簡単な）レシピを見てみましょう。
フローティングイメージ
これはアニメーションの最も単純な形式です。 異なる方向に移動する画像（同様に回転することがあります）。 そして、あなたはそれがテーブルに新しいものをもたらさないと思うだろうが、あなたは間違っている。 動きがいかに自然であるかによって、あなたのebookに持って来、あなたの読者に懇願できるかどの位生命の驚く。 アニメーションのこのタイプについての最もよい事は、それが余分なリソースなしで、あなたの現在の画像のいずれかに適用できるということです。 アニメーションを背景とマージするには、画像の背景が白であることをお勧めします（背景が白であると仮定します）。 ここに私達が鳥について作成した相互ebookからの例はある。
ここでは、いくつかの基本的な回転のみを持つ他の例があります。 正しいタイミングを適用することは非常に信じられる効果を与えることができます。
あなたはすべてのウェブ上でこれらのタイプのアニメーションを見つけることができます。 たとえば、このリンクでは、私たちが好きだった浮遊画像の別の例を見つけることができます（浮遊宇宙飛行士のヒキガエルを見るために思い出を呼び 小さな複雑さを追加するには、後ろに座っている別の画像を所定の位置に固定することができます。 次のように：
画像を変換する
後者と同様ですが、画像を移動する代わりに、画像を変換しています。 CSS3でサポートされている変換は、スケール、スキュー、および3D回転です。 どの画像に変換を適用するかについては、非常に選択的である必要があります。 間違った変換は、物事がかなり奇妙に見えることができます。 ここでは、私たちのインタラクティブな電子ブックで鳥に適用されるスキューと3D回転変換の組み合わせです。
このタイプのアニメーションでは、画像はサブ画像に分割されます。 空白の画面から、各サブ画像は異なる方向から独自の入り口を作り、最終的に元の画像を完成させます。 あなたが何をしても、これは決して悪く見えません。 それは間違いなく良く見えますが、それはより良く見えることができます。 サブ画像の選択とその遷移は、アニメーションが読者にどのように魅力的になるかを制御します。 このアニメーションをループするには、サブイメージを画面の外に戻すことができます。
グラフとグラフ
レポートや統計を含む電子ブックを作成する場合は、おそらくこれが便利です。 あなたはおそらく、あなたは非常に複雑な何かを見ていると思っています。 それは完全に反対です。 最小限の労力と簡単なノウハウを使用すると、魔法のタッチであなたのチャートをアニメーション化し、あなたの読者はそれが仕事のトンだったと思 多くのアニメーションは、実際にそのように存在する–あなたの目は、現実にはそれがはるかに簡単です何かを理解するには、あなたの心をだまします。
だから、グラフやグラフをアニメーション化するという考え方は次のようになります。 グラフ/グラフを画像としてGoogle Web Designerにインポートします。 上のレイヤーでは、白いボックスが作成されます。 これはマスキング効果を与えるために使用されます。 最初は、水平方向の&垂直軸を除いて、白いボックスがグラフ/グラフの上に表示されます。 あなたは下に隠されているものを明らかにするために、垂直方向に上向きに白いボックスを遷移されます。 読者の目は、バーが下から上向きに成長しているものであると信じるように彼を欺くでしょう。 アニメーションをループしたい場合は、白いボックスを下に戻してグラフをもう一度非表示にすることができます。 正しいタイミングで、これはちょうどあなたの読者を誘惑します。 いくつかの例に飛び乗ってみましょうか？ ここでは、追加の画像がバーのキャップとして、白いボックスと一緒にアニメーション化されたより複雑な例です。
結論
この記事では、アニメーションが電子ブックでどのように機能するか、およびその背後にある技術の一般的な考え方を取り上げました。 私たちは、あなたのワークフローからあまりにも多くの時間を取ることなく、あなたの電子ブックの画像に迅速に適用することができます四つの簡 それはすべて、GoogleのWebデザイナーの基本を持っていることに投資するいくつかの小さなセットアップ時間にダウンしています。 別の記事では、我々はあなたの最初のアニメーションを作成するために、そこに従うために、Googleのウェブデザイナーと赤ちゃんの手順をより詳しく見て
その間に、アニメ化を開始！
あなたも楽しむかもしれません：
より魅力的な電子ブックを作成するための5つのハック
クールなトリック：電子ブックで動的な文字名を作成する
インタラクティブな電子ブックを作成する方法：ステップバイステップガイド
ビデオを最適化し、あなたの電子ブックに追加する方法
電子ブック著者ガイド画像