Animation framework defines several common animations such as transparency, rotation, scaling and displacement, and controls the entire View. The realization principle is that drawChild function in the ViewGroup of the View gets the Transformation value of the Animation of the View every time the View is drawn. Then call canvas. Concat (transformToApply getMatrix ()), complete animation frames by matrix operations. If not, call invalidate() to start the next drawing to drive the animation, thus completing the entire animation. View animation is simple to use and has rich effects. It provides AlphaAnimation, RotateAnimation, TranslateAnimation and ScaleAnimation in four animation modes, as well as AnimationSet, which mixes various animations. Before Android3.0, view animation was dominant, but with the introduction of property animation frameworks after Android3.0, it’s not what it used to be. Compared with attribute animation, a very big defect of view animation is that it does not have interactivity. When an element is animated in view, the position of its response event is still in the place before the animation, so view animation can only do ordinary animation effects to avoid the occurrence of interaction. But its advantages are also very obvious, that is, high efficiency and easy to use.
View animation is very simple to use. Not only can you describe an animation process through an XML file, but you can also control the entire animation process using code.
(1) Transparency animation
Transform animation that adds transparency to the view.
AlphaAnimation aa = new AlphaAnimation(0, 1);
aa.setDuration(1000);
view.startAnimation(aa);Copy the code(2) Rotation animation
Adds a rotating transform animation to the view.
RotateAnimation ra = new RotateAnimation(0, 360, 100, 100);
ra.setDuration(1000);
view.startAnimation(ra);Copy the codeThe parameters are the starting Angle of rotation and the coordinates of the center point of rotation respectively. Of course, the reference system of the rotation animation can be controlled by setting parameters. Here, the reference system of the rotation animation is set as the center.
RotateAnimation ra1 = new RotateAnimation(0, 360, RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation. RELATIVE_TO_SELF, 0.5 F);Copy the code(3) Displacement animation
Add displacement animation for view movement.
TranslateAnimation ta = new TranslateAnimation(0, 200, 0, 300);
ta.setDuration(1000);
view.startAnimation(ta);Copy the code(4) Zoom animation
Animates the zoom of the view
ScaleAnimation sa = new ScaleAnimation(0, 2, 0, 2);
sa.setDuration(1000);
view.startAnimation(sa);Copy the codeLike rotation animation, zooming animation can also set the center of Luo Fang, set the center to its own center effect
ScaleAnimation sa1 = new ScaleAnimation(0, 1, 0, 1, animation.relative_to_self, 0.5f, animation.relative_to_self, 0.5f); sa1.setDuration(1000); view.startAnimation(sa1);Copy the code(5) Animation collection
AnimationSet allows animation to be represented as a composite:
AnimationSet as = new AnimationSet(true);
as.setDuration(1000);
AlphaAnimation aa = new AlphaAnimation(0, 1);
aa.setDuration(1000);
as.addAnimation(aa);
RotateAnimation ra = new RotateAnimation(0, 360, 100, 100);
ra.setDuration(1000);
as.addAnimation(ra);
TranslateAnimation ta = new TranslateAnimation(0, 200, 0, 300);
ta.setDuration(1000);
as.addAnimation(ta);
ScaleAnimation sa = new ScaleAnimation(0, 2, 0, 2);
sa.setDuration(1000);
as.addAnimation(sa);
view.startAnimation(as);Copy the codeCan directly copy the running code to see the effect!
Android also provides a listener callback for animation events:
as.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) {// start Animation} @override public void onAnimationEnd(Animation Animation) {// End Animation} @override public void OnAnimationRepeat (Animation Animation) {// Animation repeat}});Copy the codeSecond, property animation
The existing Animation framework before Android3.0 has some limitations — the Animation only changes the display and does not respond to events. Therefore, after Android3.0, Google proposed a new animation framework such as attribute animation to achieve richer effects.
ObjectAnimator is used in the Animator framework in combination with AnimatorSet and ObjectAnimator. ObjectAnimator is used for more refined control, controlling only one attribute value of an object. Instead, multiple ObjectAnimators are combined into an AnimatorSet to form an animation. ObjectAnimator can be automatically driven by calling setFrameDelay(Long frameDelay) to set the interval between frames. The most important thing is that attribute animation calls attribute get and set methods to truly control the attribute value of a View, so a powerful attribute animation framework can basically achieve all animation effects.
(1) ObjectAnimator
ObjectAnimator is the most important implementation class in the attribute animation framework. Creating an ObjectAnimator simply returns an ObjectAnimator object directly through its static factory class. Arguments include an object and the name of the object’s property, but the property must also have get and set functions, which are called internally to modify the value of the object’s property through Java reflection. Similarly, you can call setInterpolator to set the corresponding discriminator.
Next, imagine adding a pan animation to a Button. Using the old animation frame, the pan animation will not trigger the click event, the effective area of the click is still the original place, and no click event will occur after clicking the move. Property animation, on the other hand, actually changes the properties of a View, so the event response area also changes, and clicking on the moved button responds to the click event.
Property animation translation code is as follows:
ObjectAnimator animator = ObjectAnimator.ofFloat(
imageView,
"translationX",
200F);
animator.setDuration(300);
animator.start();Copy the codeWhen using ObjectAnimator, it is important that the properties to be manipulated must have get and set methods, otherwise ObjectAnimator will not work. Here are some common attributes:
- TranslationX and translationY: These two properties, as increments, control the position of the View object from the upper-left coordinates of its layout container.
- Rotation, rotationX, and rotationY: These three properties control 2D and 3D rotation of the View object around the fulcrum.
- ScaleX and scaleY: These two properties control 2D scaling of the View object around its fulcrum.
- PivotX and pivotY: These two attributes control the position of the fulcrum around which the View object is rotated and scaled. By default, the position of this fulcrum is the center of the View object.
- X and Y: These two simple and useful attributes describe the final position of the View object in its container, which is the cumulative sum of the original upper-left coordinate and the translationX and translationY values.
- Alpha: Indicates the alpha transparency of the View object. The default value is 1 (opaque) and 0 represents full transparency (invisible).
Based on the above, we know that the animation effect of view animation is basically included here.
If a property doesn’t have get and set methods, is there no way to animate the property? The answer is no. Google provides two solutions to solve this problem at the application layer. One is to add get and set methods to this attribute indirectly by customizing an attribute class or wrapping it. ValueAnimator (ValueAnimator, ValueAnimator, ValueAnimator, ValueAnimator, ValueAnimator, ValueAnimator)
private static class WrapperView { private View mTarget; public WrapperView(View mTarget) { this.mTarget = mTarget; } public int getWidth() { return mTarget.getLayoutParams().width; } public void setWidth(int width) { mTarget.getLayoutParams().width = width; mTarget.requestLayout(); }}Copy the codeWith the above code, you wrap a layer around an attribute and provide it with get and set methods. To call the get and set methods, you only need to manipulate the wrapper class, as shown below:
WrapperView wrapperView = new WrapperView(view);
ObjectAnimator.ofInt(wrapperView, "width", 500).setDuration(5000).start();Copy the code(2) PropertyValuesHolder
Similar to AnimationSet in view animation, PropertyValuesHolder can be used to animate multiple properties of the same object simultaneously in property animation. For example, if the zoom of X and Y axis is changed during the pan animation, it can be implemented like this:
PropertyValuesHolder pvh1 = PropertyValuesHolder.ofFloat("translationX", 300);
PropertyValuesHolder pvh2 = PropertyValuesHolder.ofFloat("scaleX", 1f, 0, 1f);
PropertyValuesHolder pvh3 = PropertyValuesHolder.ofFloat("scaleY", 1f, 0, 1f);
ObjectAnimator.ofPropertyValuesHolder(pvh1, pvh2, pvh3).setDuration(1000).start();Copy the codeIn the code, the PropertyValuesHolder object controls translationX, scaleX, and scaleY, respectively. The prick call ObjectAnimator. OfPropertyValuesHolder method of multi-attribute animation work together, the whole implementation method is very similar to AnimatorSet use.
(3) ValueAnimator
ValueAnimator plays a very important role in property animation. Although it is not as eye-catching as ObjectAnimator, it is the core of property animation. ObjectAnimator is also inherited from ValueAnimator.
public final class ObjectAnimator extends ValueAnimatorCopy the codeValueAnimator itself does not provide any animation effects. It is more like a numeric generator that produces regular numbers that allow the caller to control the animation implementation. ValueAnimator’s AnimatorUpdateListener normally listens for numeric transformations to perform animation transformations.
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 100); valueAnimator.setTarget(imageView); valueAnimator.setDuration(1000).start(); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { Float value = (Float) animation.getAnimatedValue(); }});Copy the code(4) Monitoring of animation events
A complete animation has four procedures: Start, Repeat, End, and Cancel. Android provides interfaces to easily listen to these four events:
ObjectAnimator anim = objectAnimator.offloat (imageView, "alpha", 0.5f); anim.addListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } }); anim.start();Copy the codeMost of the time we only care about the onAnimationEnd event, so Android also provides an AnimatorListenerAdapter that lets us select the necessary events to listen on:
anim.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); }});Copy the code(5) AnimatorSet
To animate multiple properties on a property at the same time, we already did this using PropertyValuesHolder. AnimatorSet not only achieves this, but also allows for more precise sequence control. PropertyValuesHolder: AnimatorSet: PropertyValuesHolder: AnimatorSet: AnimatorSet
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(imageView, "translationX", 300f);
ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(imageView, "scaleX", 1f, 0f, 1f);
ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(imageView, "scaleY", 1f, 0f, 1f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(1000);
animatorSet.playTogether(objectAnimator, objectAnimator1, objectAnimator2);
animatorSet.start();Copy the codeIn attribute animations, AnimatorSet controls how many animations work together through playTogether(), playSquentially(), animset.play ().width(), defore(), and after(). In order to achieve accurate control of the animation playback sequence.
(6) Use property animation in XML
Property animations, like view animations, can also be written directly into an XML file:
<? The XML version = "1.0" encoding = "utf-8"? > <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" Android: propertyName = "scaleX" android: valueFrom = "1.0" android: valueTo = "2.0" android: valueType = "floatType" > </objectAnimator>Copy the codePremise to use XML to define attribute animation XML files must be put in the res/animator/filename. The XML file to identify below, otherwise can’t identify. It turns out that property animations are written similarly to view animations in XML files. Use in a program:
Animator anim = AnimatorInflater.loadAnimator(this,R.animator.filename);
anim.setTarget(view);
anim.start();Copy the code(7) View animate method
After Android3.0, Google added the animate method to View to drive property animations directly.
imageView.animate()
.alpha(0)
.y(300)
.setDuration(300)
.withStartAction(new Runnable() {
@Override
public void run() {
}
})
.withEndAction(new Runnable() {
@Override
public void run() {
runOnUiThread(new Runnable() {
@Override
public void run() {
}
});
}
}).start();Copy the codeAndroid layout animation
Layout animation refers to the effect on the ViewGroup, to add a View to the ViewGroup to add a transition animation effect. The simplest layout animation is in the ViewGroup XML. Open the layout animation with the following code:
android:animateLayoutChanges="true"Copy the codeWhen a ViewGroup is added to a View, the child View will display a gradual transition effect, but this effect is the default transition effect displayed on Android. There is no way to use custom animation to replace this effect.
You can also customize the transition effect of a child View by using the LayoutAnimatorController class, adding a View animation to make the child View appear with a zoomed animation effect:
LinearLayout ll = (LinearLayout) findViewById(R.id.ll); ScaleAnimation sa = new ScaleAnimation(0, 1, 0, 1); sa.setDuration(2000); / / set the layout of the animation display LayoutAnimationController lac = new LayoutAnimationController (sa, 0.5 f); // Set the layout animation ll.setLayoutAnimation(lac);Copy the codeLayoutAnimationController first argument, it is need to the role of the animation, and the second parameter, is each child View shows the delay time. When the delay time is not 0, you can set the display order of sub-views.
Public static final int ORDER_NORMAL = 0; Public static final int ORDER_REVERSE = 1; Public static final int ORDER_RANDOM = 2;Copy the codeInterpolators — Interpolators
Interpolators are an important concept of animation. By Interpolators, we can define the transformation rate of animation, which is similar to acceleration in physics. It mainly controls the change value of a target variable.
- AccelerateDecelerateInterpolator at the beginning of the animation and introduce the local rate of change is slow, in the middle of acceleration
- AccelerateInterpolator changes rate slowly at the beginning of an animation, then starts to accelerate
- Argateinterpolator will be started backwards and then forward
- AnticipateOvershootInterpolator at the start of the backward and forward to jilt a certain value returns the value of the final
- BounceInterpolator BounceInterpolator plays at the end of the animation
- CycleInterpolator animation plays looping a specific number of times, changing the rate along a sine curve
- Activity Ateinterpolator is fast and slow at the beginning of animation
- The LinearInterpolator changes at a constant rate
- OvershootInterpolator throws a value forward before returning to the original position
- PathInterpolator PathInterpolator
To be continued…
Open source code library
Finally, I would like to share a code base that I have accumulated for a long time
github.com/xijiufu
Because github server is in the US, sometimes access is slow, and also provides an open source Chinese address library, the codes of the two repositories are updated synchronously:
git.oschina.net/xijiufu