Android的View动画

夜雨飘零

发布于 2020-05-06 10:44:59

1.2K0

发布于 2020-05-06 10:44:59

文章被收录于专栏：CSDN博客CSDN博客

原文博客：Doi技术团队链接地址：https://blog.doiduoyi.com/authors/1584446358138 初心：记录优秀的Doi技术团队学习经历

View动画其实就是使ImageView上的图片在隐藏、旋转、缩放、平移通过动画的过程显示。

布局代码，设置图片要通过src设置

<Button
    android:text="透明动画"
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<ImageView
    android:id="@+id/alpha_image"
    android:src="@mipmap/ic_launcher"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Java代码：

final ImageView alpha = (ImageView) findViewById(R.id.alpha_image);
Button button = (Button) findViewById(R.id.button2);

button.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View v) {
        /**
         * AlphaAnimation 透明动画
         * RotateAnimation 旋转动画
         * ScaleAnimation 缩放动画
         * TranslateAnimation 平移动画
         * AnimationSet 组合动画
         * 第一个参数是开始的透明度
         * 第二个参数是结束的透明度
         */
        AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.0f);
        //设置动画的时间长度
        alphaAnimation.setDuration(2000);
        //设置重复的类型
        alphaAnimation.setRepeatMode(Animation.REVERSE);
        //设置重复的次数
        alphaAnimation.setRepeatCount(2);
        //设置是否停留在最终状态
        alphaAnimation.setFillAfter(false);
        //让动画执行起来
        alpha.startAnimation(alphaAnimation);
    }
});

效果图，就几行代码就可以完成了

要注意的一些问题

有些朋友不是使用startAnimation(alphaAnimation)启动的，而是使用下面的方式，会发现有些手机没有反应，这是因为一些手机不支持这种方法。

imageView.setAnimation(alphaAnimation);
alphaAnimation.start();

各种动画的Java代码

这种动画一般分成四类，那么我们就创建一个项目好好玩玩

透明动画

//AlphaAnimation 透明动画
//第一个参数是开始的透明度，第二个参数是结束的透明度，1.0完全透明，0.0完全透明
AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.0f);
//设置动画的时间长度
alphaAnimation.setDuration(2000);
//设置重复的类型
alphaAnimation.setRepeatMode(Animation.REVERSE);
//设置重复的次数
alphaAnimation.setRepeatCount(2);
//设置是否停留在最终状态
alphaAnimation.setFillAfter(false);
//让动画执行起来
imageView.startAnimation(alphaAnimation);

效果图

旋转动画

//RotateAnimation 旋转动画
//第一个参数是开始的的角度，第二个参数是结束的角度
//第三个参数是旋转中心的X坐标类型，Animation.RELATIVE_TO_SELF 表示自身
//第四个参数是X坐标，0.5f表示X的一半
//第五个参数是旋转中心的坐标类型，Animation.RELATIVE_TO_PARENT 表示父级容器
//第六个参数是Y坐标，0.5f表示X的一半
RotateAnimation rotateAnimation = new
        RotateAnimation(0, 360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_PARENT,0.5f);
//设置动画的时间长度
rotateAnimation.setDuration(2000);
//设置重复的类型
rotateAnimation.setRepeatMode(Animation.REVERSE);
//设置重复的次数
rotateAnimation.setRepeatCount(2);
//设置是否停留在最终状态
rotateAnimation.setFillAfter(false);
//让动画执行起来
imageView.startAnimation(rotateAnimation);

效果图

缩放动画

//ScaleAnimation 缩放动画
//第一个参数和第二个参数是表示X轴从1倍变宽2倍
//第三个参数和第四个参数是表示轴从1倍变宽2倍
//第五个参数是中心的X坐标类型，Animation.RELATIVE_TO_SELF 表示自身
//第六个参数是X坐标，0.5f表示X的一半
//第七个参数是中心的坐标类型，Animation.RELATIVE_TO_PARENT 表示父级容器
//第八个参数是Y坐标，0.5f表示X的一半
ScaleAnimation scaleAnimation = new
        ScaleAnimation(1,2,1,2,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_PARENT,0.5f);
//设置动画的时间长度
scaleAnimation.setDuration(2000);
//设置重复的类型
scaleAnimation.setRepeatMode(Animation.REVERSE);
//设置重复的次数
scaleAnimation.setRepeatCount(2);
//设置是否停留在最终状态
scaleAnimation.setFillAfter(false);
//让动画执行起来
imageView.startAnimation(scaleAnimation);

效果图

平移动画

