美文网首页
AndroidView之动画篇(二)--补间动画(TweenAn

AndroidView之动画篇(二)--补间动画(TweenAn

作者: 陈兴强hha | 来源:发表于2018-04-07 17:56 被阅读0次

一 前言

1.Android中的TweenAnimation由四种类型种类型:

Alpha

Scale

Translation

Rotate

2.定义TweenAnimation由两种方式:

xml资源文件和代码

3.与插值器组合可以实现丰富的效果

二 Alpha

    /**
     * 透明度
     */
    private void alpha() {
        AlphaAnimation alphaAnimation=new AlphaAnimation(0.0f,1f);
        //动画持续时间
        alphaAnimation.setDuration(3000);
        //设置动画结束之后的状态是否是动画的最终状态,true,表示是保持动画结束时的状态
        alphaAnimation.setFillAfter(true);
        //设置动画结束时的状态是否开始是的状态,ture,表示是开始时的状态
        alphaAnimation.setFillBefore(true);
        //设置动画重复模式,反转REVERSE和重新开始RESTART
        alphaAnimation.setRepeatMode(AlphaAnimation.REVERSE);
        //设置动画播发次数
        alphaAnimation.setRepeatCount(5);
        //开始动画
        ivAnimation.startAnimation(alphaAnimation);
    }

三 Scale

    private void scale() {
        ScaleAnimation scale = new ScaleAnimation(1.0f, 4.0f, 1.0f, 4.0f,
                Animation.RELATIVE_TO_SELF, 0.0f,
                Animation.RELATIVE_TO_SELF, 0.0f);
        scale.setDuration(2000);
        scale.setFillBefore(true);
        scale.setRepeatMode(AlphaAnimation.RESTART);
        scale.setRepeatCount(2);
        ivAnimation.startAnimation(scale);
    }

四 Translation

    private void translation() {
        TranslateAnimation translate=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0F,
                Animation.RELATIVE_TO_SELF,2f,Animation.RELATIVE_TO_SELF,0f,
                Animation.RELATIVE_TO_SELF,2F);
        translate.setDuration(1000);
        translate.setFillAfter(true);
        ivAnimation.startAnimation(translate);

    }

五Rotate

    private void translation() {
        TranslateAnimation translate=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0F,
                Animation.RELATIVE_TO_SELF,2f,Animation.RELATIVE_TO_SELF,0f,
                Animation.RELATIVE_TO_SELF,2F);
        translate.setDuration(1000);
        translate.setFillAfter(true);
        ivAnimation.startAnimation(translate);

    }

六 插值器(Interpolation)

InterPolation是干嘛的?
根据类型不同,采用不同的算法计算出在补间动画期间所需要插入帧的密度和位置,使得动画能以匀速、加速、减速、抛物线等多种速度进行变化。
AccelerateDecelerateInterpolator
在动画开始与介绍的地方速率改变比较慢,在中间的时候加速

AccelerateInterpolator
在动画开始的地方速率改变比较慢,然后开始加速

AnticipateInterpolator
开始的时候向后然后向前甩

AnticipateOvershootInterpolator
开始的时候向后然后向前甩一定值后返回最后的值

BounceInterpolator
动画结束的时候弹起

CycleInterpolator
动画循环播放特定的次数,速率改变沿着正弦曲线

DecelerateInterpolator
在动画开始的地方快然后慢

LinearInterpolator
以常量速率改变

OvershootInterpolator
向前甩一定值后再回到原来位置

    private void translation() {
        TranslateAnimation translate=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0F,
                Animation.RELATIVE_TO_SELF,2f,Animation.RELATIVE_TO_SELF,0f,
                Animation.RELATIVE_TO_SELF,2F);
        translate.setDuration(1000);
        translate.setFillAfter(true);
        //在动画开始的地方速率改变比较慢,然后开始加速
        translate.setInterpolator(new AccelerateInterpolator());
        ivAnimation.startAnimation(translate);

    }

七 其它

1.当setFillAfter与 setFillBefore一起使用时只有setFillAfter生效

2.结束动画方法有哪几种:

   private void translation() {
        TranslateAnimation translate=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0F,
                Animation.RELATIVE_TO_SELF,2f,Animation.RELATIVE_TO_SELF,0f,
                Animation.RELATIVE_TO_SELF,2F);
        translate.setDuration(1000);
        translate.setFillAfter(true);
        //在动画开始的地方速率改变比较慢,然后开始加速
        translate.setInterpolator(new AccelerateInterpolator());
        ivAnimation.startAnimation(translate);

        //结束动画方法1
        ivAnimation.clearAnimation();
        //结束动画方法2
        translate.cancel();
    }

3 动画监听

   private void translation() {
        TranslateAnimation translate=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0F,
                Animation.RELATIVE_TO_SELF,2f,Animation.RELATIVE_TO_SELF,0f,
                Animation.RELATIVE_TO_SELF,2F);
        translate.setDuration(1000);
        translate.setFillAfter(true);
        //在动画开始的地方速率改变比较慢,然后开始加速
        translate.setRepeatMode(AlphaAnimation.RESTART);
        translate.setRepeatCount(3);
        translate.setInterpolator(new AccelerateInterpolator());
        ivAnimation.startAnimation(translate);

//        //清除动画
//        ivAnimation.clearAnimation();
//        //同样cancel()也能取消掉动画
//        translate.cancel();


        translate.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                Log.e("============","动画开始了");
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                Log.e("============","动画结束了");
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                Log.e("============","动画动画重复调用");

            }
        });


    }

全部代码

TweenAnimationActivity.class

package com.myanimation.chen.myanimation;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

/**
 * TweenAnimation
 * Created by xq on 2018/4/7.
 */

public class TweenAnimationActivity extends Activity {


