动画篇（一）——android动画基础

最新推荐文章于 2024-08-09 10:19:02 发布

一颗语法糖

最新推荐文章于 2024-08-09 10:19:02 发布

阅读量617

点赞数

分类专栏： android体系（2）-UI及交互文章标签： android 动画

本文链接：https://blog.csdn.net/w8897282/article/details/51297251

版权

android体系（2）-UI及交互专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本人水平有限，文章中如果出现什么不正确或者模糊的地方，还请各位小伙伴留下评论，多多指教 : )
目录

【动画概述】

动画种类

Tween animation 变换动画
Frame animation 帧动画
Layout animation 布局动画
Property animation 属性动画

动画的公共属性

（1）Duration：动画持续时间（单位：毫秒）

（2）fillAfter：设置为true，动画转化在动画结束后被应用

（3）fillBefore：设置为true，动画转化在动画开始前被应用

（4）interpolator：动画插入器（加速、减速插入器）

（5）repeatCount：动画重复次数

（6）repeatMode：顺序重复/倒序重复

（7）startOffset：动画之间的时间间隔

Animation的两种实现方式

（1）配置文件（res/admin）——alpha，scale，translate，rotate（适用于动画形式和参数固定）。实现方式如下：

//通过一个动画工具类去加载xml文件
Animation scale =AnimationUtils.loadAnimation(Activity.this,R.anim.alpha);
//开始动画
view.startAnimation(scale);

然后还要在res/anim/alpha.xml里面写上

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

（2）Java代码实现——AlphaAnimation，ScaleAnimation，TranslateAnimation，RotateAnimation（偏向动画的动态实现）。实现方式如下：

//透明度从%10到%100
 Animation alpha = new AlphaAnimation(0.1f,1.0f); 
 //设置动画的时间为1秒
 alpha.setDuration(1000);
 //开始播放
 view.startAnimation(alpha);

【变换动画的重要属性】

 Animation animation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.alpha);
img.startAnimation(animation);

这是使用配置文件设置动画的模板代码，加载不同的xml文件，就能实现相应的效果

AlphaAnimation (透明度动画)

（1）fromAlpha:动画起始透明度

（2）toAlpha：动画终止时透明度

0.0表示完全透明 | 1.0表示完全不透明

xml栗子：

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

java栗子：

 AlphaAnimation alpha=new AlphaAnimation(0,1); //由透明到不透明
 alpha.setDuration(1000);
 view.startAnimation(alpha);

ScaleAnimation（缩放动画）

（1）fromX,toX 分别是起始时和结束时X坐标上的伸缩尺寸。

（2）fromY,toY分别是起始和结束时y坐标上的伸缩尺寸。

（3）pivotX，pivoY分别为伸缩动画相对于x，y坐标开始的位置。（可以理解为缩放中心点）

xml栗子

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="2000"
        android:fillAfter="false"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toXScale="1.0"
        android:toYScale="1.0"/>

</set>

java栗子：

//参数1：x轴的初始值
//参数2：x收缩后的值
//参数3：y轴的初始值
//参数4：y轴收缩后的值
//参数5：确定x轴坐标的类型
//参数6：x轴的值，0.5f表示以自身这个控件的一半长度为x轴
//参数7：确定y轴坐标的类型
//参数8：y轴的值，0.5f表示以自身这个控件的一半长度为y轴
ScaleAnimation scaleAnimation =new ScaleAnimation(
0，0.1f，0，0.1f，
Animation.RELATIVE_TO_SELF,0.5f,
Animation.RELATIVE_TO_SELF,0.5f);)
scaleAnimation.setDuration(1000);
view.startAnimation(scaleAnimation);

TranslateAnimation（位移动画）

（1）fromXDelta,fromYdelta 分别是起始时的X坐标和Y坐标。

（2）ftoXDelta,toYdelta,分别是结束时X坐标和Y坐标。

xml栗子：

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

java栗子：

//参数1～2：x轴的开始位置
//参数3～4：y轴的开始位置
//参数5～6：x轴的结束位置
//参数7～8：x轴的结束位置
TranslateAnimation translateAnimation =
  new TranslateAnimation(
               Animation.RELATIVE_TO_SELF,0f,
               Animation.RELATIVE_TO_SELF,0.5f,
               Animation.RELATIVE_TO_SELF,0f,
               Animation.RELATIVE_TO_SELF,0.5f); translateAnimation.setDuration(1000);
view.startAnimation(translateAnimation);

