zoukankan      html  css  js  c++  java
  • UI设计篇·入门篇·简单动画的实现,透明动画/旋转动画/移动动画/缩放动画,混合动画效果的实现,为动画设置监听事件,自定义动画的方法

    基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画。

    配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果

    相比而言,用xml文档写出来的动画效果,写一次可以很多次调用,但代码配置的话则每一次都需要重复配置过程。

    具体使用代码:

    //这是对一个按钮设置不同的动画
    findViewById(R.id.animation).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //使用代码配置透明动画 AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);  //从0到1,代表从完全透明转变为完全不透明 alphaAnimation.setDuration(1000);                //这个变化的时间一共花费1秒 v.startAnimation(alphaAnimation);                //启动此animation // 使用XML文档配置透明动画 v.startAnimation(AnimationUtils.loadAnimation(Main2Activity.this,R.anim.alphaanimation)); // 使用代码配置旋转动画
            //下面新建的旋转动画的意思是从0度旋转到360度,而旋转的中心点是相对于自身宽高的一半
    RotateAnimation rotateAnimation = new RotateAnimation(0,360, Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f); rotateAnimation.setDuration(1000); v.startAnimation(rotateAnimation); // 使用XML文档配置旋转动画 v.startAnimation(AnimationUtils.loadAnimation(Main2Activity.this,R.anim.rotateanimation)); // 使用代码配置移动动画 TranslateAnimation translateAnimation = new TranslateAnimation(0,200,0,200);  //从(0,0)移动到(200,200) translateAnimation.setDuration(1000); v.startAnimation(translateAnimation); // 使用代码配置移动动画 v.startAnimation(AnimationUtils.loadAnimation(Main2Activity.this,R.anim.translateanimation)); // 使用代码配置缩放动画 ScaleAnimation scaleAnimation = new ScaleAnimation(0,1,0,1,0,0);    //按钮的长和宽的百分比从0缩放到1,缩放的原点在(0,0) scaleAnimation.setDuration(1000); v.startAnimation(scaleAnimation); // 使用XML文档配置缩放动画 v.startAnimation(AnimationUtils.loadAnimation(Main2Activity.this,R.anim.scaleanimation)); } });


     

    创建动画XML文档的方法:

    1.在res目录文件下,新建XML文件,选择类型为animation

    2.在该文件夹下新建xml文件,用来配置动画的相关信息

    透明动画的xml配置文件:

    <?xml version="1.0" encoding="utf-8"?>
    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="1000">
    </alpha>

    旋转动画的xml配置文件:

    <?xml version="1.0" encoding="utf-8"?>
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:duration="1000"
        android:pivotX="50%"
        android:pivotY="50%">
    </rotate>

    移动动画的xml配置文件:

    <?xml version="1.0" encoding="utf-8"?>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromXDelta="0"
        android:toXDelta="200"
        android:fromYDelta="0"
        android:toYDelta="200"
        android:duration="1000">
    
    </translate>

    缩放动画的xml配置文件:

    <?xml version="1.0" encoding="utf-8"?>
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromXScale="0"
        android:toXScale="1"
        android:fromYScale="0"
        android:toYScale="1"
        android:duration="1000">
    
    </scale>

    二、混合动画效果的实现:
    1.新建一个animationSet容器,用来储存各种需要混合的动画效果数据

    2.分别单独设计混合动画的各部分内容,然后将每种动画都添加进animationSet容器

    3.通过startAnimation方法启动混合动画

    实际代码:

    AnimationSet animationSet = new AnimationSet(true);     //true容器内的每个动画都被使用
    
    //
    透明动画
    AlphaAnimation alphaAnimation = new AlphaAnimation(0,1); alphaAnimation.setDuration(1000); animationSet.addAnimation(alphaAnimation);
    //
    旋转动画 RotateAnimation rotateAnimation = new RotateAnimation(0,360, Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f); rotateAnimation.setDuration(1000); animationSet.addAnimation(rotateAnimation);
    //
    缩放动画 ScaleAnimation scaleAnimation = new ScaleAnimation(0,1,0,1,0,0); scaleAnimation.setDuration(1000); animationSet.addAnimation(scaleAnimation);
    //以上的三种动画就是上面的简单动画的复用 v.startAnimation(animationSet);

    使用XML文件配置混合动画的方法:

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:shareInterpolator="true"
        android:duration="1000">
    
        <alpha
            android:fromAlpha="0"
            android:toAlpha="1"
            android:duration="1000">
        </alpha>
        <rotate
            android:fromDegrees="0"
            android:toDegrees="360"
            android:duration="1000"
            android:pivotX="50%"
            android:pivotY="50%">
        </rotate>
        <scale
            android:fromXScale="0"
            android:toXScale="1"
            android:fromYScale="0"
            android:toYScale="1"
            android:duration="1000">
        </scale>
    
    </set>

    为动画设置监听事件:

    动画的监听事件包含了三个时间的调用方法:动画开始,动画重复,动画结束。

    实际代码:

    Animation a = AnimationUtils.loadAnimation(Main2Activity.this,R.anim.multianimation);
    a.setAnimationListener(
    new Animation.AnimationListener() {   @Override public void onAnimationStart(Animation animation) {   Toast.makeText(getApplicationContext(),"动画开始",Toast.LENGTH_SHORT).show(); } @Override public void onAnimationEnd(Animation animation) { Toast.makeText(getApplicationContext(),"动画结束",Toast.LENGTH_SHORT).show(); } @Override public void onAnimationRepeat(Animation animation) { Toast.makeText(getApplicationContext(),"动画重复调用",Toast.LENGTH_SHORT).show(); } }); v.startAnimation(a);

    自定义动画的实现方法步骤:

    1.自定义class,继承Animation

    2.根据实际需要重写父方法,设计代码实现实际需求

    3.通过类名调用(使用方法与系统动画一致)

    实际代码:

    import android.view.animation.Animation;
    import android.view.animation.Transformation;
    
    /**
     * Created by Andrew on 2016/7/27.
     */
    public class CustomAnimation extends Animation {
    
        @Override
        public void initialize(int width, int height, int parentWidth, int parentHeight) {
            //这是一个可以获取动画控件的宽高和父容器的宽高的方法
            super.initialize(width, height, parentWidth, parentHeight);
        }
    
        //需要特别注意的是,此方法是会执行无数次,期间interpolatedTime会从0到1变化无数次,所有动画的实现基本都与这个数值的变化有关
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            // interpolatedTime 这是一个与动画运行周期相关的数值,在动画运行过程中,它会从0变成1
            // t参数是接受变化的控件对象
    
            //自定义动画效果:透明渐变
            t.setAlpha(interpolatedTime);       //由于interpolatedTime是从0变化到1的,将他的值设置进去技能实现透明度渐变
    
            //自定义动画效果:X轴的晃动效果
            t.getMatrix().setTranslate((float) (Math.sin(interpolatedTime)*50),0);
    
    
            super.applyTransformation(interpolatedTime, t);
        }
    }
  • 相关阅读:
    Azureus 3.0.0.8
    KchmViewer 3.0
    GNOME 2.18.0 正式版颁发宣布
    Emacs 22.0.95
    gTwitter:Twitter 的 Linux 客户端
    KDE DVD Authoring Wizard-易用的 DVD 制造器材
    GIMP 2.3.15
    Monit-零碎看监工具
    Cobras-专注于 Qt 的 IDE
    K3b 1.0 正式版公布
  • 原文地址:https://www.cnblogs.com/thinfog/p/5711609.html
Copyright © 2011-2022 走看看