Android视图动画浅析

Posted 2022-12-08 宿罪

视图动画

 视图动画共有四种，分别为透明度，旋转，平移，缩放动画，如同名字所说一样，它是一种视图上的动画，改变的只是视觉上的效果，实际上View的属性如位置，大小，透明度等并没有受到动画的影响。下面将演示四种视图动画的代码及xml定义使用。

代码定义：

public void alpha(View v)
    AlphaAnimation alphaAnimation = new AlphaAnimation(1,0);
    alphaAnimation.setDuration(3000);
    imageView.startAnimation(alphaAnimation);*/


public void rotate(View v)
    RotateAnimation rotateAnimation = new RotateAnimation(0,360,imageView.getWidth()/2,imageView.getHeight()/2);
    rotateAnimation.setDuration(3000);
    imageView.startAnimation(rotateAnimation);


public void translate(View v)
    TranslateAnimation translateAnimation = new TranslateAnimation(0,imageView.getWidth(),0,imageView.getHeight());
    translateAnimation.setDuration(3000);
    imageView.startAnimation(translateAnimation);


public void scale(View v)
    ScaleAnimation scaleAnimation = new ScaleAnimation(1f,0.5f,1f,0.5f,imageView.getWidth()/2,imageView.getHeight()/2);
    scaleAnimation.setDuration(3000);
    imageView.startAnimation(scaleAnimation);

演示xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:src="@mipmap/test"
        android:layout_marginTop="30dp"
        android:layout_gravity="center"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:padding="10dp"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:text="alpha"
            android:onClick="alpha"
            android:layout_margin="10dp"
            android:layout_height="wrap_content" />

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:text="rotate"
            android:onClick="rotate"
            android:layout_margin="10dp"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:padding="10dp"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:text="translate"
            android:onClick="translate"
            android:layout_margin="10dp"
            android:layout_height="wrap_content" />

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:text="scale"
            android:onClick="scale"
            android:layout_margin="10dp"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

效果图：

 

 

上面的效果同样可以通过定义动画xml文件来实现，如：

alpha.xml

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

rotate.xml

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

</rotate>

translate.xml

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

</translate>

scale.xml

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

</scale>

然后在代码中使用AnimationUtils.loadAnimation(this,R.anim.alpha)加载动画执行即可，如：

public void alpha(View v)
    imageView.startAnimation(AnimationUtils.loadAnimation(this,R.anim.alpha));

上面的视图动画除了可以单独执行外，往往需要组合来实现炫酷的动画效果，这时我们可以通过AnimationSet来组合上面四种视图动画，如：

public void set(View v)
    AnimationSet animationSet = new AnimationSet(true);
    animationSet.addAnimation(AnimationUtils.loadAnimation(this,R.anim.alpha));
    animationSet.addAnimation(AnimationUtils.loadAnimation(this,R.anim.rotate));
    animationSet.addAnimation(AnimationUtils.loadAnimation(this,R.anim.translate));
    animationSet.addAnimation(AnimationUtils.loadAnimation(this,R.anim.scale));
    animationSet.setDuration(3000);
    imageView.startAnimation(animationSet);

效果图:

除了动画的组合外，有时候我们需要对动画进行监听，如动画的开始，结束等以便完成相应的业务逻辑，我们可以调用setAnimationListener来给动画添加监听，如：

animationSet.setAnimationListener(new Animation.AnimationListener() 
    @Override
    public void onAnimationStart(Animation animation) 
        // 动画开始
    

    @Override
    public void onAnimationEnd(Animation animation) 
        // 动画结束
    

    @Override
    public void onAnimationRepeat(Animation animation) 
        // 动画重复
    
);

学会了以上关于视图动画后基本上对于一些普通效果的动画制作及相关业务逻辑处理也就没什么问题了，不过视图动画并不能真实地改变View的大小，位置，透明度等等。要想真正地通过动画改变View的大小，位置，透明度等属性需要使用属性动画。