第六单元

作者: 贤兵 | 来源:发表于2020-12-12 01:06 被阅读0次

一、android中的动画

动画分类:

1、帧动画
2、补间动画
3、属性动画

二、帧动画

类似于电影，一张张图片连续播放

1、xml方式

anim.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/anim1" android:duration="100"/>
    <item android:drawable="@drawable/anim2" android:duration="100"/>
    <item android:drawable="@drawable/anim3" android:duration="100"/>
    <item android:drawable="@drawable/anim4" android:duration="100"/>
    <item android:drawable="@drawable/anim5" android:duration="100"/>
    <item android:drawable="@drawable/anim6" android:duration="100"/>
    <item android:drawable="@drawable/anim7" android:duration="100"/>
    <item android:drawable="@drawable/anim8" android:duration="100"/>
    <item android:drawable="@drawable/anim9" android:duration="100"/>
    <item android:drawable="@drawable/anim10" android:duration="100"/>
    <item android:drawable="@drawable/anim11" android:duration="100"/>
    <item android:drawable="@drawable/anim12" android:duration="100"/>
</animation-list>

anim1.gif

anim2.gif

anim3.gif

anim4.gif

anim5.gif

anim6.gif

anim7.gif

anim8.gif

anim9.gif

anim10.gif

anim11.gif

anim12.gif

2、代码方式

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="start" />
    <Button
        android:id="@+id/stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="stop" />
    <Button
        android:id="@+id/java_code"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="java code frame animation" />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/image_view" />
</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private ImageView imageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = findViewById(R.id.image_view);
        imageView.setImageResource(R.drawable.anim);
        findViewById(R.id.start).setOnClickListener(v -> {
            AnimationDrawable animationDrawable = (AnimationDrawable)imageView.getDrawable();
            if (animationDrawable != null && !animationDrawable.isRunning()) {
                animationDrawable.start();
            }
        });

        findViewById(R.id.stop).setOnClickListener(v -> {
            AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();
            if (animationDrawable != null && animationDrawable.isRunning()) {
                animationDrawable.stop();
            }
        });

        findViewById(R.id.java_code).setOnClickListener(v -> {
            frameAnimation();
        });
    }

    private void frameAnimation() {
        AnimationDrawable animationDrawable = new AnimationDrawable();
        animationDrawable.addFrame(getDrawable(R.drawable.anim1), 100);
        animationDrawable.addFrame(getDrawable(R.drawable.anim2), 100);
        animationDrawable.addFrame(getDrawable(R.drawable.anim3), 100);
        animationDrawable.addFrame(getDrawable(R.drawable.anim4), 100);
        animationDrawable.addFrame(getDrawable(R.drawable.anim5), 100);
        animationDrawable.addFrame(getDrawable(R.drawable.anim6), 100);
        animationDrawable.addFrame(getDrawable(R.drawable.anim7), 100);
        animationDrawable.addFrame(getDrawable(R.drawable.anim8), 100);
        animationDrawable.addFrame(getDrawable(R.drawable.anim9), 100);
        animationDrawable.addFrame(getDrawable(R.drawable.anim10), 100);
        animationDrawable.addFrame(getDrawable(R.drawable.anim11), 100);
        animationDrawable.addFrame(getDrawable(R.drawable.anim12), 100);
        animationDrawable.setOneShot(true);
        imageView.setImageDrawable(animationDrawable);
        animationDrawable.start();
    }
}

二、补间动画

图片.png

其中AnimationSet是其余几种以及其他AnimationSet的组合
基本属性：

图片.png

其中，
Duration：持续时间，单位是毫秒
Interpolator：插值器
插值器列表

图片.png

Alpha属性

图片.png

Rorate属性

图片.png

Scale属性

图片.png

Translate 属性

图片.png

AnimationSet

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@[package:]anim/interpolator_resource"
    android:shareInterpolator=["true" | "false"] >
    <alpha
        android:fromAlpha="float"
        android:toAlpha="float" />
    <scale
        android:fromXScale="float"
        android:toXScale="float"
        android:fromYScale="float"
        android:toYScale="float"
        android:pivotX="float"
        android:pivotY="float" />
    <translate
        android:fromXDelta="float"
        android:toXDelta="float"
        android:fromYDelta="float"
        android:toYDelta="float" />
    <rotate
        android:fromDegrees="float"
        android:toDegrees="float"
        android:pivotX="float"
        android:pivotY="float" />
    <set>
        ...
    </set></set>

