Velo 第１９回　アニメーションを作る

2023年9月5日 22:08

ポイントした画像を拡大したり、文字を回転させたり、アニメーションはアイキャッチに大きな効果があります。
一方、実装は意外に簡単でタイムラインに add( ) 関数を使って、エレメントとアニメーション効果を並べた後、プレイメソッドを使うだけです。

今回のコード説明はシンプルなので、 Velo API Reference の紹介を兼ねさせて頂きます。
Velo API Reference を開いて虫眼鏡を使って animation で検索し wix-animations-frontend を開くと Introduction からの記載になります。

Intoroduction
タイムラインを使うなど、基本用語のざっくりとした説明
Typical Animation Process
タイムラインを作り、add( ) 関数でアニメーション対象と効果を並べるなど、作成のプロセスやモジュールのインポート書式、関数の説明

import wixAnimationsFrontend from 'wix-animations-frontend';

timeline( )
新規タイムラインをつくる関数 (コンストラクター) の説明
Description
タイムラインの説明、add( ) 関数の説明、play( ) 関数等の説明、タイムラインオプションの説明
Syntax
timeline( ) 関数の文法を説明

function timeline([timelineOptions: TimeLineOptions]): TimeLine

引数はタイムラインオプション、戻り値は Timeline オブジェクト等、コーディング用の仕様

timeline Parameters
引数を表で詳しく説明
Returns
戻り値の説明

関数の説明のサイドに、コーディング例を掲載。コーディングはすぐ使えるようにコピーボタンがついている。

import { timeline } from 'wix-animations-frontend';

$w.onReady(() => {
  const revealTimeline = timeline()
    .add($w('#pink'), {duration: 1500, x: -160, scale: 1.3, easing: 'easeOutBack'})
    .add($w('#green'), {duration: 1500, x: 160, scale: 1.3, easing: 'easeOutBack'}, 0)

  $w('#container').onMouseIn(() => {
    revealTimeline.play();
  });

  $w('#container').onMouseOut(() => {
    revealTimeline.reverse();
  });
});

TimeLine
タイムラインオブジェクトの説明に続き、add( ) 関数等の多くのメソッドを説明

add( )
Description
アニメーションは、タイムラインに add( )した順のプレイ、複数のエレメントを登録は同時にプレイ等、add( ) 関数の詳しい仕様

Syntax
add( ) 関数の文法を説明

function add(target: Element | Array<Element>, animation: AnimationAttributes | Array<AnimationAttributes>, [offset: number | string]): TimeLine

第１引数はエレメントまたはその配列、第２引数はアニメーション効果またはその配列、第３引数はオプションでオフセット値、戻り値はTimeline オブジェクト等、コーディング用の仕様

add Parameters
引数を表で詳しく説明
Returns
戻り値の説明

という感じです。
取説、仕様書なのでどのAPIやオブジェクトも同じフォーマットです。

最後に、画像 (myPicture) をマウスが乗ったときに少し拡大し、元に戻すアニメーション効果を、画像のマウスイベントホルダーに登録するコーディングをご覧下さい。

// アニメーション用のモジュールをインポート
import wixAnimationsFrontend from 'wix-animations-frontend';

$w.onReady(() => {
     // マウスイベントホルダーを定義
  　　$w('#myPicture').onMouseIn(() => {
             // 新規タイムラインを作成
             const myTimeline = timeline()
　　　　　　　　　　　
                 // 第１引数に対象のmyPicture, 第２引数にアニメーション効果
　　　　　　　　　// 最初の効果は画像を0.5秒で1.1倍に拡大する効果
                 .add($w('#myPicture'), {scale: 1.1, duration: 500})
　　　　　　　　　　　
                 // 最後の効果は画像を0.5秒で1倍に戻す効果
                 .add($w('#myPicture'), {scale: 1.0, duration: 500})

                 // プレイ
　　　　　　　　　.play()
     })
})

Velo開発のご依頼はこちら

この記事が気に入ったらサポートをしてみませんか？

Velo 第１９回 アニメーションを作る

Velo 第１９回　アニメーションを作る