ViewAnimation帧动画示例

àì夳堔傛蜴生んèń 2022-08-20 11:15 210阅读 0赞

## 1，概念： ##

补间动画，给出两个关键帧，通过一些算法将给定属性值在给定的时间内在两个关键帧间渐变。主要有为旋转、平移、放缩和渐变等动画

ViewAnimation又叫Tween动画在Android中分为4类，它们分别是：AlphaAnimation(透明度动画)、TranslateAnimation(平移动画)、ScaleAnimation(缩放动画)、RotateAnimation(旋转动画)。都继承自android.view.Animation类，它们都是表示从一个状态A向状态B变化的一个过程，所以英文名字叫Tween动画、中文名叫：“补间动画”、“中间动画”。

## 2，实现方式： ##

它们总的说来有两种实现方式：java code(java源代码)、xml(xml配置文件)

## 3，四个类的构造函数： ##

### AlphaAnimation(透明度动画) ###

AlphaAnimation有两个构造函数，分别是：  
—— AlphaAnimation(Context context, AttributeSet attrs)：第二个参数是个属性集  
——AlphaAnimation(float fromAlpha, float toAlpha)：第一个参数是初始透明度，第二个参数是终止透明度

### TranslateAnimation(平移动画) ###

TranslateAnimation有三个构造函数，分别是：

#### ——TranslateAnimation(Context context, AttributeSet attrs) ####

#### ——TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)： ####

分别对应x轴的起始、终点坐标，与y轴的起始、终点坐标

#### ——TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)： ####

第一个参数是x轴方向的值的参照(Animation.ABSOLUTE, Animation.RELATIVE\_TO\_SELF, or Animation.RELATIVE\_TO\_PARENT)；  
第三个参数与第四个参数是x轴方向的  
终点参照与对应值；后面四个参数就不用解释了。如果全部选择Animation.ABSOLUTE，其实就是第二个构造函数。  
以x轴为例介绍参照与对应值的关系  
如果选择参照为Animation.ABSOLUTE，那么对应的值应该是具体的坐标值，比如100到300，指绝对的屏幕像素单位  
如果选择参照为Animation.RELATIVE\_TO\_SELF或者 Animation.RELATIVE\_TO\_PARENT指的是相对于自身或父控件，  
对应值应该理解为相对于自身或者父控件的几倍或百分之多少。一定要多试试这几个参数类型！

### ScaleAnimation(缩放动画) ###

ScaleAnimation(缩放动画)有四个构造函数，分别是：

#### ——ScaleAnimation(Context context, AttributeSet attrs) ####

#### ——ScaleAnimation(float fromX, float toX, float fromY, float toY)：同TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) ####

#### ——ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY)： ####

这里解释后面两个参数，pivot英文意思为“枢轴”，也就是支点。通过这两个参数可以控制缩放动画的放大方向，这个点不会随对象大小变化而变化

#### ——ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)： ####

如果理解了前面所讲的，这个就不做多的说明，如果不清楚，请回头多用代码试试。

### RotateAnimation(旋转动画) ###

RotateAnimation(旋转动画)同样有四个构造函数，分别是：

#### ——RotateAnimation(Context context, AttributeSet attrs) ####

#### ——RotateAnimation(float fromDegrees, float toDegrees) ####

#### ——RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY) ####

#### ——RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) ####

## 4，代码示例 ##

MainActivity中的代码：

