Android Tween Animation动画效果详解

╰+哭是因爲堅強的太久メ 2022-07-15 07:40 259阅读 0赞

Android动画分类：

1.补间动画 Tween Animation  
2.逐帧动画 Frame Animation  
3. 属性动画 Property Animation

下面我们来讲的就是补间动画：

##### 1.AlphaAnimation 透明动画 #####

代码：

/**
         * 透明度动画
         *
         * @param view
         */
        private void alphaAnimation(View view) {
            //初始化动画,参数  1.动画开始透明度 2.动画结束透明度
            AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
            //动画持续时间 Animation类的方法,AlphaAnimation继承自Animation类
            alphaAnimation.setDuration(1000);
            //是否停留在最后一帧
            alphaAnimation.setFillAfter(true);
            //设置重复次数
            alphaAnimation.setRepeatCount(3);
            //执行前的等待时间
            alphaAnimation.setStartOffset(100);
            //开启执行动画
            view.startAnimation(alphaAnimation);
    
            //如果想在动画开始,结束,重复的时候进行一些操作,可以设置动画事件的监听
            alphaAnimation.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                    //动画开始的时候调用
                    Log.d("测试", "onAnimationStart");
                }
    
                @Override
                public void onAnimationEnd(Animation animation) {
                    //动画结束的时候调用
                    Log.d("测试", "onAnimationEnd");
                }
    
                @Override
                public void onAnimationRepeat(Animation animation) {
                    //动画重复执行的时候调用
                    Log.d("测试", "onAnimationRepeat");
                }
            });
    
        }

使用xml文件来配置动画效果：  
在res文件夹下新建anim文件夹,这个就是用来放置xml动画文件的文件夹,下面新建test\_alpha.xml文件配置文件内容

<?xml version="1.0" encoding="utf-8"?>
    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fromAlpha="1"
        android:toAlpha="0">
    </alpha>

如何调用：

view.startAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.test_alpha));

效果：  
![20161108140926486][]

##### 2.RotateAnimation 旋转动画 #####

/**
         * 旋转动画
         *
         * @param view
         */
        private void rotateAnimation(View view) {
            //初始化参数 1.开始角度 2.结束角度 3.旋转中心点x轴坐标 4.旋转中心点y轴坐标
            RotateAnimation rotateAnimation = new RotateAnimation(0, 360, view.getWidth() / 2, view.getHeight() / 2);
            rotateAnimation.setDuration(1000);
            view.startAnimation(rotateAnimation);
        }

xml:

<?xml version="1.0" encoding="utf-8"?>
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360">
        
    
    </rotate>

效果：  
![20161108140948284][]

##### 3.TranslateAnimation 位移动画 #####

/**
         * 位移动画
         *
         * @param view
         */
        private void translateAnimation(View view) {
            //参数1.开始x轴位置  2.移动到x轴的位置 3.开始的y轴位置 4.移动到y轴的位置
            TranslateAnimation translateAnimation = new TranslateAnimation(view.getWidth(), view.getWidth(), 0, view.getHeight());
            translateAnimation.setDuration(1000);
            translateAnimation.setFillAfter(true);
            view.startAnimation(translateAnimation);
        }

xml:

<?xml version="1.0" encoding="utf-8"?>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:duration="1000"
        android:toXDelta="100%"
        android:toYDelta="100%">
    
    </translate>

效果：  
![20161108141002346][]

##### 4.ScaleAnimation 缩放动画 #####

/**
         * 缩放动画
         *
         * @param view
         */
        private void scaleAnimation(View view) {
            //1.从x轴的缩放比例 2.到x轴的缩放比例 3.从y轴的缩放比例 4.到y轴的缩放比例 5.缩放中心点的x坐标 6.缩放中心点的y坐标
            ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1, 0, 1, view.getWidth() / 2, view.getHeight() / 2);
            scaleAnimation.setDuration(1000);
            view.startAnimation(scaleAnimation);
        }

xml:

