Android アニメーション学習 - TweenAnimation_html/css_WEB-ITnose

目次

目次

Androidアニメーション学習

トゥイーンアニメーション

スケールアニメーションでサイズを調整

アルファアニメーションで透明度を調整

rotateアニメーションの回転

トランス後期アニメーションパン

Android アニメーション を学ぶ

Android には 3 種類のアニメーションがあります:

1. トゥイーン アニメーション: シーン内のオブジェクトに対して画像変換 (移動、拡大縮小、回転) を継続的に実行することによって生成されるアニメーション効果は、グラデーションアニメーションの一種。
2. フレームアニメーション: 画面遷移アニメーションの一種で、あらかじめ作成された画像を順番に再生します。
3. プロパティ アニメーション: オブジェクトのプロパティを動的に変更することでアニメーション効果を実現するプロパティ アニメーションは、API 11 の新機能です。

このブログは主に Tween アニメーションの基本的な使い方を分析します。

トゥイーン アニメーション

トゥイーン アニメーションには 4 つの形式があります:

1. アルファ: グラデーション透明アニメーション効果。
2. スケール: グラデーションサイズの拡大と縮小のアニメーション効果。
3. 翻訳: 画面位置移動アニメーション効果。
4. rotate: 画面回転アニメーション効果。

これら 4 つのアニメーション実装メソッドはすべて、Animation クラスとAnimationUtils の連携によって実装されます。アニメーション効果は、res/anim ディレクトリ内の xml ファイルで事前に設定できます。

scale アニメーション? サイズを調整します

scale のパラメータは次のとおりです:

android:fromXScale: 開始 X 方向のスケーリング比、浮動小数点値。たとえば、1.0 は変化がないことを表し、0.5 は初期サイズの 2 倍を表し、2.0 はサイズの 2 倍を表します。

android:toXScale: 終了時の X 方向のそれ自体に対する相対的なスケーリング率。

android:fromYScale: 開始時の Y 方向のそれ自体に対する相対的なスケーリング率。

android:toYScale: 終了時の Y 方向のそれ自体に対する相対的なスケーリング率。

android:pivotX: スケーリング開始点の X 軸座標。数値、パーセンテージ、パーセンテージの 3 つの形式をとることができます。 (注: 開始点は、現在のビューの左上隅の座標を指します)

android:pivotY: 開始点の Y 軸座標をスケールします。

さらに、Animation クラスは、Animation クラスから継承されたすべてのアニメーション (スケール、アルファ、移動、回転) の基本クラスです:

android:duration: アニメーションの継続時間 (ミリ秒単位)。

android:fillAfter: true に設定すると、コントロール アニメーションが終了すると、アニメーションの最後の状態が維持されます。

android:fillBefore: true に設定すると、コントロールアニメーション終了後、起動アニメーション前の状態に戻ります。

android:fillEnabled: 効果は android:fillBefore と同じで、アニメーションの終了時にコントロールを初期状態に戻します。

android:repeatCount: 繰り返しの数

android:repeatMode: 2 つの値を持つ繰り返しタイプ: reverse は逆順での再生を意味し、restart は再度再生を意味します。

練習せずに話すだけでは十分ではありません。スケール アニメーションの使用を練習するための Anim XML ファイル、レイアウト ファイル、Activity クラスを紹介します。

res/anim/anim_scale.xml ファイルは次のとおりです:

<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android" android:duration="700" android:fromXScale="0.0" android:fromYScale="0.0" android:pivotX="150" android:pivotY="300" android:toXScale="1.4" android:toYScale="1.4" android:fillAfter="true" android:repeatCount="10" android:repeatMode="reverse"></scale>

res/layout/tween_animation_layout.xml ファイルは次のとおりです:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" >    <LinearLayout  android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" >        <Button  android:id="@+id/alpha_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/alpha" />        <Button  android:id="@+id/scale_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/scale" />        <Button  android:id="@+id/rotate_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/rotate" />        <Button  android:id="@+id/trans_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/trans" />    </LinearLayout>    <ImageView  android:id="@+id/anim_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:contentDescription="@null" android:src="@drawable/splash_logo" /></LinearLayout>

アニメーションのデモ実装クラスは次のように実装されます:

