Android 补间动画学习

最新推荐文章于 2020-01-08 14:33:45 发布

南风子c

最新推荐文章于 2020-01-08 14:33:45 发布

阅读量233

点赞数

分类专栏： android入门笔记

本文链接：https://blog.csdn.net/qq_39326574/article/details/100164422

版权

android入门笔记专栏收录该内容

25 篇文章 3 订阅

订阅专栏

先上图，看效果
在这里插入图片描述
我这是从大神那边整理的，需要详细的请移步。
补间动画的四种：
平移动画（Translate）
缩放动画（scale）
旋转动画（rotate）
透明度动画（alpha）
在res目录创建一个anim目录，把你的动画都放在里面。

1.平移动画（Translate）

<?xml version="1.0" encoding="utf-8"?>
    <!--采用<translate /> 标签表示平移动画-->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fromYDelta="0"
    android:toYDelta="500"
    android:fromXDelta="0"
    android:toXDelta="500"
    />

属性详解
划重点：android:duration=“3000” 动画持续时间（ms），必须设置，动画才有效果

 <!--  以下参数是平移动画特有的属性
      android:fromXDelta="0"  视图在竖直方向x 移动的起始值
      android:toXDelta="500"  视图在水平方向x 移动的结束值
      android:fromYDelta="0"  视图在竖直方向y 移动的起始值
      android:toYDelta="500" 视图在竖直方向y 移动的结束值-->

    <!-- 以下参数是4种动画效果的公共属性,即都有的属性
    android:duration="3000"  动画持续时间（ms），必须设置，动画才有效果
    android:startOffset ="1000"  动画延迟开始时间（ms）
    android:fillBefore = “true” 动画播放完后，视图是否会停留在动画开始的状态，默认为true
    android:fillAfter = “false” 动画播放完后，视图是否会停留在动画结束的状态，优先于fillBefore值，默认为false
    android:fillEnabled= “true” 是否应用fillBefore值，对fillAfter值无影响，默认为true
    android:repeatMode= “restart”  选择重复播放动画模式，restart代表正序重放，reverse代表倒序回放，默认为restart
    android:repeatCount = “0”  重放次数（所以动画的播放次数=重放次数+1），为infinite时无限重复-->

java代码实现动画效果

  Animation translateAnim= AnimationUtils.loadAnimation(this,R.anim.anim_translate); //加载动画
  mImageView.startAnimation(translateAnim);//给图片添加动画

2.缩放动画（scale）

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

属性详解
划重点：android:duration=“3000” 动画持续时间（ms），必须设置，动画才有效果

<!--以下参数是缩放动画特有的属性
    android:fromXScale="0.0"  动画在水平方向X的起始缩放倍数,0.0表示收缩到没有,1.0表示正常无伸缩;值小于1.0表示收缩,值大于1.0表示放大。
    android:toXScale="2"  动画在水平方向X的结束缩放倍数
    android:fromYScale="0.0" 动画开始前在竖直方向Y的起始缩放倍数
    android:toYScale="2" 动画在竖直方向Y的结束缩放倍数

    android:pivotX="50%"  缩放轴点的x坐标
    android:pivotY="50%"  缩放轴点的y坐标
    // 轴点 = 视图缩放的中心点
    // pivotX pivotY,可取值为数字，百分比，或者百分比p
    // 设置为数字时（如50），轴点为View的左上角的原点在x方向和y方向加上50px的点。在Java代码里面设置这个参数的对应参数是Animation.ABSOLUTE。
    // 设置为百分比时（如50%），轴点为View的左上角的原点在x方向加上自身宽度50%和y方向自身高度50%的点。在Java代码里面设置这个参数的对应参数是Animation.RELATIVE_TO_SELF。
    // 设置为百分比p时（如50%p），轴点为View的左上角的原点在x方向加上父控件宽度50%和y方向父控件高度50%的点。在Java代码里面设置这个参数的对应参数是Animation.RELATIVE_TO_PARENT
    // 两个50%表示动画从自身中间开始

    以下参数是4种动画效果的公共属性,即都有的属性
    android:duration="3000"  动画持续时间（ms），必须设置，动画才有效果
    android:startOffset ="1000"  动画延迟开始时间（ms）
    android:fillBefore = “true” 动画播放完后，视图是否会停留在动画开始的状态，默认为true
    android:fillAfter = “false” 动画播放完后，视图是否会停留在动画结束的状态，优先于fillBefore值，默认为false
    android:fillEnabled= “true” 是否应用fillBefore值，对fillAfter值无影响，默认为true
    android:repeatMode= “restart”  选择重复播放动画模式，restart代表正序重放，reverse代表倒序回放，默认为restart|
    android:repeatCount = “0”  重放次数（所以动画的播放次数=重放次数+1），为infinite时无限重复-->

java代码实现

Animation scaleAnim=AnimationUtils.loadAnimation(this,R.anim.anim_scale);//加载动画 
mImageView.startAnimation(scaleAnim);//给图片添加动画

