ホームページ  >  記事  >  ウェブフロントエンド  >  View をカスタマイズするときは、ペイント キャンバス、簡単なビュー アニメーション (アニメーション 2、「お姉さん」の簡単な変更) の経験を活用してください_html/css_WEB-ITnose

View をカスタマイズするときは、ペイント キャンバス、簡単なビュー アニメーション (アニメーション 2、「お姉さん」の簡単な変更) の経験を活用してください_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:30:401201ブラウズ

転載する場合は出典を示してください: Wang Qianqin's Road to become a Great Leader

前の記事では Drawable アニメーションについて説明し、この記事ではシンプルな View アニメーションの使用について説明し、次の記事ではさらに詳しく説明します。前の記事のアドレス: (まだ読んでいない友達はチェックしてください)

実行効果:

パッケージ構造:


一般的に、アニメーションには次の属性が必要です:
1.
2. 終了状態;
4. インターポレーター
最後の項目の文字通りの意味は一目瞭然です。

インターポレーターを設定することで、アニメーションの速度と最終的な効果を変更できます。

android SDK はいくつかのデフォルトの補間器を提供します:

1.AccelerateDecelerateInterpolator は最初に加速し、次に減速します

2.AccelerateInterpolator は加速します

3.AnticipateInterPolator
4.AnticipateOvershootInterpolator
5.BounceInterpolator
6.CycleInterpolator
7.LinearInterpolator
8.OvershootInterpolator
9 .PathInterpolator

この部分については次の記事で詳しく説明するので、ここではあまり説明しません。

アニメーションを実装するにはどのような方法を使用できますか?

1、JAVA コード

2、XML

どのようなアニメーションを実装できますか?

1. 透明度の変更 (AlphaAnimation)

2. スケール (ScaleAnimation)

4. 回転 (RotateAnimation)


まずはコードを読んでから説明してください

翻訳アニメーションを例にします

最初にTranslateAnimation オブジェクトを構築します TranslateAnimation translationAnimation;

その位置パラメータの一部を初期化します translationAnimation = new TranslateAnimation(0, 200, 0, 50);

実行時間を設定します translationAnimation.setDuration( 2000);

移動すべきコントロールを移動させ、終了後に元の位置に戻ります "`imageView.startAnimation(translateAnimation);

これらのオブジェクトのコンストラクターについて説明しましょう

TranslateAnimation(Context context, AttributeSet attrs)

TranslateAnimation( float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) float fromXDelta: このパラメーターは、アニメーションの開始点と現在のビューの座標の差を表します。 fromYDelta、このパラメータはアニメーションの開始点と現在のビューの Y 座標の差を表します。

float toYDelta) このパラメータはアニメーションの開始点と現在のビューの Y 座標の差を表します。

TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue) 最も一般的に使用されるものです

fromXType: 最初のパラメーターは、x 軸の値の参照です。方向 (Animation.ABSOLUTE,Animation.RELATIVE_TO_SELF,またはAnimation.RELATIVE_TO_PARENT);

fromXValue: 2 番目のパラメーターは最初のパラメーター タイプの開始値です。

toXType,toXValue: 3 番目と 4 番目のパラメーターは x です。

最後の 4 つのパラメータについては説明する必要はありません。 「Animation.ABSOLUTE all」を選択すると、実際には 2 番目のコンストラクターになります。

RotateAnimation(Context context, AttributeSet attrs)

RotateAnimation(float fromDegrees, float toDegrees)

最初のパラメータ fromDegrees は、アニメーション開始時の回転角度です。この角度は現在 0 と 360 です。他の値を設定すると、この角度への位置は、from - to の値によって決定されます。負の場合は正の回転、正の逆方向の回転を意味します

2 番目のパラメーター toDegrees は、アニメーションが回転する角度です

RotateAnimation(float fromDegrees, float toDegrees、float pivotX、float pivotY )

3 番目のパラメーター pivotXType は、%p を基準としたアニメーションの位置タイプであり、負の数の場合は、親コントロールの変位の 20% を右に移動します。左に移動

RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

5 番目のパラメータ pivotXType は、オブジェクトに対する Y 軸上のアニメーションの位置タイプです

6 番目のパラメータパラメータ pivotYValue は、オブジェクトに対するアニメーションの Y 座標の開始位置です。この値は、原点としての元の位置に基づいています。つまり、20%p に設定されている場合、親コントロールは下に移動します。 20% の変位、負の数値の場合は上に移動します


ScaleAnimation(Context context, AttributeSet attrs)

ScaleAnimation(float fromX, float toX, float fromY, float toY)

最初のパラメータ fromX は、次の場合の X 座標です。アニメーションの開始時のストレッチ サイズ 0.0 は、アニメーション終了時の X 座標でのストレッチ サイズです。1.0 は、通常のストレッチなしを意味します。アニメーションの開始を示します。 縮小を示します
4 番目のパラメーター toY は、アニメーション終了時の Y 座標の伸縮サイズの値です。 1.0 より大きい場合は、拡大を意味します

ScaleAnimation(float fromX, float toX, float fromY, float toY、float pivotX、float pivotY)

第五个参数pivotXType为动画在X轴相对于物件位置类型
第六个参数pivotXValue为动画相对于物件的X坐标的开始位置
  

ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

第七个参数pivotXType为动画在Y轴相对于物件位置类型
第八个参数pivotYValue为动画相对于物件的Y坐标的开始位置

AlphaAnimation(float fromAlpha, float toAlpha)

第一个参数fromAlpha为 动画开始时候透明度 0.0表示完全透明
第二个参数toAlpha为 动画结束时候透明度 1.0表示完全不透

基本上构造函数传完参设置个持续时间然后,start一下就OK了,非常简便。

提一下,这里面的一些坑

我们的缩放动画,一般都是左上角开始的,当然你想改,可以传参状态,有以下三个

Animation.ABSOLUTE(默认值) 相对于控件的0点的坐标值Animation.RELATIVE_TO_SELF相对于自己宽或者高的百分比(1.0表示100%)Animation.RELATIVE_TO_PARENT相对于父控件的宽或者高的百分比.

还有旋转也是,以左上角为起始点,如果要更改记得设置

那么再说下用XML的怎么做

首先你要在anim目录下建一个xml,我的例子里是像 anim_test1.xml这样的文件,然后你要把动画预设在XML里配置下即可

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" > <alpha android:fromAlpha="float" android:toAlpha="float" /> <scale android:fromXScale="float" android:toXScale="float" android:fromYScale="float" android:toYScale="float" android:pivotX="float" <translate android:fromXDelta="float" android:toXDelta="float" android:fromYDelta="float" android:toYDelta="float" /> <rotate android:fromDegrees="float" android:toDegrees="float" android:pivotX="float" android:pivotY="float" /></set> 

命名规则和前面的构造函数完全一致,猜也猜的出来就不多解释了。

然后这一类的xml比java代码多一些xml的标签

android:detachWallpaperandroid:durationandroid:fillAfterandroid:fillBeforeandroid:fillEnabledandroid:interpolatorandroid:repeatCountandroid:repeatMode INFINTE(无限期),RESTART(重新开始,默认值)android:startOffsetandroid:zAdjustment ZORDER_BOTTOM,ZORDER_NORMAL, ZORDER_TOP

这部分会在讲Property Animation时再加以解释。

那如何用XML内容来实现动画呢?

拿渐变动画为例

首先构造一个Animation对象 Animation animation

然后给它绑一个anim的XML

 animation = AnimationUtils.loadAnimation(this, R.anim.anim_test4);

然后让我们需要动的部分start一下imageView.startAnimation(animation);

跟java代码实现的也是一模一样。

是不是 SO EASY,这部分基础的只要熟悉一些参数和内容的意思效果就很容易实现。

推荐一些资料:

源码地址:https://github.com/ddwhan0123/BlogSample/blob/master/ViewAnimDemo.zip

记得点个赞哦

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。