android 动画实现之 Tween Animation(补间动画)

对于 Android 初学者来说动画效果的实现是必须掌握的一项技能,官方提供动画分为 Property Animation(属性动画)和 View Animation(视图动画) 两种。而 View Animation 又分为 Tween Animation 和 Frame animation (帧动画)两种。下面为大家介绍一下  Tween Animation (补间动画)的使用。补间动画是通过对对象视图的一系列动画变化操作来实现的的动画效果。但在使用过程中应该注意它操作的是对象的视图层,并没有将它的其他属性位置移动。举个例子,如果你所操作的对象有点击监听,如果将对象移动到其他位置时该对象的点击监听仍在原来的位置。开始真正的使用介绍了:

补间动画目前有5种动画效果:AlphaAnimation(透明度(alpha)渐变效果) TranslateAnimation(位移动画) ScaleAnimation(缩放动画) RotateAnimation(旋转动画) AnimationSet(组合动画)

  补间动画的实现可以有 XML 、java 代码实现两种。使用 XML 方式时,在 res 包下新建一个 anim 包。

           AlphaAnimation (透明度动画):继承自 Animation 类,通过改变对象的透明度来实现动画效果。

XML 在 anim 包新建 alpha_animation.xml:




   TranslateAnimation位移动画):继承自 Animation 类,通过移动对象来实现动画效果。

XML 在 anim 包新建 translate_animation.xml:






ScaleAnimation (缩放动画) : :继承自 Animation 类,通过伸缩对象来实现动画效果。

XML 在 anim 包新建 scale_animation.xml:




Rotateanimation(旋转动画) ::继承自 Animation 类,通过旋转对象来实现动画效果。

XML 在 anim 包新建 rotate_animation.xml:





AnimationSet(组合动画) ::继承自 Animation 类,通过多个子动画的组合对象来实现动画效果。

XML 在 anim 包新建 set_animation.xml:




    
    

    
    
    

    
    
    

    
    
    

    
使用 xml 来实现动画效果的实例:

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.AlphaAnimation;
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 butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.my_photo)
    ImageView myPhoto;
    @BindView(R.id.alpha)//透明度渐变
            Button alpha;
    @BindView(R.id.rotate)//旋转渐变
            Button rotate;
    @BindView(R.id.scale)//缩放渐变
            Button scale;
    @BindView(R.id.translate)//位移渐变
            Button translate;
    @BindView(R.id.set_animation)//组合渐变
            Button setAnimation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
    }

    @OnClick({R.id.alpha, R.id.rotate, R.id.scale, R.id.translate, R.id.set_animation})
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.alpha://透明度渐变
                //通过AnimationUtils加载xml中的动画效果来得到实例
                AlphaAnimation alphaAnimation = (AlphaAnimation) AnimationUtils.
                        loadAnimation(this, R.anim.alpha_animation);

                alphaAnimation.setFillAfter(true);//动画结束后视图是否保持在结束的状态 TRUE为是 FALSE为回到初始状态

                myPhoto.startAnimation(alphaAnimation);//开始动画

                //直接使用代码来实现动画效果
//                //new一个AlphaAnimation实例参数1为初始透明度0为最终透明度
//                AlphaAnimation animations=new AlphaAnimation(1,0);
//
//                animations.setFillAfter(true);
//
//                animations.setDuration(2000);//设置动画持续时间
//
//                myPhoto.startAnimation(animations);
                break;
            case R.id.rotate://旋转渐变
                //通过AnimationUtils加载xml中的动画效果来得到实例
                RotateAnimation rotateAnimation = (RotateAnimation) AnimationUtils
                        .loadAnimation(this, R.anim.rotate_animation);

                myPhoto.startAnimation(rotateAnimation);//开始动画

                //代码的方式与透明度类似
                break;
            case R.id.scale://缩放渐变
                //通过AnimationUtils加载xml中的动画效果来得到实例
                ScaleAnimation scaleAnimation = (ScaleAnimation) AnimationUtils
                        .loadAnimation(this, R.anim.scale_animation);

                myPhoto.startAnimation(scaleAnimation);//开始动画

                break;
            case R.id.translate://位移渐变
                //通过AnimationUtils加载xml中的动画效果来得到实例
                TranslateAnimation translateAnimation = (TranslateAnimation) AnimationUtils
                        .loadAnimation(this, R.anim.translate_animation);

                myPhoto.startAnimation(translateAnimation);//开始动画

                break;
            case R.id.set_animation://组合渐变
                //通过AnimationUtils加载xml中的动画效果来得到实例
                AnimationSet animationSet = (AnimationSet) AnimationUtils.loadAnimation(this, R.anim.set_animation);

                myPhoto.startAnimation(animationSet);//开始动画

                //使用代码的方式实现组合动画的效果
//                AnimationSet animationSet=new AnimationSet(true);//TRUE表示子动画共用一个插值器
//
//                animationSet.addAnimation(new AlphaAnimation(1,0.5f));
//
//                animationSet.addAnimation(new ScaleAnimation(1.0f,0.5f,1.0f,0.5f));
//
//                animationSet.addAnimation(new RotateAnimation(0f,7200.0f,
//                        Animation.RELATIVE_TO_SELF,0.5f,
//                        Animation.RELATIVE_TO_SELF,0.5f));
//
//                animationSet.addAnimation(new TranslateAnimation(
//                        Animation.RELATIVE_TO_PARENT,0,
//                        Animation.RELATIVE_TO_PARENT,1.0f,
//                        Animation.RELATIVE_TO_PARENT,0,
//                        Animation.RELATIVE_TO_PARENT,1.0f));
//
//                animationSet.setDuration(5000);
//
//                myPhoto.startAnimation(animationSet);
                break;
        }
    }
}
学会了这些,我们就能使用基础的补间动画了。









你可能感兴趣的:(记录)