<?xml version="1.0" encoding="utf-8"?>
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="2"
        android:toYScale="2">
    
    </scale>

效果：  
![20161108141017066][]

##### 5.AnimationSet 动画集合 #####

/**
         * 混合动画
         *
         * @param v
         */
        private void animationSet(View v) {
            //获取屏幕宽度
            WindowManager wm = getWindowManager();
            int width = wm.getDefaultDisplay().getWidth();
    
            //1.是否共用插值器
            AnimationSet animationSet = new AnimationSet(true);
    
            //位移
            TranslateAnimation translateAnimation = new TranslateAnimation(0, width / 2 - v.getWidth() / 2, 0, 0);
            translateAnimation.setDuration(0);
            animationSet.addAnimation(translateAnimation);
    
            //缩放
            ScaleAnimation scaleAnimation = new ScaleAnimation(0, 3, 0, 3, width / 2, v.getHeight() / 2);
            scaleAnimation.setDuration(3000);
            animationSet.addAnimation(scaleAnimation);
    
            //透明度
            AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
            alphaAnimation.setDuration(3000);
            animationSet.addAnimation(alphaAnimation);
    
            //旋转
            RotateAnimation rotateAnimation = new RotateAnimation(0, 360, width / 2, v.getHeight() / 2);
            rotateAnimation.setDuration(3000);
            animationSet.addAnimation(rotateAnimation);
            v.startAnimation(animationSet);
        }

xml:

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:shareInterpolator="true">
    
    
        <alpha
            android:fromAlpha="0"
            android:toAlpha="1"></alpha>
    
        <translate
            android:fromXDelta="0"
            android:fromYDelta="0"
            android:toXDelta="100%"
            android:toYDelta="100%"></translate>
    </set>

AnimationSet就是一个动画集合将所有东西糅合在一起执行  
效果：  
![20161108141044179][]

##### 6.关于自定义动画： #####

在写自定义动画之前,先来看看AlphaAnimation类的源码：

发现AlphaAnimation继承自Animation类,所重写的方法有：

1.applyTransformation  
这个方法会被父类不断的调用,其中有两个参数  
a.float interpolatedTime 这个参数会在动画的执行过程中不断的变化,从开始的时候为0,一直到结束的时候为1  
b.Transformation t 这个类中封装了一些属性供子类调用  
来看下其具体代码：

@Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            final float alpha = mFromAlpha;
            t.setAlpha(alpha + ((mToAlpha - alpha) * interpolatedTime));
        }

代码很简单通过t.setAlpha()这个方法去改变控件的alpha属性,然后通过一次次的调用来达到动画的效果

2.willChangeTransformationMatrix  
这个方法大概的意思就是该动画是否会改变Matrix矩阵,父类Animaction默认返回true,因为AlphaAnimation只是对透明度的改变不会改变Matrix,所以返回false  
3.willChangeBounds  
这个方法的意思是动画是否影响指定的视图范围,父类Animaction默认返回true,同理AlphaAnimation返回false  
4.hasAlpha  
是否有透明度的变化,Animaction默认返回false

AlphaAnimation类除了构造方法之外就这有那么多东西

在来看看RotateAnimation类：

