Android_开发_Day26_android中的三种动画

Android_开发_Day26_android中的三种动画

目的：

学会使用Android里面的动画来增加UI的优美程度

技术：

<1> 关键帧动画：

所谓的关键帧动画就是由很多张图，组合而成的动画，就像传统的2D动漫一样，每一帧都是一张图片，这些图片按顺序播放就成了动画，关键帧动画主要有两种放法：
方法一：
xml配置(适用于既定的动画)
基本配置代码如下：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">

    <!--一个item对应一帧，drawable：配置动画的图片-->
    <!--duration：配置这张图片在动画中播放的时间，单位毫秒-->
    <item android:drawable="@drawable/campfire01" android:duration="100"/>
    <item android:drawable="@drawable/campfire02" android:duration="100"/>
    <item android:drawable="@drawable/campfire03" android:duration="100"/>
    <item android:drawable="@drawable/campfire04" android:duration="100"/>
    <item android:drawable="@drawable/campfire05" android:duration="100"/>
    <item android:drawable="@drawable/campfire06" android:duration="100"/>
    <item android:drawable="@drawable/campfire07" android:duration="100"/>
    <item android:drawable="@drawable/campfire08" android:duration="100"/>
    <item android:drawable="@drawable/campfire09" android:duration="100"/>
    <item android:drawable="@drawable/campfire10" android:duration="100"/>
    <item android:drawable="@drawable/campfire11" android:duration="100"/>
    <item android:drawable="@drawable/campfire12" android:duration="100"/>
    <item android:drawable="@drawable/campfire13" android:duration="100"/>
    <item android:drawable="@drawable/campfire14" android:duration="100"/>
    <item android:drawable="@drawable/campfire15" android:duration="100"/>
    <item android:drawable="@drawable/campfire16" android:duration="100"/>
    <item android:drawable="@drawable/campfire17" android:duration="100"/>

</animation-list>

在drawable里面新建一个xml文件，配置时需要使用关键词animation-list，再在里面添加item，每一个item就是一个图片，添加顺序时从上至下，还要记住设置没一帧图片播放的时间，单位都是毫秒。
有了这个动画，接下来就是在xml里面创建控件时把src设置成该动画，并且在代码中找到该动画加载动画，然后播放动画了，代码如下：

ImageView iv = findViewById(R.id.iv_animation);
//通过控件获取动画
AnimationDrawable anim = (AnimationDrawable) iv.getDrawable();
 //启动动画
anim.start();

xml里面的控件如下：

 <ImageView
        android:id="@+id/iv_animation"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:src="@drawable/fire_animation"
        android:scaleType="fitXY"/>

方式二：
代码创建关键帧动画(适用于活动的动画)

//创建一个动画资源
AnimationDrawable anim = new AnimationDrawable();
//添加每一帧的动画
int[] resID = {R.drawable.campfire01,R.drawable.campfire02,R.drawable.campfire03,R.drawable.campfire04,R.drawable.campfire05,R.drawable.campfire06,R.drawable.campfire07,R.drawable.campfire08,R.drawable.campfire09,R.drawable.campfire10,R.drawable.campfire11,R.drawable.campfire12,R.drawable.campfire13,R.drawable.campfire14,R.drawable.campfire15,R.drawable.campfire16,R.drawable.campfire17};
for (int id: resID) {
anim.addFrame(getResources().getDrawable(id,null),100);
}
//使用这个动画资源
ImageView iv = findViewById(R.id.iv_animation);
iv.setImageDrawable(anim);
//启动动画
 anim.start();

需要注意的是动画要显示出来需要借助控件，比如这里是借助的一个ImageView

<2> 补间动画：

补间动画就是将一个动画的初始状态和结束状态告诉它，计算机会自动补出中间的动画，但是这样的动画只能是一些简单的动画，不适合复杂的动画。需要注意的是补间动画只是动画效果，并没有实际改变控件的值。
补间动画主要有四个：平移：translate 缩放：scale 旋转：rotate 透明：alpha
创建动画的方式也主要有两种，一是xml里面配置，二是代码中配置
在xml里面创建：
先创建一个文件夹，如图所示的路径：

创建目录.jpg

注意要切换到project模式下，如图中的左上角的project，这样才能看到你所创建的文件夹，文件名称为anim，创建完毕后再在anim里面创建一个animation资源文件，创建好后里面默认的关键词是set，意思是里面可以放多个动画，其余关键词与功能见下表：

关键词	功能	功能	功能	功能	功能	功能
translate	fromXDelta	toXDelta	fromYDelta	toYDelta	--	--
--	从以自身为相对坐标的x坐标开始	移到x坐标结束，是水平移动	从以自身为相对坐标的y坐标开始	移到y坐标结束，是竖直移动	--	--
alpha	fromAlpha	toAlpha	--	--	--	--
--	从一个透明度	到另一个透明度	--	--	--	--
scale	fromXScale	toXScale	fromYScale	toYScale	pivotX	pivotY
--	水平方向的缩放的起始点，单位是float型，就是相对于自身的比例	水平方向的缩放的终点	竖直方向的缩放起始点	竖直方向缩放的终点	x方向以哪个点作为缩放的参考点	y方向以哪个点作为缩放的参考点
rotate	fromDegrees	toDegrees	pivotX	pivotY	--	--
--	从哪个角度开始旋转，若角度为正值就是顺时针，负值就是逆时针	转到哪个角度	旋转的时候是绕哪个点旋转	旋转的时候是绕哪个点旋转	--	--

