专栏首页CSDN博客Android的View动画

Android的View动画

原文博客: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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 《深度学习》学习笔记三——数值计算

    当函数只有二维输入时,其只有一个驻点,所以这个驻点就是它的最小点或者最大点。但是通常遇到更多的是多维输入的函数,它具有多个驻点,所以它有多个极小点和极大点,如下...

    夜雨飘零
  • Android使用Fragment仿微信底部导航栏

    下面是给每个Fragment添加按钮的点击事件,值得注意的是,在Fragment的点击事件跟Activity不一完全相同,在获取空间是不是直接findViewB...

    夜雨飘零
  • 在Android手机上使用MACE实现图像分类

    在之前笔者有介绍过《在Android设备上使用PaddleMobile实现图像分类》,使用的框架是百度开源的PaddleMobile。在本章中,笔者将会介绍使用...

    夜雨飘零
  • SAP Spartacus中使用到的Angular ModuleWithProviders类型

    FunctionConstructor的定义,和JavaScript里的Function构造器类似:

    Jerry Wang
  • 微软的新终端(windows terminal)可以下载啦,赶紧体验一波

    在6月22日,微软公布了Windows Terminal命令行终端工具预览版已经开放下载。这是一个现代化的快速终端应用程序,适用于命令行工具和shell,包括命...

    Happyjava
  • 卢政:微服务与ServiceMesh在TSF平台的应用与实践

    12月15日,由腾讯云主办的首届“腾讯云+社区开发者大会”在北京举行。本届大会以“新趋势•新技术•新应用”为主题,汇聚了超40位技术专家,共同探索人工智能、大数...

    云加社区技术沙龙
  • 搞定JVM基本原理和面试题,看看这几本书妥妥够了!

    在介绍本书单之前,我想先问一下各位读者,你们之前了解过JVM么,如果有了解过,那么了解的程度又如何呢。经过了10多年的发展,Java Web从开发框架到社区都已...

    程序员书单
  • Go语言程序设计

    字符串处理:strings.Join(os.Args[1:]," ") 标准输入输出:

    用户5760343
  • 腾讯广告部门一面-自然语言处理方向

    在 EMLo 中,他们使用的是一个双向的 LSTM 语言模型,由一个前向和一个后向语言 模型构成,目标函数就是取这两个方向语言模型的最大似然。 前向部分

    故事尾音
  • HTTP性能测试

    由于我们公司用户数量庞大,在服务上线之前,性能测试必不可少。本文主要介绍性能测试的流程,需要关注的指标,性能测试工具Apache bench的使用,以及常见的坑...

    腾讯移动品质中心TMQ

扫码关注云+社区

领取腾讯云代金券