美文网首页
AndroidView之动画篇(二)--补间动画(TweenAn

AndroidView之动画篇(二)--补间动画(TweenAn

作者: 陈兴强hha | 来源:发表于2018-04-07 17:56 被阅读0次

    一 前言

    1.Android中的TweenAnimation由四种类型种类型:

    Alpha

    Scale

    Translation

    Rotate

    2.定义TweenAnimation由两种方式:

    xml资源文件和代码

    3.与插值器组合可以实现丰富的效果

    二 Alpha

        /**
         * 透明度
         */
        private void alpha() {
            AlphaAnimation alphaAnimation=new AlphaAnimation(0.0f,1f);
            //动画持续时间
            alphaAnimation.setDuration(3000);
            //设置动画结束之后的状态是否是动画的最终状态,true,表示是保持动画结束时的状态
            alphaAnimation.setFillAfter(true);
            //设置动画结束时的状态是否开始是的状态,ture,表示是开始时的状态
            alphaAnimation.setFillBefore(true);
            //设置动画重复模式,反转REVERSE和重新开始RESTART
            alphaAnimation.setRepeatMode(AlphaAnimation.REVERSE);
            //设置动画播发次数
            alphaAnimation.setRepeatCount(5);
            //开始动画
            ivAnimation.startAnimation(alphaAnimation);
        }
    
    

    三 Scale

        private void scale() {
            ScaleAnimation scale = new ScaleAnimation(1.0f, 4.0f, 1.0f, 4.0f,
                    Animation.RELATIVE_TO_SELF, 0.0f,
                    Animation.RELATIVE_TO_SELF, 0.0f);
            scale.setDuration(2000);
            scale.setFillBefore(true);
            scale.setRepeatMode(AlphaAnimation.RESTART);
            scale.setRepeatCount(2);
            ivAnimation.startAnimation(scale);
        }
    

    四 Translation

        private void translation() {
            TranslateAnimation translate=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0F,
                    Animation.RELATIVE_TO_SELF,2f,Animation.RELATIVE_TO_SELF,0f,
                    Animation.RELATIVE_TO_SELF,2F);
            translate.setDuration(1000);
            translate.setFillAfter(true);
            ivAnimation.startAnimation(translate);
    
        }
    
    

    五Rotate

        private void translation() {
            TranslateAnimation translate=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0F,
                    Animation.RELATIVE_TO_SELF,2f,Animation.RELATIVE_TO_SELF,0f,
                    Animation.RELATIVE_TO_SELF,2F);
            translate.setDuration(1000);
            translate.setFillAfter(true);
            ivAnimation.startAnimation(translate);
    
        }
    
    

    六 插值器(Interpolation)

    InterPolation是干嘛的?
    根据类型不同,采用不同的算法计算出在补间动画期间所需要插入帧的密度和位置,使得动画能以匀速、加速、减速、抛物线等多种速度进行变化。
    AccelerateDecelerateInterpolator
    在动画开始与介绍的地方速率改变比较慢,在中间的时候加速

    AccelerateInterpolator
    在动画开始的地方速率改变比较慢,然后开始加速

    AnticipateInterpolator
    开始的时候向后然后向前甩

    AnticipateOvershootInterpolator
    开始的时候向后然后向前甩一定值后返回最后的值

    BounceInterpolator
    动画结束的时候弹起

    CycleInterpolator
    动画循环播放特定的次数,速率改变沿着正弦曲线

    DecelerateInterpolator
    在动画开始的地方快然后慢

    LinearInterpolator
    以常量速率改变

    OvershootInterpolator
    向前甩一定值后再回到原来位置

        private void translation() {
            TranslateAnimation translate=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0F,
                    Animation.RELATIVE_TO_SELF,2f,Animation.RELATIVE_TO_SELF,0f,
                    Animation.RELATIVE_TO_SELF,2F);
            translate.setDuration(1000);
            translate.setFillAfter(true);
            //在动画开始的地方速率改变比较慢,然后开始加速
            translate.setInterpolator(new AccelerateInterpolator());
            ivAnimation.startAnimation(translate);
    
        }
    

    七 其它

    1.当setFillAfter与 setFillBefore一起使用时只有setFillAfter生效

    2.结束动画方法有哪几种:

       private void translation() {
            TranslateAnimation translate=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0F,
                    Animation.RELATIVE_TO_SELF,2f,Animation.RELATIVE_TO_SELF,0f,
                    Animation.RELATIVE_TO_SELF,2F);
            translate.setDuration(1000);
            translate.setFillAfter(true);
            //在动画开始的地方速率改变比较慢,然后开始加速
            translate.setInterpolator(new AccelerateInterpolator());
            ivAnimation.startAnimation(translate);
    
            //结束动画方法1
            ivAnimation.clearAnimation();
            //结束动画方法2
            translate.cancel();
        }
    

    3 动画监听

       private void translation() {
            TranslateAnimation translate=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0F,
                    Animation.RELATIVE_TO_SELF,2f,Animation.RELATIVE_TO_SELF,0f,
                    Animation.RELATIVE_TO_SELF,2F);
            translate.setDuration(1000);
            translate.setFillAfter(true);
            //在动画开始的地方速率改变比较慢,然后开始加速
            translate.setRepeatMode(AlphaAnimation.RESTART);
            translate.setRepeatCount(3);
            translate.setInterpolator(new AccelerateInterpolator());
            ivAnimation.startAnimation(translate);
    
    //        //清除动画
    //        ivAnimation.clearAnimation();
    //        //同样cancel()也能取消掉动画
    //        translate.cancel();
    
    
            translate.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                    Log.e("============","动画开始了");
                }
    
                @Override
                public void onAnimationEnd(Animation animation) {
                    Log.e("============","动画结束了");
                }
    
                @Override
                public void onAnimationRepeat(Animation animation) {
                    Log.e("============","动画动画重复调用");
    
                }
            });
    
    
        }
    

    全部代码

    TweenAnimationActivity.class

    package com.myanimation.chen.myanimation;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.util.Log;
    import android.view.View;
    import android.view.animation.AccelerateInterpolator;
    import android.view.animation.AlphaAnimation;
    import android.view.animation.Animation;
    import android.view.animation.RotateAnimation;
    import android.view.animation.ScaleAnimation;
    import android.view.animation.TranslateAnimation;
    import android.widget.ImageView;
    
    /**
     * TweenAnimation
     * Created by xq on 2018/4/7.
     */
    
    public class TweenAnimationActivity extends Activity {
    
    
        private ImageView ivAnimation;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.aty_tween_animation);
            ivAnimation = findViewById(R.id.iv_animation);
        }
    
    
        public void onTween(View view) {
    
            switch (view.getId()) {
                case R.id.tv_alpha:
                    //透明度
                    alpha();
                    break;
                case R.id.tv_scale:
                    //比例
                    scale();
                    break;
    
                case R.id.tv_translation:
                    //平移
                    translation();
                    break;
    
                case R.id.tv_rotate:
                    //旋转
                    rotate();
                    break;
    
    
            }
    
        }
    
    
        /**
         * 透明度
         */
        private void alpha() {
            AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1f);
            //动画持续时间
            alphaAnimation.setDuration(3000);
            //设置动画结束之后的状态是否是动画的最终状态,true,表示是保持动画结束时的状态
            alphaAnimation.setFillAfter(true);
            //设置动画结束时的状态是否开始是的状态,ture,表示是开始时的状态
            alphaAnimation.setFillBefore(true);
            //设置动画重复模式,反转REVERSE和重新开始RESTART
            alphaAnimation.setRepeatMode(AlphaAnimation.REVERSE);
            //设置动画播发次数
            alphaAnimation.setRepeatCount(5);
            //开始动画
            ivAnimation.startAnimation(alphaAnimation);
        }
    
    
        private void scale() {
            ScaleAnimation scale = new ScaleAnimation(1.0f, 4.0f, 1.0f, 4.0f,
                    Animation.RELATIVE_TO_SELF, 0.0f,
                    Animation.RELATIVE_TO_SELF, 0.0f);
            scale.setDuration(2000);
            scale.setFillBefore(true);
            scale.setRepeatMode(AlphaAnimation.RESTART);
            scale.setRepeatCount(2);
            ivAnimation.startAnimation(scale);
        }
    
        private void translation() {
            TranslateAnimation translate=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0F,
                    Animation.RELATIVE_TO_SELF,2f,Animation.RELATIVE_TO_SELF,0f,
                    Animation.RELATIVE_TO_SELF,2F);
            translate.setDuration(1000);
            translate.setFillAfter(true);
            //在动画开始的地方速率改变比较慢,然后开始加速
            translate.setRepeatMode(AlphaAnimation.RESTART);
            translate.setRepeatCount(3);
            translate.setInterpolator(new AccelerateInterpolator());
            ivAnimation.startAnimation(translate);
    
    //        //清除动画
    //        ivAnimation.clearAnimation();
    //        //同样cancel()也能取消掉动画
    //        translate.cancel();
    
    
            translate.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                    Log.e("============","动画开始了");
                }
    
                @Override
                public void onAnimationEnd(Animation animation) {
                    Log.e("============","动画结束了");
                }
    
                @Override
                public void onAnimationRepeat(Animation animation) {
                    Log.e("============","动画动画重复调用");
    
                }
            });
    
    
        }
    
        private void rotate() {
            RotateAnimation rotate=new RotateAnimation(0,360,
                    RotateAnimation.RELATIVE_TO_SELF,0.5F,
                    RotateAnimation.RELATIVE_TO_SELF,0.5F);
            rotate.setDuration(1500);
            rotate.setFillAfter(true);
            rotate.setRepeatMode(AlphaAnimation.RESTART);
    
            ivAnimation.startAnimation(rotate);
    
        }
    
    
    }
    
    

    any_tween_animation.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="15dp"
            android:text="TweenAnimation" />
    
        <View style="@style/Divede" />
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
    
            <Button
                android:id="@+id/tv_alpha"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:onClick="onTween"
                android:paddingBottom="15dp"
                android:paddingTop="15dp"
                android:text="alpha" />
    
            <Button
                android:id="@+id/tv_scale"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:onClick="onTween"
                android:paddingBottom="15dp"
                android:paddingTop="15dp"
                android:text="scale" />
    
            <Button
                android:id="@+id/tv_translation"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:onClick="onTween"
                android:paddingBottom="15dp"
                android:paddingTop="15dp"
                android:text="translation" />
    
            <Button
                android:id="@+id/tv_rotate"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:onClick="onTween"
                android:paddingBottom="15dp"
                android:paddingTop="15dp"
                android:text="rotate" />
    
        </LinearLayout>
    
        <ImageView
            android:id="@+id/iv_animation"
            android:layout_width="120dp"
            android:layout_height="80dp"
            android:src="@drawable/icon_pic" />
    
    </LinearLayout>
    

    相关文章

      网友评论

          本文标题:AndroidView之动画篇(二)--补间动画(TweenAn

          本文链接:https://www.haomeiwen.com/subject/vbuyhftx.html