/** * 帧动画 * 透明度alphaAnimation * 缩放动画scaleAnimation * 平移动画translateAnimation * 旋转动画rotateAnimation */
    public class MainActivity extends AppCompatActivity { 
        private ImageView img;
        private ScaleAnimation scaleAnimation;
        private RotateAnimation rotateAnimation;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            img = (ImageView) findViewById(R.id.img_book);
    
        }
    
        public void onClick(View view) {
            switch (view.getId()) {
                //透明度
                case R.id.bt_tmd:
                    //alphaAnimation();
                    /** * 此处是实现按动画的另一种方式，通过布局文件，步骤如下： * 1，在res目录下新建一个目录，命名为anim（必须是anim，规定）， * 2，然后在该目录下新建一个Animation文件，其根目录为set * 3，然后再设置透明度标签【参考本博客插图】 * （注意透明度数值结尾不要带float的单位f） * <alpha android:duration="2000" * android:fromAlpha="0.0" * android:toAlpha="0.6"/> * （此处是透明度，若实现其他动画，直接修改标签，设置对应属性值， * 模仿这个样式写，原理一毛一样） * 4，获取Animation对象，通过动画工具类的下载方法获取， * 获取对象方法的第一个参数是上下文，第二个参数布局文件id * 5，启动动画。 */
                    Animation animation = AnimationUtils.loadAnimation(this, R.anim.alphaanim);
                    img.startAnimation(animation);
                    break;
                case R.id.bt_xz:
                    rotateAnim();
                    break;
                case R.id.bt_jh:
                    animationSet();
                    break;
                case R.id.bt_py:
                    translateAnim();
                    break;
                case R.id.bt_sf:
                    scaleAnim();
                    break;
                default:
                    break;
            }
        }
    
        /** * 透明度： * 1，首先创建对象 透明度AlphaAnimation * 2，设置对象属性(插值器 * 3，开启动画 */
        private void alphaAnimation() {
            //透明度 改变动画效果
            AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);
            //设置动画播放时间
            alphaAnimation.setDuration(1000);
            //设置重播方式,重新开始，或者反转
            alphaAnimation.setRepeatMode(Animation.RESTART);
            //设置动画结束后是否保持当前的位置，true表示不返回动画开始的位置
            alphaAnimation.setFillAfter(true);
            //设置重播次数
            alphaAnimation.setRepeatCount(3);
            //开启动画
            img.startAnimation(alphaAnimation);
        }
    
        //旋转，步骤同透明度
        private void rotateAnim() {
            //默认控件以左上方为中心旋转
            //RotateAnimation rotateAnimation = new RotateAnimation(0f, 360f);
            //下面是构造函数的重载
            rotateAnimation = new RotateAnimation(0f,//旋转角度
                    360, //目标旋转角度
                    Animation.RELATIVE_TO_PARENT,//旋转中心X点参照类型，
                    // 此处是相对于父控件,（也可以以自己或者像素为参照物），
                    // 推荐以父控件或者自身为参照物，不建议以像素为参照物
                    0.5f, //（0-1）X中心参照的百分比
                    Animation.RELATIVE_TO_PARENT,//旋转中心点Y参照类型
                    0.5f//（0-1）Y中心参照的百分比
            );
            rotateAnimation.setDuration(2000);
            rotateAnimation.setRepeatCount(3);
            rotateAnimation.setFillAfter(true);
            img.startAnimation(rotateAnimation);
        }
    
        /** * 1.首先创建一个ScaleAnimation对象（设置透明度改变的值） * 2.设置动画对像的属性值（播放时间，播放状态，，，） * 3.开启动画（需要设置动画的控件调用startAnimation(你设置的动画)） * 第一个参数fromX为动画起始时 X坐标上的伸缩尺寸 0.0表示收缩到没有 * 　　 第二个参数toX为动画结束时 X坐标上的伸缩尺寸 1.0表示正常无伸缩 * 　　 第三个参数fromY为动画起始时Y坐标上的伸缩尺寸 值小于1.0表示收缩 * 　　 第四个参数toY为动画结束时Y坐标上的伸缩尺寸 值大于1.0表示放大 */
        private void scaleAnim() {
            //ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f);
            scaleAnimation = new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f,
                    Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
            scaleAnimation.setFillAfter(true);
            scaleAnimation.setRepeatCount(2);
            scaleAnimation.setDuration(2000);
            img.startAnimation(scaleAnimation);
        }
    
        //平移动画
        private void translateAnim() {
            TranslateAnimation translateAnimation =
                    new TranslateAnimation(0.0f, 2.0f, 0.5f, 1.5f);
            translateAnimation.setDuration(2000);
            translateAnimation.setRepeatCount(2);
            translateAnimation.setFillAfter(true);
            img.startAnimation(translateAnimation);
        }
    
        //动画集合
        private void animationSet() {
            //设置一个动画集合
            AnimationSet animationSet = new AnimationSet(true);
            animationSet.addAnimation(scaleAnimation);
            animationSet.addAnimation(rotateAnimation);
            //两种动画效果间的时间间隔，
            // 此处意思就是，先实现scaleAnimation动画，然后间隔1s，再实现rotateAnimation动画
            animationSet.setStartOffset(1000);
            img.startAnimation(animationSet);
            /**另外调用该方法时候， 提前点击一下scaleAnimation和rotateAnimation， 进行初始化，否则会抛出空指针异常， 当然此处代码可以优化，本案例重点是讲解原理。*/
        }
    }

布局文件中的代码：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.myapplication.alpha.MainActivity" >
    
        <Button android:id="@+id/bt_tmd" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onClick" android:text="透明度" />
    
        <Button android:id="@+id/bt_xz" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onClick" android:text="旋转" />
    
        <Button android:id="@+id/bt_sf" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onClick" android:text="缩放动画" />
    
        <Button android:id="@+id/bt_py" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onClick" android:text="平移动画" />
    
        <Button android:id="@+id/bt_jh" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onClick" android:text="动画集合" />
    
        <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorPrimary" android:orientation="vertical" >
    
            <ImageView android:id="@+id/img_book" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/emoji_3" />
        </LinearLayout>
    </LinearLayout>

通过设置xml文件实现动画的图示  
![这里写图片描述][20160224211217964]

[20160224211217964]: /images/20220731/0bf54cbe8a7d4316af0a8906399213ea.png