/*
     * Copyright (C) 2006 The Android Open Source Project
     *
     * Licensed under the Apache License, Version 2.0 (the "License");
     * you may not use this file except in compliance with the License.
     * You may obtain a copy of the License at
     *
     *      http://www.apache.org/licenses/LICENSE-2.0
     *
     * Unless required by applicable law or agreed to in writing, software
     * distributed under the License is distributed on an "AS IS" BASIS,
     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     * See the License for the specific language governing permissions and
     * limitations under the License.
     */
    
    package android.view.animation;
    
    import android.content.Context;
    import android.content.res.TypedArray;
    import android.util.AttributeSet;
    
    /**
     * An animation that controls the rotation of an object. This rotation takes
     * place in the X-Y plane. You can specify the point to use for the center of
     * the rotation, where (0,0) is the top left point. If not specified, (0,0) is
     * the default rotation point.
     * 
     */
    public class RotateAnimation extends Animation {
        
        private float mFromDegrees;
        private float mToDegrees;
    
        private int mPivotXType = ABSOLUTE;
        private int mPivotYType = ABSOLUTE;
        private float mPivotXValue = 0.0f;
        private float mPivotYValue = 0.0f;
    
        private float mPivotX;
        private float mPivotY;
    
        /**
         * Constructor used when a RotateAnimation is loaded from a resource.
         * 
         * @param context Application context to use
         * @param attrs Attribute set from which to read values
         */
        public RotateAnimation(Context context, AttributeSet attrs) {
            super(context, attrs);
    
            TypedArray a = context.obtainStyledAttributes(attrs,
                    com.android.internal.R.styleable.RotateAnimation);
    
            mFromDegrees = a.getFloat(
                    com.android.internal.R.styleable.RotateAnimation_fromDegrees, 0.0f);
            mToDegrees = a.getFloat(com.android.internal.R.styleable.RotateAnimation_toDegrees, 0.0f);
    
            Description d = Description.parseValue(a.peekValue(
                com.android.internal.R.styleable.RotateAnimation_pivotX));
            mPivotXType = d.type;
            mPivotXValue = d.value;
    
            d = Description.parseValue(a.peekValue(
                com.android.internal.R.styleable.RotateAnimation_pivotY));
            mPivotYType = d.type;
            mPivotYValue = d.value;
    
            a.recycle();
    
            initializePivotPoint();
        }
    
        /**
         * Constructor to use when building a RotateAnimation from code.
         * Default pivotX/pivotY point is (0,0).
         * 
         * @param fromDegrees Rotation offset to apply at the start of the
         *        animation.
         * 
         * @param toDegrees Rotation offset to apply at the end of the animation.
         */
        public RotateAnimation(float fromDegrees, float toDegrees) {
            mFromDegrees = fromDegrees;
            mToDegrees = toDegrees;
            mPivotX = 0.0f;
            mPivotY = 0.0f;
        }
    
        /**
         * Constructor to use when building a RotateAnimation from code
         * 
         * @param fromDegrees Rotation offset to apply at the start of the
         *        animation.
         * 
         * @param toDegrees Rotation offset to apply at the end of the animation.
         * 
         * @param pivotX The X coordinate of the point about which the object is
         *        being rotated, specified as an absolute number where 0 is the left
         *        edge.
         * @param pivotY The Y coordinate of the point about which the object is
         *        being rotated, specified as an absolute number where 0 is the top
         *        edge.
         */
        public RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY) {
            mFromDegrees = fromDegrees;
            mToDegrees = toDegrees;
    
            mPivotXType = ABSOLUTE;
            mPivotYType = ABSOLUTE;
            mPivotXValue = pivotX;
            mPivotYValue = pivotY;
            initializePivotPoint();
        }
    
        /**
         * Constructor to use when building a RotateAnimation from code
         * 
         * @param fromDegrees Rotation offset to apply at the start of the
         *        animation.
         * 
         * @param toDegrees Rotation offset to apply at the end of the animation.
         * 
         * @param pivotXType Specifies how pivotXValue should be interpreted. One of
         *        Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or
         *        Animation.RELATIVE_TO_PARENT.
         * @param pivotXValue The X coordinate of the point about which the object
         *        is being rotated, specified as an absolute number where 0 is the
         *        left edge. This value can either be an absolute number if
         *        pivotXType is ABSOLUTE, or a percentage (where 1.0 is 100%)
         *        otherwise.
         * @param pivotYType Specifies how pivotYValue should be interpreted. One of
         *        Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or
         *        Animation.RELATIVE_TO_PARENT.
         * @param pivotYValue The Y coordinate of the point about which the object
         *        is being rotated, specified as an absolute number where 0 is the
         *        top edge. This value can either be an absolute number if
         *        pivotYType is ABSOLUTE, or a percentage (where 1.0 is 100%)
         *        otherwise.
         */
        public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
                int pivotYType, float pivotYValue) {
            mFromDegrees = fromDegrees;
            mToDegrees = toDegrees;
    
            mPivotXValue = pivotXValue;
            mPivotXType = pivotXType;
            mPivotYValue = pivotYValue;
            mPivotYType = pivotYType;
            initializePivotPoint();
        }
    
        /**
         * Called at the end of constructor methods to initialize, if possible, values for
         * the pivot point. This is only possible for ABSOLUTE pivot values.
         */
        private void initializePivotPoint() {
            if (mPivotXType == ABSOLUTE) {
                mPivotX = mPivotXValue;
            }
            if (mPivotYType == ABSOLUTE) {
                mPivotY = mPivotYValue;
            }
        }
    
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            float degrees = mFromDegrees + ((mToDegrees - mFromDegrees) * interpolatedTime);
            float scale = getScaleFactor();
    
            if (mPivotX == 0.0f && mPivotY == 0.0f) {
                t.getMatrix().setRotate(degrees);
            } else {
                t.getMatrix().setRotate(degrees, mPivotX * scale, mPivotY * scale);
            }
        }
    
        @Override
        public void initialize(int width, int height, int parentWidth, int parentHeight) {
            super.initialize(width, height, parentWidth, parentHeight);
            mPivotX = resolveSize(mPivotXType, mPivotXValue, width, parentWidth);
            mPivotY = resolveSize(mPivotYType, mPivotYValue, height, parentHeight);
        }
    }