import com.example.photocrop.R;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.view.animation.Animation;import android.view.animation.AnimationUtils;import android.widget.Button;import android.widget.ImageView;public class TweenAnimationTest extends Activity implements OnClickListener {    private Button alphaButton;    private Button scaleButton;    private Button rotateButton;    private Button transButton;    private ImageView animImageView;    @Override    protected void onCreate(Bundle savedInstanceState) {    // TODO Auto-generated method stub    super.onCreate(savedInstanceState);    setContentView(R.layout.tween_animation_layout);    initView();    }    private void initView() {    animImageView = (ImageView) findViewById(R.id.anim_image);    alphaButton = (Button) findViewById(R.id.alpha_button);    scaleButton = (Button) findViewById(R.id.scale_button);    rotateButton = (Button) findViewById(R.id.rotate_button);    transButton = (Button) findViewById(R.id.trans_button);    alphaButton.setOnClickListener(this);    scaleButton.setOnClickListener(this);    rotateButton.setOnClickListener(this);    transButton.setOnClickListener(this);    }    @Override    public void onClick(View v) {        switch (v.getId()) {    case R.id.alpha_button:        break;    case R.id.scale_button:        Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_scale);        animImageView.startAnimation(animation);        break;    case R.id.rotate_button:        break;    case R.id.trans_button:        break;        }    }}

alpha アニメーションを調整しますか?透明度

alpha パラメータ 以下の通り:

android:fromAlpha: アニメーション開始時の透明度、0.0~1.0、0.0 は完全に透明、1.0 は完全に不透明を意味します。

android:toAlpha: アニメーション終了時の透明度も 0.0~1.0 です。

Animation クラスから継承されたプロパティ:

android:duration: ミリ秒単位のアニメーションの継続時間。

android:fillAfter: true に設定すると、コントロール アニメーションが終了すると、アニメーション終了時の状態が維持されます。

android:fillBefore: true に設定すると、コントロールアニメーション終了後、起動アニメーション前の状態に戻ります。

android:fillEnabled: 効果は android:fillBefore と同じで、アニメーションの終了時にコントロールを初期状態に戻します。

android:repeatCount: 繰り返しの数

android:repeatMode: 2 つの値を持つ繰り返しタイプ: reverse は逆順での再生を意味し、restart は再度再生を意味します。

アルファ ボタンをクリックすると、透明アニメーション効果をトリガーします。

res/anim/anim_alpha.xml ファイルは次のとおりです:

<?xml version="1.0" encoding="utf-8"?><alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500" android:fillBefore="true" android:fromAlpha="0.0" android:toAlpha="1.0" ></alpha>

アルファ ボタンのクリックに応答するリスナー イベントは次のとおりです:

case R.id.alpha_button:    Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_alpha);    animImageView.startAnimation(alphaAnimation);    break;

回転アニメーション?

回転パラメータは次のとおりです:

android: fromDegrees: 回転を開始する角度位置。正の値は時計回りの角度を表し、負の値は反時計回りの角度を表します。

android:toDegrees: 回転が完了する角度位置は、正の値は時計回りの角度を表し、負の値は反時計回りの回転角度を表します。

android:pivotX: 回転の開始点の X 軸座標。

android:pivotY: 回転開始点のY軸座標。

Animation クラスから継承されたプロパティ:

android:duration：动画持续时间，以毫秒为单位。

android:fillAfter：如果设置为true，控件动画结束时，将保持动画最后时的状态。

android:fillBefore：如果设置为true，控件动画结束后，还原到开机动画前的状态。

android:fillEnabled：与android:fillBefore的效果相同，都是在动画结束时将控件还原到初始状态。

android:repeatCount：重复次数

android:repeatMode：重复类型，有reverse和restart两个值，reverse表示倒序回放，restart表示重新放一遍。

res/anim/anim_rotate.xml文件如下：

<?xml version="1.0" encoding="utf-8"?><rotate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:fillAfter="true" android:fromDegrees="0" android:pivotX="0" android:pivotY="0" android:repeatCount="3" android:toDegrees="810" ></rotate>

响应点击alpha button的listener事件为：

case R.id.rotate_button:    Animation rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_rotate);    animImageView.startAnimation(rotateAnimation);    break;

translate动画?平移

translate参数：

android:fromXDelta：起始X轴坐标。

android:fromYDelta：起始Y轴坐标。

android:toXDelta：结束X轴坐标。

android:toYDelta：结束Y轴坐标。

从Animation类继承的属性：

android:duration：动画持续时间，以毫秒为单位。

android:fillAfter：如果设置为true，控件动画结束时，将保持动画最后时的状态。

android:fillBefore：如果设置为true，控件动画结束后，还原到开机动画前的状态。

android:fillEnabled：与android:fillBefore的效果相同，都是在动画结束时将控件还原到初始状态。

android:repeatCount：重复次数

android:repeatMode：重复类型，有reverse和restart两个值，reverse表示倒序回放，restart表示重新放一遍。

注意：京东splash页面的进度条用的就是translate动画。

res/anim/anim_rotate.xml文件如下：

<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="2000" android:fillAfter="true" android:fromXDelta="0.0" android:toXDelta="60%p" ></translate>

响应点击alpha button的listener事件为：

case R.id.trans_button:    Animation transAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_translate);    animImageView.startAnimation(transAnimation);    break;