Android
animators
Zoeken…
Schud de animatie van een ImageView
Maak onder de map res een nieuwe map met de naam "anim" om uw animatiemiddelen op te slaan en plaats deze in die map.
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" />
Maak een lege activiteit met de naam 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>
En de methode voor het animeren van de imageview op 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);
}
Fade in / out animatie
Gebruik een ObjectAnimator
om een weergave langzaam in of uit beeld te laten ObjectAnimator
. Zoals te zien is in de onderstaande code, stelt u een duur in met .setDuration(millis)
waarbij de parameter millis
de duur (in milliseconden) van de animatie is. In de onderstaande code verdwijnen de weergaven meer dan 500 milliseconden of 1/2 seconde. ObjectAnimator
.start()
aan om de animatie van ObjectAnimator
te starten. Zodra de animatie is voltooid, wordt onAnimationEnd(Animator animation)
aangeroepen. Hier is een goede plek om de zichtbaarheid van uw weergave in te stellen op View.GONE
of 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();
}
Overgang Tekenbare animatie
Dit voorbeeld toont een transactie voor een afbeeldingweergave met slechts twee afbeeldingen. (Kan meer afbeeldingen na elkaar gebruiken voor de posities van de eerste en tweede laag na elke transactie als een lus)
- voeg een afbeeldingsmatrix toe aan
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
introduceert een eenvoudige manier om een waarde (van een bepaald type, bijvoorbeeld int
, float
, enz.) Te animeren.
De gebruikelijke manier om het te gebruiken is:
- Maak een
ValueAnimator
die een waarde vanmin
totmax
animeert - Voeg een
UpdateListener
waarin u de berekende animatiewaarde zult gebruiken (die u kunt verkrijgen metgetAnimatedValue()
)
Er zijn twee manieren om de ValueAnimator
:
(voorbeeld code animatie getoond van een float
van 20f
tot 40f
in 250ms
)
- Van
xml
(zet het in de/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();
- Van de code:
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
is een subklasse van ValueAnimator
met de extra mogelijkheid om de berekende waarde ingesteld op de eigenschap van een target
View
.
Net als in de ValueAnimator
, zijn er twee manieren om de ObjectAnimator
:
(voorbeeld code animatie een alpha
van een View
van 0.4f
tot 0.2f
in 250ms
)
- Van
xml
(zet het in de/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();
- Van code:
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
is een vereenvoudigde en geoptimaliseerde manier om de eigenschappen van een View
te animeren.
Voor elke afzonderlijke View
is een ViewPropertyAnimator
object beschikbaar via de methode ViewPropertyAnimator
animate()
. U kunt dat gebruiken om meerdere eigenschappen tegelijk te animeren met een eenvoudige aanroep. Elke methode van een ViewPropertyAnimator
geeft de doelwaarde aan van een specifieke parameter waarnaar de ViewPropertyAnimator
moet animeren.
View exampleView = ...;
exampleView.animate()
.alpha(0.6f)
.translationY(200)
.translationXBy(10)
.scaleX(1.5f)
.setDuration(250)
.setInterpolator(new FastOutLinearInInterpolator());
Opmerking: het aanroepen van start()
op een ViewPropertyAnimator
object is NIET verplicht. Als u dat niet doet, laat u het platform gewoon het starten van de animatie op de juiste tijd afhandelen (volgende afhandeling van de animatie). Als u dat echt doet (call start()
), zorgt u ervoor dat de animatie onmiddellijk wordt gestart.
Animatie van Beeld uitvouwen en samenvouwen
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);
}
}