android104 帧动画，补间动画，属性动画

2022-11-10 21:11:51

##帧动画FrameAnimation
* 多张图片快速切换，形成动画效果
* 帧动画使用xml定义

package com.itheima.frameanimation;

import android.os.Bundle;

import android.app.Activity;

import android.graphics.drawable.AnimationDrawable;

import android.view.Menu;

import android.widget.ImageView;

public class MainActivity extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        ImageView iv = (ImageView) findViewById(R.id.iv);

        //把帧动画的资源文件指定为iv的背景

        iv.setBackgroundResource(R.drawable.frameanimation);

        //获取iv的背景

        AnimationDrawable ad = (AnimationDrawable) iv.getBackground();

        ad.start();

    }

}

/*

drawable文件里的frameanimation.xml

<?xml version="1.0" encoding="utf-8"?>

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"

    android:oneshot="false">

    <item android:drawable="@drawable/g1" android:duration="200" />   每个图片停留200毫秒，

    <item android:drawable="@drawable/g2" android:duration="200" />

    <item android:drawable="@drawable/g3" android:duration="200" />

    <item android:drawable="@drawable/g4" android:duration="200" />

    <item android:drawable="@drawable/g5" android:duration="200" />

    <item android:drawable="@drawable/g6" android:duration="300" />

    <item android:drawable="@drawable/g7" android:duration="300" />

    <item android:drawable="@drawable/g8" android:duration="300" />

    <item android:drawable="@drawable/g9" android:duration="200" />

    <item android:drawable="@drawable/g10" android:duration="200" />

    <item android:drawable="@drawable/g11" android:duration="200" />

</animation-list>

*/

activity_main.xml

<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"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    <ImageView

        android:id="@+id/iv"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        />

</RelativeLayout>

补间动画：

package com.itheima.bujiananimation;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.View;

import android.view.animation.AlphaAnimation;

import android.view.animation.Animation;

import android.view.animation.AnimationSet;

import android.view.animation.RotateAnimation;

import android.view.animation.ScaleAnimation;

import android.view.animation.TranslateAnimation;

import android.widget.ImageView;

/*###补间动画

* 组件由原始状态向终极状态转变时，为了让过渡更自然，而自动生成的动画(比如将圆形变为正方形)

* 原形态变成新形态时为了过渡变形过程，生成的动画就叫补间动画

* 位移、旋转、缩放、透明*/

public class MainActivity extends Activity {

    private ImageView iv;

    private RotateAnimation ra;

    private AlphaAnimation aa;

    private ScaleAnimation sa;