RotateAnimation（旋转动画）

（1）fromDegrees起始角度。

（2）toDegrees 终止角度

（3）pivotX，pivotY，分别为旋转动画相对于x，y的坐标开始位置。

xml栗子：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:fillAfter="false"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotY="50%"
        android:pivotX="50%"/>
</set>

java栗子：

//参数1：从哪个旋转角度开始
//参数2：转到什么角度
//后4个参数用于设置围绕着旋转的圆的圆心在哪里
//参数3：确定x轴坐标的类型，有ABSOLUT绝对坐标、RELATIVE_TO_SELF相对于自身坐标、RELATIVE_TO_PARENT相对于父控件的坐标
//参数4：x轴的值，0.5f表明是以自身这个控件的一半长度为x轴
//参数5：确定y轴坐标的类型
//参数6：y轴的值，0.5f表明是以自身这个控件的一半长度为x轴

  RotateAnimation rotateAnimation = new RotateAnimation
  (0, 360,
     Animation.RELATIVE_TO_SELF,0.5f,
     Animation.RELATIVE_TO_SELF,0.5f);
 rotateAnimation.setDuration(1000);
 view.startAnimation(rotateAnimation);

以上的四种基本变换动画比较简单，但是还是希望小伙伴们自己亲手码一码。

【组合动画的使用】

本节内容将刚才讲解的几种基础动画进行组合，制作出更加流畅的动画

栗子一：

分别播放两个动画A和B，先播放A，设置A的AnimationListner。当onAnimationEnd触发（即A播放完毕）时，开始播放B

思路：首先加载A的动画，然后让view执行A动画，然后加载B动画，将B动画的执行逻辑放在A的动画监听事件当中。看下代码就能理解

//加载A动画
 Animation animation1=AnimationUtils.loadAnimation(this,R.anim.translate);
                img.startAnimation(animation1);
//加载B动画
                final Animation animation2=AnimationUtils.loadAnimation(this,R.anim.rotate);
                //设置动画监听事件
                animation2.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                     img.startAnimation(animation2);
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });

栗子二：

写一个动画集AnimationSet(可以存储多个动画)，在其中定义动画A和B，为动画B设置startOffset，其值就是前一个动画播放所需要的时间。

java代码：

Animation group_animation=AnimationUtils.loadAnimation(this,R.anim.group_anim);
                img.startAnimation(group_animation);

动画配置文件：group_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="2000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
    <alpha
        android:duration="2000"
        android:fillAfter="false"
        android:fromAlpha="1.0"
        android:startOffset="2000" 
        android:toAlpha="0.0" />
</set>

也可以完成栗子一的效果.

栗子三：

利用Animation的setRepeatCount、setRepeatMode来实现循环动画

代码如下：

   Animation alphaAnimation=new AlphaAnimation(0.1f,1.0f);
                alphaAnimation.setDuration(100);
                alphaAnimation.setRepeatCount(10);
                //设置重复模式
                alphaAnimation.setRepeatMode(Animation.REVERSE);
                img.startAnimation(alphaAnimation);

栗子四：

使用overridePendingTransition方法，完成Activity切换动画。
该方法传递2个参数：
[第二个activity进入动画] [第一个activity退出的动画]

代码如下：

 Intent intent=new Intent(MainActivity.this,SecondActivity.class);
                startActivity(intent);
                overridePendingTransition(R.anim.zoom_in,R.anim.zoom_out);

动画配置文件：zoom_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="1000"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromYScale="0.1"
        android:fromXScale="0.1"
        android:toYScale="1.0"
        android:toXScale="1.0"/>
    <alpha
        android:duration="1000"
        android:fromAlpha="0.5"
        android:toAlpha="1.0"/>
</set>

动画配置文件：zoom_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="1000"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromYScale="0.1"
        android:fromXScale="0.1"
        android:toYScale="1.0"
        android:toXScale="1.0"/>
    <alpha
        android:duration="1000"
        android:fromAlpha="0.5"
        android:toAlpha="1.0"/>
</set>

一颗语法糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动画篇（一）——android动画基础

目录动画概述动画种类动画的公共属性Animation的两种实现方式变换动画的重要属性AlphaAnimation 透明度动画ScaleAnimation缩放动画TranslateAnimation位移动画RotateAnimation旋转动画组合动画的使用栗子一栗子二栗子三栗子四【动画概述】动画种类Tween anim
复制链接

扫一扫

专栏目录