iphone - アニメーション効果: ボタンをパーツに分解

Question

ボタンを押したときにボタンを小さな部分で壊すようなアニメーション効果が必要です。Quartzなどで簡単にできる方法はありますか？正確にどのように見えるかについてはかなり柔軟です。

Answer 1

私はあなたのボタン画像をグラフィックス プログラムに取り込み、異なるバージョンの画像を用意します。それぞれの画像は、すべての画像が積み上げられた場合にボタン全体。(より良い効果を得るには、「ピース」の端に少しペイントして、モデリングを行うことができます。)

使用するファイル形式について少し調査する必要があります。おそらく png が最適ですが、jpeg も同様に機能する可能性があります。

Xcode に戻り、「ピース」ごとに CALayer を作成し、作成したグラフィック ファイルを CALayer のコンテンツとして設定します。「ブレイクアップ」アニメーションを行うときが来たら、新しい CALayers をサブレイヤーとしてビューのレイヤーに追加します。

    [self.view.layer addSublayer:layerPiece]; // do this for each layer

そして、レイヤーごとに CAKeyframeAnimations の CAAnimationGroup (おそらく transform.translate、transform.rotation、および opacity) を作成します。そこに例があります。役立つヒント: 回転はラジアンである必要があります。レイヤーが回転して互いに離れて移動し、おそらく最後にフェードアウトするように値を設定する必要があります。フェードアウト アニメーションの例を次に示します。

CAKeyframeAnimation *animFadeOut = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
animFadeOut.values = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0], [NSNumber numberWithFloat:1.0], nil];
animFadeOut.keyTimes = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.4f], [NSNumber numberWithFloat:1.0f], nil];

最後に、レイヤーごとに、次のようにアニメーションを開始します。

[layerPiece3 addAnimation:animGroup3 forKey:@"arbitraryAnimPropertyString"];

これは大変な作業です。別の方法として、Adobe After Effects などの合成プログラムにアクセスできる場合は、アニメーションのムービーを準備し (それでもかなりの作業量ですが、やみくもにキーフレーム番号を設定するよりははるかに簡単です)、ボタン上で再生するだけです。私は iOS でムービーを再生したことはありませんが、それを CALayer のコンテンツとして設定し、レイヤーをビューに追加してムービーを表示および再生すると仮定します。

理想的には、3D ソフトウェアを使用してボタンのモデル化、テクスチャリング、および照明を行い、パーティクル エフェクトを使用してボタンを分解し、短いムービーをレンダリングして、そのムービーをレイヤーに適用します。