xml配置好后就需要在代码里面加载动画，代码如下：

 //找到要做动画的控件
            View v = findViewById(R.id.v_anim);
//加载xml动画文件 -> 加载动画
            Animation translate = AnimationUtils.loadAnimation(this,R.anim.translate);
 //将这个动画加载到控件上去并开始
            v.startAnimation(translate);

整个动画也就是一个set，里面可以有的属性和操作如下表：

set	属性	属性	属性	属性	属性	属性
--	duration	fillAfter	fillBefore	startOffset	repeatMode	shareInterpolator
--	设置动画的播放时长	保持动画后的状态	不保持动画后的状态，即动画结束后回到原来的状态	延迟一定的时长后再开启动画	重复播放动画的时候到底是从头开始动画还是从结束的时候倒过来动画	是否共享Interpolator

以上是xml里面set的方法，同时用代码创建时的方法也是一样的
在代码中创建：
代码如下：

            //找到动画的控件
            View v = findViewById(R.id.v_anim);
            //创建动画，并告诉它怎么动画
            RotateAnimation alphaAnimation = new RotateAnimation(0,360*20,(float) 0.5*v.getWidth(),(float) 0.5*v.getHeight());
            //设置动画的属性
            alphaAnimation.setDuration(1000*20);
            alphaAnimation.setFillAfter(true);
            //开启动画
            v.startAnimation(alphaAnimation);

上面以一个RotateAnimation为例，其余动画如TranslateAnimation也是一样的，只是怎动画时的参数不同，具体什么参数，跟xml里面配置时的属性参数是一样的

<3> 属性动画：

所谓的属性动画就是补间动画的基础之上不在是单单的动画效果了，而是真正的改变了值，也就是补间动画的升级版，属性动画类为Animator，其子类为：ValueAnimator ObjectAnimator TimeAnimator ，一般主要用ObjectAnimator。属性动画的一些基本操作如下：

方法	详细用法
ObjectAnimator.ofFloat()	第一个参数是要动画的对象，第二个参数是要对该对象的哪个属性动画，是一个字符串，后面的参数就是该对象该属性的一连串的值，比如我想让一个控件的alpha值从1.0到0.75到0.5到0.25到0.0则可以在后面写上四个参数分别是1.0f，0.75f，0.5f，0.25f，0.0f。
其余的方法就是ofInt/ofObject...等方法，根据你要动画的属性的值的类型来确定方法	用法和上面是类似的输入一连串的值就行了
setDuration()	设置动画的时间
start()	开启动画
setInterpolator()	设置插值器
setRepeatCount()	设置重复次数，其中有个特殊的INFINITE常量表示无穷多次的意思
setRepeatMode()	设置重复的模式，是要从头开始还是要从尾部开始倒着动画回来

<4> AnimatorSet/AnimationSet动画集合：

所谓的动画集合就是将你要的动画放到一个集合中方便同时做多个动画，或者管理动画，常用来对一个控件同时做多个动画，因此常用方法就是playTogether(),参数就是加入多个动画的对象即可对一个控件做多个动画了。如果要有先后顺序的来执行动画可以先用play(Object)来播放一个动画，参数就是该动画的对象，然后play(Object).after(Object)来播放另一个动画，当然有after就一定有before，还有with表示同时播放的意思，和上面的playTogether是一样的效果。需要注意的是：如果是有先后顺序的来播放动画时要注意动画一定是一个有限次数的动画，不然就不能生效，因为系统会一直等待前面一个动画播放结束。

技术如何使用：

做一个动画模拟心脏的跳动，所谓的心脏的跳动其实就是对一个控件的x和y同时进行缩放，然后将图形改成♥形图案就可以了，代码如下：
先在xml里面写一个ImageView简单的用来代表心脏

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

    <View
        android:id="@+id/v"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:background="@drawable/heart"/>

</RelativeLayout>

代码里面写两个动画然后同时动就行了

public class MainActivity extends AppCompatActivity {

    private View v;

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

    //缩放
    public void test3(){
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(v, "scaleX", 1.1f, 1, 1.1f, 1);
        scaleX.setDuration(1000);
        scaleX.setRepeatCount(ValueAnimator.INFINITE);
        scaleX.setRepeatMode(ValueAnimator.RESTART);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(v, "scaleY", 1.1f, 1, 1.1f, 1);
        scaleY.setDuration(1000);
        scaleY.setRepeatCount(-1);
        scaleY.setRepeatMode(ValueAnimator.RESTART);
        AnimatorSet aSet = new AnimatorSet();
        aSet.playTogether(scaleX, scaleY);
        aSet.start();
        /**
         * with 同时执行
         * after 后面执行
         * before 前面执行
         */
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN){
            test3();
        }
        return true;
    }
}

总结：

Android中的三大动画，关键帧，补间，属性动画，常用后面两种，如果只是效果就用补间动画，如果要跟用户交互就用属性动哈，如果该动画复杂难算就只能用关键帧动画了，这对素材的要求比较高。