    private ImageView ivAnimation;

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


    public void onTween(View view) {

        switch (view.getId()) {
            case R.id.tv_alpha:
                //透明度
                alpha();
                break;
            case R.id.tv_scale:
                //比例
                scale();
                break;

            case R.id.tv_translation:
                //平移
                translation();
                break;

            case R.id.tv_rotate:
                //旋转
                rotate();
                break;


        }

    }


    /**
     * 透明度
     */
    private void alpha() {
        AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1f);
        //动画持续时间
        alphaAnimation.setDuration(3000);
        //设置动画结束之后的状态是否是动画的最终状态,true,表示是保持动画结束时的状态
        alphaAnimation.setFillAfter(true);
        //设置动画结束时的状态是否开始是的状态,ture,表示是开始时的状态
        alphaAnimation.setFillBefore(true);
        //设置动画重复模式,反转REVERSE和重新开始RESTART
        alphaAnimation.setRepeatMode(AlphaAnimation.REVERSE);
        //设置动画播发次数
        alphaAnimation.setRepeatCount(5);
        //开始动画
        ivAnimation.startAnimation(alphaAnimation);
    }


    private void scale() {
        ScaleAnimation scale = new ScaleAnimation(1.0f, 4.0f, 1.0f, 4.0f,
                Animation.RELATIVE_TO_SELF, 0.0f,
                Animation.RELATIVE_TO_SELF, 0.0f);
        scale.setDuration(2000);
        scale.setFillBefore(true);
        scale.setRepeatMode(AlphaAnimation.RESTART);
        scale.setRepeatCount(2);
        ivAnimation.startAnimation(scale);
    }

    private void translation() {
        TranslateAnimation translate=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0F,
                Animation.RELATIVE_TO_SELF,2f,Animation.RELATIVE_TO_SELF,0f,
                Animation.RELATIVE_TO_SELF,2F);
        translate.setDuration(1000);
        translate.setFillAfter(true);
        //在动画开始的地方速率改变比较慢,然后开始加速
        translate.setRepeatMode(AlphaAnimation.RESTART);
        translate.setRepeatCount(3);
        translate.setInterpolator(new AccelerateInterpolator());
        ivAnimation.startAnimation(translate);

//        //清除动画
//        ivAnimation.clearAnimation();
//        //同样cancel()也能取消掉动画
//        translate.cancel();


        translate.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                Log.e("============","动画开始了");
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                Log.e("============","动画结束了");
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                Log.e("============","动画动画重复调用");

            }
        });


    }

    private void rotate() {
        RotateAnimation rotate=new RotateAnimation(0,360,
                RotateAnimation.RELATIVE_TO_SELF,0.5F,
                RotateAnimation.RELATIVE_TO_SELF,0.5F);
        rotate.setDuration(1500);
        rotate.setFillAfter(true);
        rotate.setRepeatMode(AlphaAnimation.RESTART);

        ivAnimation.startAnimation(rotate);

    }


}

any_tween_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="15dp"
        android:text="TweenAnimation" />

    <View style="@style/Divede" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/tv_alpha"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onTween"
            android:paddingBottom="15dp"
            android:paddingTop="15dp"
            android:text="alpha" />

        <Button
            android:id="@+id/tv_scale"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onTween"
            android:paddingBottom="15dp"
            android:paddingTop="15dp"
            android:text="scale" />

        <Button
            android:id="@+id/tv_translation"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onTween"
            android:paddingBottom="15dp"
            android:paddingTop="15dp"
            android:text="translation" />

        <Button
            android:id="@+id/tv_rotate"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onTween"
            android:paddingBottom="15dp"
            android:paddingTop="15dp"
            android:text="rotate" />

    </LinearLayout>

    <ImageView
        android:id="@+id/iv_animation"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:src="@drawable/icon_pic" />

</LinearLayout>

相关文章

  • AndroidView之动画篇(二)--补间动画(TweenAn

    一 前言 1.Android中的TweenAnimation由四种类型种类型: Alpha Scale Trans...

  • Android 基础动画之帧动画详解

    在上一篇 Android 基础动画之补间动画详解 主要介绍了补间动画的基本属性以及补间动画在Android起始设计...

  • Android回顾--(十六) 动画简析

    动画: 补间动画(Tween动画) 帧动画(Frame动画) 属性动画(Property动画) 补间动画 特点: ...

  • 动画合集之补间动画

    前面学了帧动画:动画合集之补间动画 和帧动画不同(帧动画是通过连续播放图片来模拟动画效果),补间动画只需要开发者提...

  • 动画之补间动画

    特性: 渐变动画支持四种类型:平移(Translate)、旋转(Rotate)、缩放(Scale)、不透明度 只是...

  • javaScript补间动画库

    补间动画库 补间动画介绍 补间动画指的是做FLASH、VIDEO动画时,在两个关键帧中间需要做“补间动画”,才能实...

  • Android动画

    Android动画分类: 视图动画:补间动画、逐帧动画 属性动画 视图动画 补间动画 可以在xml中定义动画,然后...

  • Android动画之视图动画

    补间动画 可以使用补间动画系统执行补间动画。补间动画计算动画相关的信息包括开始点、结束点、大小、旋转角度以及其他与...

  • Android 资源简介(五) AnimationDrawabl

    AnimationDrawable 代表动画资源。Android 既支持逐帧动画,也支持补间动画。 定义补间动画的...

  • Android 动画锦集

    Android 动画可分为逐帧动画、补间动画、属性动画。使用传统的逐帧动画、补间动画可以实现 Android 基本...

网友评论

      本文标题:AndroidView之动画篇(二)--补间动画(TweenAn

      本文链接:https://www.haomeiwen.com/subject/vbuyhftx.html