3.旋转动画（rotate）

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

</rotate>

属性详解
划重点：android:duration=“3000” 动画持续时间（ms），必须设置，动画才有效果

以下参数是旋转动画特有的属性
    android:duration="1000"
    android:fromDegrees="0" 动画开始时 视图的旋转角度(正数 = 顺时针，负数 = 逆时针)
    android:toDegrees="270"  动画结束时 视图的旋转角度(正数 = 顺时针，负数 = 逆时针)
    android:pivotX="50%"  旋转轴点的x坐标
    android:pivotY="0"  旋转轴点的y坐标
    轴点 = 视图缩放的中心点

共有属性就不贴了，上面都有。
java代码实现

 Animation rotateAnim=AnimationUtils.loadAnimation(this,R.anim.anim_rotate);//加载动画 
 mImageView.startAnimation(rotateAnim);//给图片添加动画

4.透明度动画（alpha）

<?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="3000">
</alpha>

属性详解
划重点：android:duration=“3000” 动画持续时间（ms），必须设置，动画才有效果

  // 以下参数是透明度动画特有的属性
    android:fromAlpha="1.0"  动画开始时视图的透明度(取值范围: -1 ~ 1) 
    android:toAlpha="0.0"    动画结束时视图的透明度(取值范围: -1 ~ 1)
    我测试了下：小于0了就看不见了，1就是不透明状态

java代码实现

 Animation alphaAnim=AnimationUtils.loadAnimation(this,R.anim.anim_alpha);//加载动画
mImageView.startAnimation(alphaAnim);//给图片添加动画

5.全部代码

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/image_view"
        android:layout_centerInParent="true"
        android:src="@mipmap/ic_launcher"/>
    <RadioGroup
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <RadioButton
            android:id="@+id/radio_btn_1"
            android:text="平移"
            android:button="@null"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent" />
        <RadioButton
            android:id="@+id/radio_btn_2"
            android:text="缩放"
            android:button="@null"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent" />
        <RadioButton
            android:id="@+id/radio_btn_3"
            android:text="旋转"
            android:button="@null"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent" />
        <RadioButton
            android:id="@+id/radio_btn_4"
            android:text="透明度"
            android:button="@null"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent" />
    </RadioGroup>
</RelativeLayout>

MainActivity

package cn.hichips.anim;

import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
   ImageView mImageView;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.radio_btn_1).setOnClickListener(this);
        findViewById(R.id.radio_btn_2).setOnClickListener(this);
        findViewById(R.id.radio_btn_3).setOnClickListener(this);
        findViewById(R.id.radio_btn_4).setOnClickListener(this);
        mImageView=findViewById(R.id.image_view);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.radio_btn_1:
                Animation translateAnim= AnimationUtils.loadAnimation(this,R.anim.anim_translate);
                mImageView.startAnimation(translateAnim);
                break;
            case R.id.radio_btn_2:
                Animation scaleAnim=AnimationUtils.loadAnimation(this,R.anim.anim_scale);
                mImageView.startAnimation(scaleAnim);
                break;
            case R.id.radio_btn_3:
                Animation rotateAnim=AnimationUtils.loadAnimation(this,R.anim.anim_rotate);
                mImageView.startAnimation(rotateAnim);
                break;
            case R.id.radio_btn_4:
                Animation alphaAnim=AnimationUtils.loadAnimation(this,R.anim.anim_alpha);
                mImageView.startAnimation(alphaAnim);
                break;
        }
    }
}

好了，补间动画就到这了。动画的代码之前就写好了。
然后呢，我在这里顺带记录下之前学的知识
给按钮添加按下之后变颜色的操作：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/ic_launcher_background"/>
<item android:drawable="@drawable/border_all"/>
</selector>

state_checked=“true” ，就是单选按钮被选中之后变颜色，还有其他的state，比如

android:state_pressed="true"
android:state_hovered="true"
....等等

给控件加边框：
全边：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 主体背景颜色值 -->
    <solid android:color="#FFFFFF" />
    <!-- 连框宽度和颜色值 -->
    <stroke
        android:width="0.01dp"
        android:color="#FF0000" />
</shape>
<!--  下面是加padding的，可加可不加
<padding
android:bottom="1dp"
android:left="0.5dp"
android:right="0.5dp"
android:top="0dp" />
-->

非全边：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 连框颜色值 -->
    <item>
        <shape>
            <solid android:color="#F00" />
        </shape>
    </item>
    <!-- 主体背景颜色值 -->
    <item
        android:bottom="0.5dp"
        android:right="0.5dp"><!--设置只有底部和右边有边框-->
        <shape>
            <solid android:color="#FFF" />
        </shape>
    </item>
</layer-list>

要想使用这些效果，只需要给控件设置一个background。例如：

 android:background="@drawable/border_part"

我也在学习阶段，看不懂的建议去大神那看看，我写这个仅仅为了加深记忆，写的不好勿怪。

南风子c

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录