Android
アニメーター
サーチ…
ImageViewのアニメーションを振る
resフォルダの下に "anim"という名前の新しいフォルダを作成してアニメーションリソースを保存し、そのフォルダに配置します。
shakeanimation.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="100"
android:fromDegrees="-15"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:toDegrees="15" />
Landingと呼ばれる空のアクティビティを作成する
activity_landing.xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imgBell"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@mipmap/ic_notifications_white_48dp"/>
</RelativeLayout>
Landing.javaで画像ビューをアニメーション化する方法
Context mContext;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mContext=this;
setContentView(R.layout.activity_landing);
AnimateBell();
}
public void AnimateBell() {
Animation shake = AnimationUtils.loadAnimation(mContext, R.anim.shakeanimation);
ImageView imgBell= (ImageView) findViewById(R.id.imgBell);
imgBell.setImageResource(R.mipmap.ic_notifications_active_white_48dp);
imgBell.setAnimation(shake);
}
フェードイン/アウトアニメーション
ビューがゆっくりとフェードインまたはビュー外になるようにするには、 ObjectAnimator
使用しObjectAnimator
。以下のコードに示すように、 .setDuration(millis)
ミリ秒)を使用して時間を設定します。ここで、 millis
パラメータはアニメーションの継続時間(ミリ秒)です。以下のコードでは、ビューは500ミリ秒、すなわち1/2秒にわたってフェードイン/フェードします。 ObjectAnimator
のアニメーションを開始するには、 .start()
呼び出します。アニメーションが完了すると、 onAnimationEnd(Animator animation)
が呼び出されます。ビューの可視性をView.GONE
またはView.VISIBLE
に設定するには、 View.VISIBLE
。
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
void fadeOutAnimation(View viewToFadeOut) {
ObjectAnimator fadeOut = ObjectAnimator.ofFloat(viewToFadeOut, "alpha", 1f, 0f);
fadeOut.setDuration(500);
fadeOut.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
// We wanna set the view to GONE, after it's fade out. so it actually disappear from the layout & don't take up space.
viewToFadeOut.setVisibility(View.GONE);
}
});
fadeOut.start();
}
void fadeInAnimation(View viewToFadeIn) {
ObjectAnimator fadeIn = ObjectAnimator.ofFloat(viewToFadeIn, "alpha", 0f, 1f);
fadeIn.setDuration(500);
fadeIn.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStar(Animator animation) {
// We wanna set the view to VISIBLE, but with alpha 0. So it appear invisible in the layout.
viewToFadeIn.setVisibility(View.VISIBLE);
viewToFadeIn.setAlpha(0);
}
});
fadeIn.start();
}
TransitionDrawableアニメーション
この例では、2つの画像のみを含む画像ビューのトランザクションを表示します(ループごとに各トランザクションの後に1番目と2番目のレイヤーの位置に複数の画像を順番に使用できます)
-
res/values/arrays.xml
画像配列を追加する
<resources>
<array
name="splash_images">
<item>@drawable/spash_imge_first</item>
<item>@drawable/spash_img_second</item>
</array>
</resources>
private Drawable[] backgroundsDrawableArrayForTransition;
private TransitionDrawable transitionDrawable;
private void backgroundAnimTransAction() {
// set res image array
Resources resources = getResources();
TypedArray icons = resources.obtainTypedArray(R.array.splash_images);
@SuppressWarnings("ResourceType")
Drawable drawable = icons.getDrawable(0); // ending image
@SuppressWarnings("ResourceType")
Drawable drawableTwo = icons.getDrawable(1); // starting image
backgroundsDrawableArrayForTransition = new Drawable[2];
backgroundsDrawableArrayForTransition[0] = drawable;
backgroundsDrawableArrayForTransition[1] = drawableTwo;
transitionDrawable = new TransitionDrawable(backgroundsDrawableArrayForTransition);
// your image view here - backgroundImageView
backgroundImageView.setImageDrawable(transitionDrawable);
transitionDrawable.startTransition(4000);
transitionDrawable.setCrossFadeEnabled(false); // call public methods
}
ValueAnimator
ValueAnimator
は、( int
、 float
などの特定の型の)値をアニメーション化する簡単な方法を紹介します。
それを使用する通常の方法は次のとおりです。
- 値を
min
からmax
アニメーション化するValueAnimator
を作成します。 - 計算されたアニメーション値を使用する
UpdateListener
を追加します(これはgetAnimatedValue()
取得できます)。
ValueAnimator
を作成する方法は2つあります。
(サンプルコードは、アニメーションfloat
から20f
に40f
で250ms
)
-
xml
から(/res/animator/
置く):
<animator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:valueFrom="20"
android:valueTo="40"
android:valueType="floatType"/>
ValueAnimator animator = (ValueAnimator) AnimatorInflater.loadAnimator(context,
R.animator.example_animator);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator anim) {
// ... use the anim.getAnimatedValue()
}
});
// set all the other animation-related stuff you want (interpolator etc.)
animator.start();
- コードから:
ValueAnimator animator = ValueAnimator.ofFloat(20f, 40f);
animator.setDuration(250);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator anim) {
// use the anim.getAnimatedValue()
}
});
// set all the other animation-related stuff you want (interpolator etc.)
animator.start();
ObjectAnimator
ObjectAnimator
のサブクラスであるValueAnimator
のプロパティに算出した値を設定する追加能力を持つtarget
View
。
ちょうどのようにValueAnimator
、あなたが作成することができ、2つの方法がありますObjectAnimator
:
(サンプルコードは、アニメーションalpha
のView
から0.4f
する0.2f
で250ms
)
-
xml
から(それを/res/animator
入れて)
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:propertyName="alpha"
android:valueFrom="0.4"
android:valueTo="0.2"
android:valueType="floatType"/>
ObjectAnimator animator = (ObjectAnimator) AnimatorInflater.loadAnimator(context,
R.animator.example_animator);
animator.setTarget(exampleView);
// set all the animation-related stuff you want (interpolator etc.)
animator.start();
- コードから:
ObjectAnimator animator = ObjectAnimator.ofFloat(exampleView, View.ALPHA, 0.4f, 0.2f);
animator.setDuration(250);
// set all the animation-related stuff you want (interpolator etc.)
animator.start();
ViewPropertyAnimator
ViewPropertyAnimator
は、 View
プロパティをアニメーション化するための簡略化された最適化された方法です。
すべての単一のView
は、 animate()
メソッドで使用可能なViewPropertyAnimator
オブジェクトがあります。これを使用して、簡単な呼び出しで複数のプロパティを同時にアニメーション化できます。 ViewPropertyAnimator
すべての単一のメソッドは、 ViewPropertyAnimator
がアニメーション化する特定のパラメータのターゲット値を指定します。
View exampleView = ...;
exampleView.animate()
.alpha(0.6f)
.translationY(200)
.translationXBy(10)
.scaleX(1.5f)
.setDuration(250)
.setInterpolator(new FastOutLinearInInterpolator());
注意: ViewPropertyAnimator
オブジェクトでstart()
をViewPropertyAnimator
ことは必須ではありません 。そうしないと、適切な時間(次のアニメーション処理パス)でアニメーションの開始を処理するだけのプラットフォームになります。実際に(call start()
呼び出してstart()
行う場合、アニメーションがすぐに開始されることを確認しています。
ビューのアニメーションの展開と折りたたみ
public class ViewAnimationUtils {
public static void expand(final View v) {
v.measure(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
final int targtetHeight = v.getMeasuredHeight();
v.getLayoutParams().height = 0;
v.setVisibility(View.VISIBLE);
Animation a = new Animation()
{
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
v.getLayoutParams().height = interpolatedTime == 1
? LayoutParams.WRAP_CONTENT
: (int)(targtetHeight * interpolatedTime);
v.requestLayout();
}
@Override
public boolean willChangeBounds() {
return true;
}
};
a.setDuration((int)(targtetHeight / v.getContext().getResources().getDisplayMetrics().density));
v.startAnimation(a);
}
public static void collapse(final View v) {
final int initialHeight = v.getMeasuredHeight();
Animation a = new Animation()
{
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
if(interpolatedTime == 1){
v.setVisibility(View.GONE);
}else{
v.getLayoutParams().height = initialHeight - (int)(initialHeight * interpolatedTime);
v.requestLayout();
}
}
@Override
public boolean willChangeBounds() {
return true;
}
};
a.setDuration((int)(initialHeight / v.getContext().getResources().getDisplayMetrics().density));
v.startAnimation(a);
}
}