android 学习随笔二十五（动画：补间动画）

时间：2022-10-01 23:58:35
  • 补间动画（TweenAnimation）

* 原形态变成新形态时为了过渡变形过程，生成的动画就叫补间动画（为了让对象从初始状态向结束状态改变的过程更加自然而自动生成的动画效果）
* 位移、旋转、缩放、透明

1、位移：

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

TranslateAnimation ta = new TranslateAnimation(-100, 100, -60, 60);
* -100：表示动画的水平方向的初始坐标
* iv原始x -100
* 100：表示动画的水平方向的结束坐标
* iv的原始x + 100

TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_SELF, -1.5f, Animation.RELATIVE_TO_SELF, 1.5f, Animation.RELATIVE_TO_SELF, -2, Animation.RELATIVE_TO_SELF, 2);
* -1.5f:表示动画的水平方向的初始坐标
* iv的原始x - iv宽度 * 1.5
* 1.5f：表示动画的水平方向的结束坐标
* iv的原始x + iv宽度 * 1.5

//创建为位移动画对象，设置动画的初始位置和结束位置
TranslateAnimation ta = new TranslateAnimation(10, 150, 20, 140);
* x坐标的起点位置，如果相对于自己，传0.5f，那么起点坐标就是 真实X + 0.5 * iv宽度
* x坐标的终点位置，如果传入2，那么终点坐标就是 真实X + 2 * iv的宽度
* y坐标的起点位置，如果传入0.5f，那么起点坐标就是 真实Y + 0.5 * iv高度
* y坐标的终点位置，如果传入2，那么终点坐标就是 真实Y + 2 * iv高度

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

* 动画播放相关的设置

//设置动画持续时间
ta.setDuration(2000);
//动画重复播放的次数
ta.setRepeatCount(1);
//动画重复播放的模式
ta.setRepeatMode(Animation.REVERSE);
//动画播放完毕后，组件停留在动画结束的位置上
ta.setFillAfter(true);
//播放动画
iv.startAnimation(ta);

package com.itheima.tweenanimation;

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 TranslateAnimation ta;

    private ScaleAnimation sa;

    private AlphaAnimation aa;

    private RotateAnimation ra;

    @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){

        //定义位移补间动画

//        TranslateAnimation ta = new TranslateAnimation(-100, 100, -60, 60);

        ta = new TranslateAnimation(Animation.RELATIVE_TO_SELF, -1.5f, Animation.RELATIVE_TO_SELF, 1.5f,

                Animation.RELATIVE_TO_SELF, -2, Animation.RELATIVE_TO_SELF, 2);

        //定义动画持续时间

        ta.setDuration(2000);

        //设置重复次数

        ta.setRepeatCount(1);

        //设置重复模式

        ta.setRepeatMode(Animation.REVERSE);

        //在结束位置上填充动画

        ta.setFillAfter(true);

        //播放动画

        iv.startAnimation(ta);

    }

    public void scale(View v){

//        ScaleAnimation sa = new ScaleAnimation(0.2f, 2, 0.2f, 2);

//        ScaleAnimation sa = new ScaleAnimation(0.2f, 2, 0.2f, 2, iv.getWidth()/2, iv.getHeight()/2);

        sa = new ScaleAnimation(0.3f, 2, 0.2f, 1, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

        //定义动画持续时间

        sa.setDuration(2000);

        //设置重复次数

        sa.setRepeatCount(1);

        //设置重复模式

        sa.setRepeatMode(Animation.REVERSE);

        //在结束位置上填充动画

        sa.setFillAfter(true);

        //播放动画

        iv.startAnimation(sa);

    }

    public void alpha(View v){

        aa = new AlphaAnimation(1, 0.2f);

        aa.setDuration(2000);

        aa.setRepeatCount(1);

        aa.setRepeatMode(Animation.REVERSE);

        aa.setFillAfter(true);

        iv.startAnimation(aa);

    }

    public void rotate(View v){

//        RotateAnimation ra = new RotateAnimation(0, 720);

//        RotateAnimation ra = new RotateAnimation(0, 720, iv.getWidth()/2, iv.getHeight()/2);

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

        ra.setDuration(2000);

        ra.setRepeatCount(1);

        ra.setRepeatMode(Animation.REVERSE);

        ra.setFillAfter(true);

        iv.startAnimation(ra);

    }

    public void fly(View v){

        //创建动画集合

        AnimationSet set = new AnimationSet(false);

        //把动画添加至集合

        set.addAnimation(ta);

        set.addAnimation(sa);

        set.addAnimation(aa);

        set.addAnimation(ra);

        //开始播放集合

        iv.startAnimation(set);

    }

}

MainActivity

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

<LinearLayout

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:orientation="horizontal"

    >

    <Button android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="位移"

        android:onClick="translate"

        />

    <Button android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="缩放"

        android:onClick="scale"

        />

    <Button android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="透明"

        android:onClick="alpha"

        />

    <Button android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="旋转"

        android:onClick="rotate"

        />

    <Button android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="一起飞"

        android:onClick="fly"

        />

</LinearLayout>

    <ImageView

        android:id="@+id/iv"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@drawable/ic_launcher"

        android:layout_centerInParent="true"

        />

</RelativeLayout>

activity_main

2、缩放

* 参数0.1f表示动画的起始宽度是真实宽度的0.1倍
* 参数4表示动画的结束宽度是真实宽度的4倍
* 缩放的中心点在iv左上角

ScaleAnimation sa = new ScaleAnimation(0.3f, 2, 0.2f, 1, iv.getWidth()/2, iv.getHeight()/2);
* 0.3f:动画x轴的初始比例
* 2：动画x轴的结束比例
* iv.getWidth()/2：缩放点的x坐标
* iv原始x + iv.getWidth()/2

ScaleAnimation sa = new ScaleAnimation(0.1f, 4, 0.1f, 4);
* 参数0.1f和4意义与上面相同
* 改变缩放的中心点：传入的两个0.5f，类型都是相对于自己，这两个参数改变了缩放的中心点
* 中心点x坐标 = 真实X + 0.5 * iv宽度
* 中心点Y坐标 = 真实Y + 0.5 * iv高度

ScaleAnimation sa = new ScaleAnimation(0.1f, 4, 0.1f, 4, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
3、透明

AlphaAnimation aa = new AlphaAnimation(1, 0.2f);
* 1:动画的初始透明度
* 0.2f：动画结束透明度

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

AlphaAnimation aa = new AlphaAnimation(0, 0.5f);

4、旋转

ra = new RotateAnimation(0, -720, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
* 0:动画的初始角度
* 720：动画的结束角度
* Animation.RELATIVE_TO_SELF, 0.5f：旋转的中心点坐标：
* iv的原始x + iv宽度 * 0.5

* 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);
5、所有动画一起飞

//创建动画集合
AnimationSet set = new AnimationSet(false);
//往集合中添加动画
set.addAnimation(aa);
set.addAnimation(sa);
set.addAnimation(ra);
iv.startAnimation(set);

相关文章