//TranslateAnimation 平移动画
//前四个参数是表示X轴父级容器的-0.5平移到父级容器的0.5
//后四个参数是表示Y轴父级容器的-0.5平移到父级容器的0.5
TranslateAnimation translateAnimation = new
        TranslateAnimation(Animation.RELATIVE_TO_PARENT,-0.5f,Animation.RELATIVE_TO_PARENT,0.5f,
        Animation.RELATIVE_TO_PARENT,-0.5f,Animation.RELATIVE_TO_PARENT,0.5f);
//设置动画的时间长度
translateAnimation.setDuration(2000);
//设置重复的类型
translateAnimation.setRepeatMode(Animation.REVERSE);
//设置重复的次数
translateAnimation.setRepeatCount(2);
//设置是否停留在最终状态
translateAnimation.setFillAfter(true);
//可以设置一个动画插入器，可以添加一些效果，以下是一个跳动的效果
translateAnimation.setInterpolator(new BounceInterpolator());
//让动画执行起来
imageView.startAnimation(translateAnimation);

效果图

组合动画

//AnimationSet 组合动画
AnimationSet animationSet = new AnimationSet(false);

AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.0f);
alphaAnimation.setDuration(2000);
alphaAnimation.setRepeatMode(Animation.REVERSE);
alphaAnimation.setRepeatCount(2);
alphaAnimation.setFillAfter(false);
//添加透明动画
animationSet.addAnimation(alphaAnimation);

RotateAnimation rotateAnimation = new
        RotateAnimation(0, 360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_PARENT,0.5f);
rotateAnimation.setDuration(2000);
rotateAnimation.setRepeatMode(Animation.REVERSE);
rotateAnimation.setRepeatCount(2);
rotateAnimation.setFillAfter(false);
//添加旋转动画
animationSet.addAnimation(rotateAnimation);

ScaleAnimation scaleAnimation = new
        ScaleAnimation(1,2,1,2,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_PARENT,0.5f);
scaleAnimation.setDuration(2000);
scaleAnimation.setRepeatMode(Animation.REVERSE);
scaleAnimation.setRepeatCount(2);
scaleAnimation.setFillAfter(false);
//添加缩放动画
animationSet.addAnimation(scaleAnimation);

TranslateAnimation translateAnimation = new
        TranslateAnimation(Animation.RELATIVE_TO_PARENT,-0.5f,Animation.RELATIVE_TO_PARENT,0.5f,
        Animation.RELATIVE_TO_PARENT,-0.5f,Animation.RELATIVE_TO_PARENT,0.5f);
translateAnimation.setDuration(2000);
translateAnimation.setRepeatMode(Animation.REVERSE);
translateAnimation.setRepeatCount(2);
translateAnimation.setFillAfter(true);
translateAnimation.setInterpolator(new BounceInterpolator());
//添加平移动画
animationSet.addAnimation(translateAnimation);

//把整个动画组执行起来
imageView.startAnimation(animationSet);

效果图

整篇代码

activity_main.xml

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.dell.myapplication.MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="rotate"
            android:text="旋转" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="scale"
            android:text="缩放" />

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

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="set"
            android:text="组合" />
    </LinearLayout>

    <LinearLayout
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/imageView"
            android:src="@mipmap/ic_launcher"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

