Android Tween Animation, androidtween

Source: Internet
Author: User

Android Tween Animation, androidtween

View Animation, that is, the Tween Animation displayed on the view

In essence, a Tween animation does not change the View object itself, but only the way it is drawn.

Two implementation methods: one is defined in xml and the other is defined directly in code.

Xml definition: displacement animation translate

<? Xml version = "1.0" encoding = "UTF-8"?> <Translate xmlns: android = "http://schemas.android.com/apk/res/android" android: duration = "1000" android: fromXDelta = "10" android: fromYDelta = "0" android: toXDelta = "50%" android: toYDelta = "50% p" android: repeatCount = "50" android: repeatMode = "reverse" android: fillAfter = "true"> <! -- RepeatCount number of times the animation repeats repeatMode this time it reverses the last effect after the fillAfter animation ends, the actual position of the view stays at the end of the animation. the actual position of the view does not change 50% p. Compared with the parent layout, 50% is relative to itself. </translate>
Rotate an animation rotate
<? Xml version = "1.0" encoding = "UTF-8"?> <Rotate xmlns: android = "http://schemas.android.com/apk/res/android" android: duration = "1000" android: fromDegrees = "0" android: toDegrees = "-90" android: Export Tx = "50%" android: required ty = "50%" android: repeatCount = "50" android: repeatMode = "reverse" android: fillAfter = "true"> <! -- FromDegrees = "0" toDegrees = "-90" TX Tx = "50%" xty ty = "50%" y --> </rotate>
Transparency gradient animation alpha
<? Xml version = "1.0" encoding = "UTF-8"?> <Alpha xmlns: android = "http://schemas.android.com/apk/res/android" android: duration = "1000" android: fromAlpha = "0" android: toAlpha = "1" android: fillAfter = "true" android: repeatCount = "50" android: repeatMode = "reverse"> <! -- Transparency starting from fromAlpha 0 completely transparent toAlpha transparency 1 completely opaque --> </alpha>
Scale an animation
<? Xml version = "1.0" encoding = "UTF-8"?> <Scale xmlns: android = "http://schemas.android.com/apk/res/android" android: duration = "1000" android: fromXScale = "0.5" android: fromYScale = "1" android: toXScale = "3" android: toYScale = "2" android: effectx = "50%" android: effecty = "50%" android: fillAfter = "true" android: repeatCount = "50" android: repeatMode = "reverse"> <! -- Scale ratio --> </scale>

Animation set

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="2000"    android:fillAfter="true"    android:repeatCount="50"    android:repeatMode="reverse" >    <scale        android:fromXScale="0.5"        android:fromYScale="1"        android:pivotX="50%"        android:pivotY="50%"        android:repeatCount="50"        android:repeatMode="reverse"        android:toXScale="3"        android:toYScale="2" />    <alpha        android:fromAlpha="0"        android:repeatCount="50"        android:repeatMode="reverse"        android:toAlpha="1" />    <translate        android:fromXDelta="10"        android:fromYDelta="0"        android:repeatCount="50"        android:repeatMode="reverse"        android:toXDelta="50%"        android:toYDelta="50%p" />    <rotate        android:fromDegrees="0"        android:pivotX="50%"        android:pivotY="50%"        android:repeatCount="50"        android:repeatMode="reverse"        android:toDegrees="-100" /></set>

Code loads the xml-defined animations

Animation translate = AnimationUtils.loadAnimation(this, R.anim.translate);imageview_translate.setBackground(getResources().getDrawable(R.drawable.a11));imageview_translate.startAnimation(translate);Animation rotate = AnimationUtils.loadAnimation(this, R.anim.rotate);imageview_rotate.setBackground(getResources().getDrawable(R.drawable.a11));imageview_rotate.startAnimation(rotate);Animation alpha = AnimationUtils.loadAnimation(this, R.anim.alpha);imageview_alpha.setBackground(getResources().getDrawable(R.drawable.a11));imageview_alpha.startAnimation(alpha);Animation scale = AnimationUtils.loadAnimation(this, R.anim.scale);imageview_scale.setBackground(getResources().getDrawable(R.drawable.a11));imageview_scale.startAnimation(scale);Animation set = AnimationUtils.loadAnimation(this, R.anim.set);imageview_set.setBackground(getResources().getDrawable(R.drawable.a11));imageview_set.startAnimation(set);

Code-only creation of Tween Animation