示例

alpha.xml

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

rorate.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:fromDegrees="90"
    android:toDegrees="180"
    android:pivotX="50%"
    android:pivotY="50%"/>

scale.xml

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

translate.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:fromXDelta="300"
    android:fromYDelta="300"
    android:toXDelta="200"
    android:toYDelta="200" />

activity_main.xml

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

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:id="@+id/image_view"
        android:src="@drawable/ic_launcher" />

    <Button
        android:id="@+id/alpha"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="alpha" />

    <Button
        android:id="@+id/scale"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="scale" />

    <Button
        android:id="@+id/translate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="translate" />

    <Button
        android:id="@+id/rotate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="rotate" />

    <Button
        android:id="@+id/animation_set"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="animation_set" />

    <Button
        android:id="@+id/java_code"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="java_code" />

    <Button
        android:id="@+id/serial_play"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="serial_play" />

</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = findViewById(R.id.image_view);

        findViewById(R.id.alpha).setOnClickListener(v -> {
            alpha();
        });
        findViewById(R.id.scale).setOnClickListener(v -> {
            scale();
        });
        findViewById(R.id.translate).setOnClickListener(v -> {
            translate();
        });
        findViewById(R.id.rotate).setOnClickListener(v -> {
            rotate();
        });
        findViewById(R.id.animation_set).setOnClickListener(v -> {
            animation_set();
        });
        findViewById(R.id.java_code).setOnClickListener(v -> {
            java_code();
        });
        findViewById(R.id.serial_play).setOnClickListener(v -> {
            serial_play();
        });
    }

    private void alpha() {
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha);
        imageView.startAnimation(animation);
    }

    private void scale() {
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale);
        imageView.startAnimation(animation);
    }

    private void translate() {
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);
        imageView.startAnimation(animation);
    }

    private void rotate() {
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
        imageView.startAnimation(animation);
    }

    private void animation_set() {
        AnimationSet animationSet = new AnimationSet(true);
        Animation alpha = AnimationUtils.loadAnimation(this, R.anim.alpha);
        Animation scale = AnimationUtils.loadAnimation(this, R.anim.scale);
        Animation translate = AnimationUtils.loadAnimation(this, R.anim.translate);
        Animation rotate = AnimationUtils.loadAnimation(this, R.anim.rotate);

        animationSet.addAnimation(alpha);
        animationSet.addAnimation(scale);
        animationSet.addAnimation(translate);
        animationSet.addAnimation(rotate);
        imageView.startAnimation(animationSet);
    }

    private void java_code() {
//        AlphaAnimation animation = new AlphaAnimation(0, 1);
//        ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2);
//        TranslateAnimation animation = new TranslateAnimation(100, 100, 200, 300);
        RotateAnimation animation = new RotateAnimation(0, 135);
        animation.setDuration(1000);
        animation.setInterpolator(new LinearInterpolator());
        animation.setRepeatMode(Animation.REVERSE);
        animation.setRepeatCount(2);
        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                Log.i("Simon", "onAnimationStart");
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                Log.i("Simon", "onAnimationEnd");
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                Log.i("Simon", "onAnimationRepeat");
            }
        });
        imageView.startAnimation(animation);
    }

    private void serial_play() {
        anim1();
    }

    private void anim1() {
        AlphaAnimation animation = new AlphaAnimation(0, 1);
        animation.setDuration(1000);
        animation.setInterpolator(new LinearInterpolator());
        animation.setRepeatMode(Animation.REVERSE);
        animation.setRepeatCount(2);
        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                Log.i("Simon", "onAnimationStart");
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                Log.i("Simon", "onAnimationEnd");
                anim2();
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                Log.i("Simon", "onAnimationRepeat");
            }
        });
        imageView.startAnimation(animation);
    }
    private void anim2() {
        ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2);
        animation.setDuration(1000);
        animation.setInterpolator(new LinearInterpolator());
        animation.setRepeatMode(Animation.REVERSE);
        animation.setRepeatCount(2);
        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                Log.i("Simon", "onAnimationStart");
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                Log.i("Simon", "onAnimationEnd");
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                Log.i("Simon", "onAnimationRepeat");
            }
        });
        imageView.startAnimation(animation);
    }
}

第六单元

一、android中的动画

动画分类:

二、帧动画

1、xml方式

2、代码方式

二、补间动画

示例

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读