MainActivity.java

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.BounceInterpolator;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    private ImageView imageView;

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

    }

    public void alpha(View view) {
        //AlphaAnimation 透明动画
        //第一个参数是开始的透明度，第二个参数是结束的透明度，1.0完全透明，0.0完全透明
        AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.0f);
        //设置动画的时间长度
        alphaAnimation.setDuration(2000);
        //设置重复的类型
        alphaAnimation.setRepeatMode(Animation.REVERSE);
        //设置重复的次数
        alphaAnimation.setRepeatCount(2);
        //设置是否停留在最终状态
        alphaAnimation.setFillAfter(false);
        //让动画执行起来
        imageView.startAnimation(alphaAnimation);
    }

    public void rotate(View view) {
        //RotateAnimation 旋转动画
        //第一个参数是开始的的角度，第二个参数是结束的角度
        //第三个参数是旋转中心的X坐标类型，Animation.RELATIVE_TO_SELF 表示自身
        //第四个参数是X坐标，0.5f表示X的一半
        //第五个参数是旋转中心的坐标类型，Animation.RELATIVE_TO_PARENT 表示父级容器
        //第六个参数是Y坐标，0.5f表示X的一半
        RotateAnimation rotateAnimation = new
                RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
        //设置动画的时间长度
        rotateAnimation.setDuration(2000);
        //设置重复的类型
        rotateAnimation.setRepeatMode(Animation.REVERSE);
        //设置重复的次数
        rotateAnimation.setRepeatCount(2);
        //设置是否停留在最终状态
        rotateAnimation.setFillAfter(false);
        //让动画执行起来
        imageView.startAnimation(rotateAnimation);
    }

    public void scale(View view) {
        //ScaleAnimation 缩放动画
        //第一个参数和第二个参数是表示X轴从1倍变宽2倍
        //第三个参数和第四个参数是表示轴从1倍变宽2倍
        //第五个参数是中心的X坐标类型，Animation.RELATIVE_TO_SELF 表示自身
        //第六个参数是X坐标，0.5f表示X的一半
        //第七个参数是中心的坐标类型，Animation.RELATIVE_TO_PARENT 表示父级容器
        //第八个参数是Y坐标，0.5f表示X的一半
        ScaleAnimation scaleAnimation = new
                ScaleAnimation(1, 2, 1, 2, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
        //设置动画的时间长度
        scaleAnimation.setDuration(2000);
        //设置重复的类型
        scaleAnimation.setRepeatMode(Animation.REVERSE);
        //设置重复的次数
        scaleAnimation.setRepeatCount(2);
        //设置是否停留在最终状态
        scaleAnimation.setFillAfter(false);
        //让动画执行起来
        imageView.startAnimation(scaleAnimation);
    }

    public void translate(View view) {
        //TranslateAnimation 平移动画
        //前四个参数是表示X轴父级容器的-0.5平移到父级容器的0.5
        //后四个参数是表示Y轴父级容器的-0.5平移到父级容器的0.5
        TranslateAnimation translateAnimation = new
                TranslateAnimation(Animation.RELATIVE_TO_PARENT, -0.5f, Animation.RELATIVE_TO_PARENT, 0.5f,
                Animation.RELATIVE_TO_PARENT, -0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
        //设置动画的时间长度
        translateAnimation.setDuration(2000);
        //设置重复的类型
        translateAnimation.setRepeatMode(Animation.REVERSE);
        //设置重复的次数
        translateAnimation.setRepeatCount(2);
        //设置是否停留在最终状态
        translateAnimation.setFillAfter(true);
        //可以设置一个动画插入器，可以添加一些效果，以下是一个跳动的效果
        translateAnimation.setInterpolator(new BounceInterpolator());
        //让动画执行起来
        imageView.startAnimation(translateAnimation);
    }

    public void set(View view) {
        //AnimationSet 组合动画
        AnimationSet animationSet = new AnimationSet(false);

        AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.0f);
        alphaAnimation.setDuration(2000);
        alphaAnimation.setRepeatMode(Animation.REVERSE);
        alphaAnimation.setRepeatCount(2);
        alphaAnimation.setFillAfter(false);
        //添加透明动画
        animationSet.addAnimation(alphaAnimation);

        RotateAnimation rotateAnimation = new
                RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
        rotateAnimation.setDuration(2000);
        rotateAnimation.setRepeatMode(Animation.REVERSE);
        rotateAnimation.setRepeatCount(2);
        rotateAnimation.setFillAfter(false);
        //添加旋转动画
        animationSet.addAnimation(rotateAnimation);

        ScaleAnimation scaleAnimation = new
                ScaleAnimation(1, 2, 1, 2, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
        scaleAnimation.setDuration(2000);
        scaleAnimation.setRepeatMode(Animation.REVERSE);
        scaleAnimation.setRepeatCount(2);
        scaleAnimation.setFillAfter(false);
        //添加缩放动画
        animationSet.addAnimation(scaleAnimation);

        TranslateAnimation translateAnimation = new
                TranslateAnimation(Animation.RELATIVE_TO_PARENT, -0.5f, Animation.RELATIVE_TO_PARENT, 0.5f,
                Animation.RELATIVE_TO_PARENT, -0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
        translateAnimation.setDuration(2000);
        translateAnimation.setRepeatMode(Animation.REVERSE);
        translateAnimation.setRepeatCount(2);
        translateAnimation.setFillAfter(true);
        translateAnimation.setInterpolator(new BounceInterpolator());
        //添加平移动画
        animationSet.addAnimation(translateAnimation);

        //把整个动画组执行起来
        imageView.startAnimation(animationSet);
    }
}

使用XML方式创建动画

在res下创建文件夹anim，在anim创建alpha.xml（平移动画）

写上以下的代码：

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

在执行动画时，只需要两行代码就可以了

Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.alpha);
alpha.startAnimation(animation);

也可以实现动画，建议使用xml，思路更清晰

项目源码：https://resource.doiduoyi.com/#3w3msa4

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017-08-16 ，如有侵权请联系 cloudcommunity@tencent.com 删除

https

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

Android的View动画

Android的View动画

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