    private TranslateAnimation ta;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        iv = (ImageView) findViewById(R.id.iv);

    }

    //平移

    public void translate(View v){

//        ta = new TranslateAnimation(10, 100, 20, 200);  x坐标从10到100，y坐标从20到200，

/** 参数10指的是X的起点坐标，但不是指屏幕x坐标为10的位置，而是imageview的真实X坐标 + 10

* 10：表示的x坐标起始位置

    * 图片起点x坐标为：iv的真实x坐标 + 10

* 100：表示x坐标的结束位置

    * 图片起点y坐标为：iv的真实x坐标 + 100

* 20:表示y坐标的起始位置

    * 图片末点x坐标为：iv的真实y坐标 + 20

* 200:表示y坐标的结束位置

    * 图片末点y坐标为：iv的真实y坐标 + 200

*/

        ta = new TranslateAnimation(Animation.RELATIVE_TO_SELF, -1, Animation.RELATIVE_TO_SELF, 2,

                Animation.RELATIVE_TO_SELF, -0.5f, Animation.RELATIVE_TO_SELF, 1.5f);

/*

* Animation.RELATIVE_TO_SELF, 1:x坐标的初始位置

    * iv的真实x坐标 + 1 * iv宽

* Animation.RELATIVE_TO_SELF, 0.5f：y坐标的起始位置

    * iv的真实y坐标 + 0.5 * iv高

*/

        //设置播放时间

        ta.setDuration(2000);

        //设置重复次数

        ta.setRepeatCount(1);

        //动画重复播放的模式，REVERSE表示会向相反方向重复一次，

        ta.setRepeatMode(Animation.REVERSE);

        iv.startAnimation(ta);

    }

    //缩放

    public void scale(View v){

//        sa = new ScaleAnimation(fromX, toX, fromY, toY, iv.getWidth() / 2, iv.getHeight() / 2);

        sa = new ScaleAnimation(0.5f, 2, 0.1f, 3, Animation.RELATIVE_TO_SELF, 0.5f,

                                                    Animation.RELATIVE_TO_SELF, 0.5f);

/** 0.5f：表示x坐标缩放的初始位置

    * 0.5 * iv宽

* 2：表示x坐标缩放的结束位置

    * 2 * iv宽

* iv.getWidth() / 2：表示缩放点的x坐标

    * iv的真实x + iv.getWidth() / 2

    * Animation.RELATIVE_TO_SELF, 0.5f：表示缩放点的x坐标

    * iv的真实x + 0.5 * iv宽

*/

        sa.setDuration(2000);

        //填充动画的结束位置

        sa.setRepeatCount(1);

        sa.setRepeatMode(Animation.REVERSE);

        //让动画停留在结束的位置上

        sa.setFillAfter(true);

        iv.startAnimation(sa);

    }

    //透明

    public void alpha(View v){

        //* 0为完全透明，1为完全不透明，0.5f是半透明

        aa = new AlphaAnimation(0, 1);

        aa.setDuration(2000);

        sa.setRepeatCount(1);

        iv.startAnimation(aa);

    }

    //旋转

    public void rotate(View v){

        ra = new RotateAnimation(0, 720, Animation.RELATIVE_TO_SELF, 0.5f,

                                        Animation.RELATIVE_TO_SELF, 0.5f);

        /** 20表示动画开始时的iv的角度

        * 360表示动画结束时iv的角度

        * 默认旋转的圆心在iv左上角

                RotateAnimation ra = new RotateAnimation(20, 360);

        * 20,360的意义和上面一样

        * 指定圆心坐标，相对于自己，值传入0.5，那么圆心的x坐标：真实X坐标 + iv宽度 * 0.5

        * 圆心的Y坐标：真实Y坐标 + iv高度 * 0.5

                RotateAnimation ra = new RotateAnimation(20, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

        */

        ra.setDuration(2000);

        ra.setRepeatCount(1);

        ra.setRepeatMode(Animation.REVERSE);

        iv.startAnimation(ra);

    }

    //4种动画一起播放

    public void fly(View v){

        AnimationSet set = new AnimationSet(false);

        set.addAnimation(ta);

        set.addAnimation(sa);

        set.addAnimation(ra);

        set.addAnimation(aa);

        iv.startAnimation(set);

    }

}

属性动画

package com.itheima.objectanimator;

import android.os.Bundle;

import android.animation.Animator;

import android.animation.AnimatorInflater;

import android.animation.AnimatorSet;

import android.animation.ObjectAnimator;

import android.animation.ValueAnimator;

import android.app.Activity;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.animation.TranslateAnimation;

import android.widget.ImageView;

import android.widget.Toast;

/*#属性动画

* 补间动画，只是一个动画效果，组件其实还在原来的位置上，xy没有改变，属性动画是真的改变了组件的坐标和高宽等属性。

*/

public class MainActivity extends Activity {

    private ImageView iv;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        iv = (ImageView) findViewById(R.id.iv);