AnimationSet animationSet = new AnimationSet (true); animationSet. addAnimation (scale); animationSet. addAnimation (translate); animationSet. addAnimation (alpha); animationSet. addAnimation (rotate); animationSet. setDuration (2000); animationSet. setRepeatCount (50); animationSet. setRepeatMode (Animation. RESTART); // animationSet. setRepeatMode (Animation. REVERSE); imageview_set.setBackground (getResources (). getDrawable (R. drawable. a11); animated (animationSet); TranslateAnimation translateAnimation; RotateAnimation rotateAnimation; AlphaAnimation alphaAnimation; ScaleAnimation scaleAnimation; // Animation. RELATIVE_TO_SELF relative to itself // Animation. RELATIVE_TO_PARENT relative to parent View

Set an animation listener

Scale. setAnimationListener (new AnimationListener () {@ Override // Animation starts public void onAnimationStart (animation Animation) {}@ Override // animation repeats public void onAnimationRepeat (Animation animation) {}@ Override // Animation end public void onAnimationEnd (animation Animation ){}});
Animation insertor

You can set an animation insertor in the xml and code of animation to indicate the speed change of the animation action during the duration.

Android: interpolator = "@ android: anim/overshoot_interpolator" OvershootInterpolator

<! -- By default, an animation is evenly applied over time. To change this effect, you can use the interpolator to set the insertor accelerate_interpolator, which is similar to acceleration, slow start, slow start, fast speed change, accelerate_decelerate_interpolator, acceleration, and small acceleration. anticipate_interpolatorthe change starts backward then flings forward is reduced first (a little smaller than the start value ), after adding (to the end value) anticipate_overshoot_interpolator, first subtract (to a smaller value than the start value), then add (to a larger value than the end value, and then return to the end value) overshoot_interpolator to directly accelerate to the end value, it is a little larger than the end value, and then returns back to the end value bounce_interpolator. The changes at the end of the rebound will arrive at the end value, and then the changes will be smaller. The cycle_interpolator goes back and forth twice to quickly start from the start to the end, then follow the sine pattern to continue the motion (left and right sides of the tangent, up and down of the tangent) linear_interpolator similar acceleration is 0, the rate remains unchanged, the constant speed does not define the default value used when the insertor -->




In android, you can use Tween animation to see why the effect is coming.

Super. onCreate (savedInstanceState );
SetContentView (R. layout. activity_main );

ImageView = (ImageView) findViewById (R. id. imageView1 );
Dtv = (DTextView) findViewById (R. id. textView111 );
FindViewById (R. id. textView111). setVisibility (
View. VISIBLE );
Dtv. setText ("1231231321 ");
Button = (Button) findViewById (R. id. button1 );

Button. setOnClickListener (new OnClickListener (){

@ Override
Public void onClick (View v ){
// TODO Auto-generated method stub

// TODO Auto-generated method stub
AnimationSet animationSet = new AnimationSet (true );
AlphaAnimation alphaAnimation = new AlphaAnimation (100, 0 );
AlphaAnimation. setDuration (5000 );
AlphaAnimation. setFillAfter (true );

RotateAnimation rotateAnimation = new RotateAnimation (0,180, Animation. RELATIVE_TO_SELF, 0.5f, Animation. RELATIVE_TO_SELF, 0.5f );
RotateAnimation. setDuration (5000 );
RotateAnimation. setFillAfter (true );

ScaleAnimation scaleAnimation = new ScaleAnimation (0, 0.1f, 0, 0.1f, Animation. RELATIVE_TO_SELF, 0.5f, Animation. RELATIVE_TO_SELF, 0.5f );
ScaleAnimation. setDuration (3000 );

TranslateAnimation translateAnimation = new TranslateAnimation (
Animation. RELATIVE_TO_SELF, 0,
Animation. RELATIVE_TO_SELF, 0.5f,
Animation. RELATIVE_TO_SELF, 0,
Animation. RELATIVE_TO_SELF, 0.5f );
TranslateAnimation. setDuration (3000 );
TranslateAnimation. setFillAfter (true );

AnimationSet. addAnimation (rotateAni ...... full text>
 
What is Tween Animation? What is Frame Animation? What are their differences? Food help

Frame animation is a frame-by-frame animation, which is still common in animation. Most two-dimensional animations are frame-by-frame. tween animation may be a gradient animation. I checked it online just now. It seems like a game or screensaver gradient animation (some programming code-based animations are called tween animation. these are guesses based on online materials.
I personally think there is another possibility. Literally, it may be frame animation = key-frame animation (key frame animation, original image); tween animation = inbetween animation (intermediate frame animation, animation ). if it means the latter, I can only say that the translation methods are different in different places, or someone may translate these words into Chinese English.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.