一看到除了构造方法外重写的父类的方法又多了一个initialize();只看方法名也看的出来这是一个初始化的方法,在动画开始之前会调用这个方法,其中传递过来的参数分别是,动画目标对象的宽高以及其父对象的宽高,然后在applyTransformation中通过t.getMatrix()获取到矩阵,去执行旋转的方法。

至于其他的ScaleAnimation和TranslateAnimation也都是重写了initialize()和applyTransformation()通过Matrix矩阵来不断的修改属性来达到动画的效果

只要明白了这个,那么再来写自定义动画就简单多了  
下面我们来写一个拉伸的动画效果：  
代码：

package wkk.app12;
    
    import android.view.animation.Animation;
    import android.view.animation.Transformation;
    
    /**
     * Created by wkk on 2016/11/8.
     */
    public class Animation_m extends Animation {
        
    
        private int height;
    
        //动画执行之前调用此方法,分别是目标对象以及其父容器的宽高
        @Override
        public void initialize(int width, int height, int parentWidth, int parentHeight) {
            super.initialize(width, height, parentWidth, parentHeight);
            this.height = height;
        }
    
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            //1.补间 从0至1     本方法将会在动画执行期间不断调用
            //x轴 y轴   中心点x轴 y轴
            t.getMatrix().setSkew((float) Math.sin(interpolatedTime * 6), 0, 0, height);
        }
    }

效果：  
![20161108141108226][]

ps:  
起个什么什么详解的名字感觉自己也变成了大神一样,哈哈哈…

--------------------

2016/11/15 11:07  
demo下载地址：  
[http://download.csdn.net/detail/w18756901575/9676302][http_download.csdn.net_detail_w18756901575_9676302]

[20161108140926486]: /images/20220715/c2e53bf7abe644dd83ef56e69f96698e.png
[20161108140948284]: /images/20220715/14b4845c44174b2badd284270c678060.png
[20161108141002346]: /images/20220715/f6735d95a854426c9af47ae3c1c25927.png
[20161108141017066]: /images/20220715/add05f3f30d44130af3b66838b5b7ebb.png
[20161108141044179]: /images/20220715/b5f61bb998d0423db211bdda283499b2.png
[20161108141108226]: /images/20220715/4582295af8fb425a9e490bfd161147d7.png
[http_download.csdn.net_detail_w18756901575_9676302]: http://download.csdn.net/detail/w18756901575/9676302