        iv.setOnClickListener(new OnClickListener() {

            @Override

            public void onClick(View v) {

                Toast.makeText(MainActivity.this, "点不到我", ).show();

            }

        });

    }

    //平移

    public void translate(View v){

//        TranslateAnimation ta = new TranslateAnimation(0, 150, 0, 0);

//        ta.setDuration(2000);

//        ta.setFillAfter(true);

//        iv.startAnimation(ta);

        /*###位移：

        * 第一个参数target指定要显示动画的组件

        * 第二个参数propertyName指定要改变组件的哪个属性

        * 第三个参数values是可变参数，就是赋予属性的新的值

        * 传入0，代表x起始坐标：当前x + 0

        * 传入100，代表x终点坐标：当前x + 100

        //具有get、set方法的成员变量就称为属性

        ObjectAnimator oa = ObjectAnimator.ofFloat(bt, "translationX", 0, 100) ;

        ###可变参数

        * 第三个参数可变参数可以传入多个参数，可以实现往回位移（旋转、缩放、透明）

        ObjectAnimator oa = ObjectAnimator.ofFloat(bt, "translationX", 0, 70, 30, 100) ;

        */

        //target:动画作用于哪个组件

        ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationX", , , , );

        oa.setDuration();

        oa.setRepeatCount();

        oa.setRepeatMode(ValueAnimator.REVERSE);

        oa.start();

    }

    public void scale(View v){

        /*###缩放：

        * 第三个参数指定缩放的比例

        * 0.1是从原本高度的十分之一开始

        * 2是到原本高度的2倍结束

        ObjectAnimator oa = ObjectAnimator.ofFloat(bt, "scaleY", 0.1f, 2);

        */

        ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "scaleX", , 1.6f, 1.2f, );

        oa.setDuration();

        oa.start();

    }

    public void alpha(View v){

        /*###透明：

        * 透明度，0是完全透明，1是完全不透明

        ObjectAnimator oa = ObjectAnimator.ofFloat(bt, "alpha", 0.1f, 1);

        */

        ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "alpha", , 0.6f, 0.2f, );

        oa.setDuration();

        oa.start();

    }

    public void rotate(View v){

        /*

        ###旋转

        * rotation指定是顺时针旋转

        * 20是起始角度

        * 270是结束角度

        ObjectAnimator oa = ObjectAnimator.ofFloat(bt, "rotation", 20, 270);

        * 属性指定为rotationX是竖直翻转

        * 属性指定为rotationY是水平翻转

        ObjectAnimator oa = ObjectAnimator.ofFloat(bt, "rotationY", 20, 180)

        */

        ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "rotationY", , , , );

        oa.setDuration();

        oa.setRepeatCount();

        oa.setRepeatMode(ValueAnimator.REVERSE);

        oa.start();

    }

    public void fly(View v){

        //创建动画师集合

        AnimatorSet set = new AnimatorSet();

        ObjectAnimator oa1 = ObjectAnimator.ofFloat(iv, "translationX", , , , );

        oa1.setDuration();

        oa1.setRepeatCount();

        oa1.setRepeatMode(ValueAnimator.REVERSE);

        ObjectAnimator oa2 = ObjectAnimator.ofFloat(iv, "translationY", , , , );

        oa2.setDuration();

        oa2.setRepeatCount();

        oa2.setRepeatMode(ValueAnimator.REVERSE);

        ObjectAnimator oa3 = ObjectAnimator.ofFloat(iv, "scaleX", , 1.6f, 1.2f, );

        oa3.setDuration();

        oa3.setRepeatCount();

        oa3.setRepeatMode(ValueAnimator.REVERSE);

        ObjectAnimator oa4 = ObjectAnimator.ofFloat(iv, "rotation", , , , );

        oa4.setDuration();

        oa4.setRepeatCount();

        oa4.setRepeatMode(ValueAnimator.REVERSE);

        //所有动画有先后顺序的播放

//        set.playSequentially(oa1, oa2, oa3, oa4);

        //所有动画一起播放

        set.playTogether(oa1, oa2, oa3, oa4);

        //设置要播放动画的组件

        set.setTarget(bt);

        set.start();

    }

    //xml文件定义属性动画

    public void xml(View v){

        Animator at = AnimatorInflater.loadAnimator(this, R.animator.objanimator);

        /*

        animator文件夹下的objanimator.xml

        <?xml version="1.0" encoding="utf-8"?>

        <set xmlns:android="http://schemas.android.com/apk/res/android" >

            <objectAnimator

                android:propertyName="translationX"

                android:duration="200"

                android:repeatCount="1"

                android:repeatMode="reverse"

                android:valueFrom="-100"

                android:valueTo="100"

                >

            </objectAnimator>

        </set>

        */

        //设置作用于哪个组件

        at.setTarget(iv);

        at.start();

    }

}

