关闭

TweenAnimation补间动画的使用

标签: android开发android动画显示
252人阅读 评论(0) 收藏 举报
分类:

Android动画分类


补间动画(Tween动画)
*完成视图简单的变化,比如,渐变,缩放,旋转,移动,综合等等

帧动画(Frame动画)
*帧动画是在短时间内连续显示一系列图像的过程,其显示效果是一个移动或者变化的对象


Tween动画分类

  • 渐变动画AlphaAnimation
    • 改变视图的透明度
  • 移动动画TranslateAnimation
    • 从某位置移动到另外位置
  • 缩放动画ScaleAnimation
    • 以某点为中心缩放视图
  • 旋转动画RotateAnimation
    • 以某点为中心旋转视图

Tween动画如何创建

  • 通过xml方式创建动画
    • 把设置的动画属性写到xml中
    • 利用AnimationUtils类加载xml
    • 给布局设置动画
  • 通过代码动态天剑
    • 构造对应的动画类
    • 设置动画参数
    • 给布局设置动画

实例演示
1.以下为工程简图
这里写图片描述

2.显示xml的几种类型

android_rotata

<?xml version="1.0" encoding="utf-8"?>
<!-- 旋转动画 -->
<!-- interpolator加速器 -->
<rotate
    android:fromDegrees="0"
    android:toDegrees="180"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="1000"
    android:fillAfter="true"
    android:interpolator="@android:anim/decelerate_interpolator"
    xmlns:android="http://schemas.android.com/apk/res/android">
</rotate>

android_scale

<?xml version="1.0" encoding="utf-8"?>
<!-- 动画的集合 -->
<!-- startOffset 延迟播放动画 -->
<set xmlns:android="http://schemas.android.com/apk/res/android"> 

    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration="1000"
        />
    <scale 
        android:fromXScale="1"
        android:toXScale="0.5"
        android:fromYScale="1"
        android:toYScale="0.5"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1000"
        />

</set>

anim_translate

<?xml version="1.0" encoding="utf-8"?>
<!-- 移动动画 -->
<translate
    android:fromXDelta="0"
    android:toXDelta="50"
    android:fromYDelta="0"
    android:toYDelta="100"
    android:duration="1000"
    android:fillAfter="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
</translate>

3.主要类的调用

MainActivity.java

package com.example.android_tweenanimationdemo;