---

#动画

###帧动画

> 一张张图片不断的切换，形成动画效果（好处是节约资源）

* 在drawable目录下定义xml文件，子节点为animation-list，在这里定义要显示的图片和每张图片的显示时长

        <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">

            <item android:drawable="@drawable/g1" android:duration="" />

            <item android:drawable="@drawable/g2" android:duration="" />

            <item android:drawable="@drawable/g3" android:duration="" />

        </animation-list>

* 在屏幕上播放帧动画

        ImageView iv = (ImageView) findViewById(R.id.iv);

        //把动画文件设置为imageView的背景

        iv.setBackgroundResource(R.drawable.animations);

        AnimationDrawable ad = (AnimationDrawable) iv.getBackground();

        //播放动画

        ad.start();

###补间动画

* 原形态变成新形态时为了过渡变形过程，生成的动画就叫补间动画

* 位移、旋转、缩放、透明

#####位移：

* 参数10指的是X的起点坐标，但不是指屏幕x坐标为10的位置，而是imageview的 真实X +

* 参数150指的是X的终点坐标，它的值是imageview的 真实X + 

        //创建为位移动画对象，设置动画的初始位置和结束位置

        TranslateAnimation ta = new TranslateAnimation(, , , );

* x坐标的起点位置，如果相对于自己，传0.5f，那么起点坐标就是 真实X + 0.5 * iv宽度

* x坐标的终点位置，如果传入2，那么终点坐标就是 真实X +  * iv的宽度

* y坐标的起点位置，如果传入0.5f，那么起点坐标就是 真实Y + 0.5 * iv高度

* y坐标的终点位置，如果传入2，那么终点坐标就是 真实Y +  * iv高度

        TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, , Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, );

* 动画播放相关的设置

        //设置动画持续时间

        ta.setDuration();

        //动画重复播放的次数

        ta.setRepeatCount();

        //动画重复播放的模式

        ta.setRepeatMode(Animation.REVERSE);

        //动画播放完毕后，组件停留在动画结束的位置上

        ta.setFillAfter(true);

        //播放动画

        iv.startAnimation(ta);

#####缩放：

* 参数0.1f表示动画的起始宽度是真实宽度的0.1倍

* 参数4表示动画的结束宽度是真实宽度的4倍

* 缩放的中心点在iv左上角

        ScaleAnimation sa = new ScaleAnimation(0.1f, , 0.1f, );

* 参数0.1f和4意义与上面相同

* 改变缩放的中心点：传入的两个0.5f，类型都是相对于自己，这两个参数改变了缩放的中心点

* 中心点x坐标 = 真实X + 0.5 * iv宽度

* 中心点Y坐标 = 真实Y + 0.5 * iv高度

    ScaleAnimation sa = new ScaleAnimation(0.1f, , 0.1f, , Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

#####透明：

* 0为完全透明，1为完全不透明

        AlphaAnimation aa = new AlphaAnimation(, 0.5f);

#####旋转：

* 20表示动画开始时的iv的角度

* 360表示动画结束时iv的角度

* 默认旋转的圆心在iv左上角

        RotateAnimation ra = new RotateAnimation(, );

* ,360的意义和上面一样

* 指定圆心坐标，相对于自己，值传入0.，那么圆心的x坐标：真实X坐标 + iv宽度 * 0.5

* 圆心的Y坐标：真实Y坐标 + iv高度 * 0.5

        RotateAnimation ra = new RotateAnimation(, , Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

#####所有动画一起飞

        //创建动画集合

        AnimationSet set = new AnimationSet(false);

        //往集合中添加动画

        set.addAnimation(aa);

        set.addAnimation(sa);

        set.addAnimation(ra);

        iv.startAnimation(set);

码农公寓

相关文章