import android.R.interpolator;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener{

    private Button btn_alpha,btn_translate,btn_scale,btn_rotate,btn_allofit;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    private void init() {
        // TODO Auto-generated method stub
        btn_alpha = (Button) findViewById(R.id.btn_alpha);
        btn_translate = (Button) findViewById(R.id.btn_translate);
        btn_scale = (Button) findViewById(R.id.btn_scale);
        btn_rotate = (Button) findViewById(R.id.btn_rotate);
        btn_allofit = (Button) findViewById(R.id.btn_allofit);

        btn_alpha.setOnClickListener(this);
        btn_translate.setOnClickListener(this);
        btn_scale.setOnClickListener(this);
        btn_rotate.setOnClickListener(this);
        btn_allofit.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        ImageView iv = (ImageView) findViewById(R.id.iv);
        Animation anim = null;
        switch (v.getId()) {
        case R.id.btn_alpha:
            //anim = AnimationUtils.loadAnimation(this, R.anim.anim_alpha);//这是静态的用法
            anim =getAlpha();//这是动态获取的用法
            break;
        case R.id.btn_translate:
            //anim = AnimationUtils.loadAnimation(this, R.anim.anim_translate);//这是静态的用法
            anim = getTraslate();
            break;
        case R.id.btn_scale:
            //anim = AnimationUtils.loadAnimation(this, R.anim.android_scale);//这是静态的用法
            anim = getScale();
            break;
        case R.id.btn_rotate:
            //anim = AnimationUtils.loadAnimation(this, R.anim.android_rotate);//这是静态的用法
            anim = getrotate();
            break;
        case R.id.btn_allofit:
            //anim = AnimationUtils.loadAnimation(this, R.anim.anim_set);//这是静态的用法
            anim =getset();
            break;
        default:
            break;
        }
        iv.startAnimation(anim);//开始动画
        //设置动画监听
        anim.setAnimationListener(new AnimationListener() {

            @Override
            //动画开始的监听
            public void onAnimationStart(Animation animation) {
                // TODO Auto-generated method stub
                Toast.makeText(MainActivity.this, "动画开始", Toast.LENGTH_LONG).show();
            }
            //动画重复的监听
            @Override
            public void onAnimationRepeat(Animation animation) {
                // TODO Auto-generated method stub
                Toast.makeText(MainActivity.this, "动画重复", Toast.LENGTH_LONG).show();
            }
            //动画结束的监听   
            @Override
            public void onAnimationEnd(Animation animation) {
                // TODO Auto-generated method stub
                Toast.makeText(MainActivity.this, "动画结束", Toast.LENGTH_LONG).show();
            }
        });
    }

    /**
     * 获取渐变动画
     */
    private Animation getAlpha(){
        //AlphaAnimation anim = new AlphaAnimation(fromAlpha, toAlpha);
        AlphaAnimation anim = new AlphaAnimation(1, 0);//1为完全显示,0位隐藏了
        anim.setDuration(5000);//毫秒级别,动画持续的时间
        anim.setRepeatCount(2);//设置重复次数
        anim.setFillAfter(false);//设置加速器
        return anim;
    }

    /**
     * 获取移动的动画
     */
    private Animation getTraslate(){
        //TranslateAnimation anim = new TranslateAnimation(fromXDelta, toXDelta, fromYDelta, toYDelta);
        TranslateAnimation anim = new TranslateAnimation(0, 100, 0, -100);
        anim.setDuration(5000);
        anim.setRepeatCount(2);//设置重复次数
        anim.setFillAfter(true);
        anim.setInterpolator(this,android.R.anim.bounce_interpolator);//各种加速器
        return anim;
    }

    /**
     * 获取形变的动画
     */
    private Animation getScale(){
        //ScaleAnimation anim =new ScaleAnimation(fromX, toX, fromY, toY, pivotXType, pivotXValue, pivotYType, pivotYValue);
        ScaleAnimation anim =new ScaleAnimation(1, 0.5f, 1, 0.5f, ScaleAnimation.RELATIVE_TO_SELF, 0.5f, ScaleAnimation.RELATIVE_TO_SELF,  0.5f);
        anim.setDuration(5000);
        anim.setRepeatCount(2);//设置重复次数
        anim.setFillAfter(true);
        anim.setInterpolator(this,android.R.anim.bounce_interpolator);//各种加速器
        return anim;
    }

    /**
     * 获取旋转的动画
     */
    private Animation getrotate(){
        //RotateAnimation anim = new RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue);
        RotateAnimation anim = new RotateAnimation(0, 180, RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        anim.setDuration(5000);
        anim.setRepeatCount(2);//设置重复次数
        anim.setFillAfter(true);
        anim.setInterpolator(this,android.R.anim.bounce_interpolator);//各种加速器
        return anim;
    }

    /**
     * 获取总体动画
     */
    private Animation getset(){
        AnimationSet anim = new AnimationSet(false);//是否共享加速器
        anim.setDuration(1000);
        anim.setFillAfter(false);
        //透明度的变化
        AlphaAnimation alpha = new AlphaAnimation(1, 0);
        alpha.setDuration(1000);
        alpha.setRepeatCount(-1);//-1代表无线循环
        //alpha.setRepeatMode(Animation.REVERSE);//反方向执行
        //缩放的变化
        ScaleAnimation Scale =new ScaleAnimation(1, 0.5f, 1, 0.5f, ScaleAnimation.RELATIVE_TO_SELF, 0.5f, ScaleAnimation.RELATIVE_TO_SELF,  0.5f);
        Scale.setDuration(1000);
        Scale.setRepeatCount(-1);//-1代表无线循环
        Scale.setInterpolator(this, android.R.anim.bounce_interpolator);
        //Scale.setRepeatMode(Animation.REVERSE);//反方向执行
        //Scale.setStartOffset(1000);
        //把渐变和缩放放入animation这个类
        anim.addAnimation(alpha);
        anim.addAnimation(Scale);
        return anim;
    }

}

4.布局文件

activity_main.xml

<LinearLayout 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:orientation="vertical"
    tools:context="com.example.android_tweenanimationdemo.MainActivity" >

    <Button
        android:id="@+id/btn_alpha"
        android:text="渐变动画"
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        />

    <Button
        android:id="@+id/btn_translate"
        android:text="移动动画"
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        />

    <Button
        android:id="@+id/btn_scale"
        android:text="形变动画"
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        />

    <Button
        android:id="@+id/btn_rotate"
        android:text="旋转动画"
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        />

    <Button
        android:id="@+id/btn_allofit"
        android:text="综合动画动画"
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        />
    <RelativeLayout
        android:layout_width="match_parent" 
        android:layout_height="match_parent"
        >
        <ImageView
            android:id="@+id/iv"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/circle_heart" 
            android:layout_centerInParent="true"
            />
    </RelativeLayout>

</LinearLayout>

布局图片
这里写图片描述

0
0
查看评论

Android开发之Tween(补间动画)完全解析(上)——xml文件配置的实现

相信不管做了多长时间开发的人都用用过Tween动画,从刚开始工作到现在我也是用了N次Tween动画,但是每一次使用总感觉掌握的不够全面,所以花了点时间详细的总结了下Tween动画,其实在android中熟练掌握动画,能够帮助我们实现一些非常酷炫的效果从而使我们的app在交互,或者用户体验上有一个更好...
  • dmk877
  • dmk877
  • 2016-07-22 23:27
  • 5893

Android Tween and Property Animation的本质区别

之前只知道这两种动画是有区别的,区别是属性动画会修改View的属性。但是具体怎么回事一直没弄明白。 在阅读了网上的各种博客和源码后,大致搞懂了区别。 Tween动画通过view的matrix和alpha变量对view进行修改,但是并不会修改view自身属性。 而Property动画会修改view的自...
  • lihenair
  • lihenair
  • 2015-05-13 12:55
  • 1747

TweenAnimation 补间动画

这里有几篇比较好的相关文章: Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法  Animation动画详解(二)——Interpolator插值器  Animation动画详解(三)—— 代码...
  • a772890398
  • a772890398
  • 2016-01-21 17:03
  • 211

android补间动画(TweenAnimation)

一、AlphaAnimation(渐变动画) //渐变动画 private void startAlphaAnimation () { /** * 创建渐变动画对象 * 参数1:从一个透明值 * 参数2:到另外一个透明值 * 参数取值范围0~1 ...
  • yangshuangyue
  • yangshuangyue
  • 2016-09-20 00:29
  • 155

tween.js 用户指南 - 与 Three.js 配合使用的补间动画库

tween.js 用户指南 - 与 Three.js 配合使用的补间动画库
  • sleks
  • sleks
  • 2014-07-17 16:15
  • 2878

Android 补间动画TweenAnimation详解

Android 补间动画TweenAnimation详解
  • bitian123
  • bitian123
  • 2016-08-15 11:38
  • 215

Android动画1-补间动画(TweenAnimation)

Android的动画形式共有三种:TweenAnimation(补间动画)、FrameAnimation(帧动画)、PropertyAnimation(属性动画)。 本章介绍补间动画。 先说个题外话: 帧动画的帧是什么?  一个静止的画面就是一帧,简单来说,一幅画就是一帧,一幅...
  • ShortChin
  • ShortChin
  • 2016-05-31 11:32
  • 410

Android动画(2)--TweenAnimation(补间动画)

本节我们来讲补间动画补间动画的实现方式,补间动画则是通过特定算法在两个关键帧之间补充渐变的动画效果来实现的。补间动画的优点是可以节省空间。
  • qwer4755552
  • qwer4755552
  • 2016-08-28 15:54
  • 257

Android 补间动画原理

这段时间项目中用到了动画,所以趁热打铁,看看动画原理 补间动画 使用举例 TranslateAnimation translateAnim = new TranslateAnimation(0, 100, 0, 100); translateAnim.setDuration(100...
  • Mr_LiaBill
  • Mr_LiaBill
  • 2015-10-30 13:53
  • 2222

Android中属性动画和补间动画的区别

目录目录 前言 为什么引入属性动画 属性动画 ObjectAnimator ValueAnimator AnimatorSet Animator监听器前言Android属性动画和补间动画,既是日常工作中经常接触到的技术,也是面试常考的问题。 这篇博客主要是为了介绍Android的属性动画使用,同时...
  • zinss26914
  • zinss26914
  • 2016-01-26 17:52
  • 9464
    个人资料
    • 访问:917次
    • 积分:55
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档